欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery的基础知识及简单微博发布功能的实现

程序员文章站 2022-03-11 18:57:28
jQ的定义jQuery是一个兼容多浏览器的JavaScript框架。可以使用户方便的处理HTML、事件,实现动画效果,并且为网站提供方便的Ajax交互。jQuery特点轻量级出色的浏览器兼容器强大的选择器出色的DOM操作封装完善的ajax链式编程隐式迭代完善的文档、强大的社区丰富的插件jQuery基本的规则和概念1)jQuery会提供一个对象叫 $ ,这个就代表jQuery2)jQuery使用$去获取我们需要的元素 $(‘选择器’) 把得到的元素称为jq对象3)jq提供的所有方...

jQ的定义

jQuery是一个兼容多浏览器的JavaScript框架。可以使用户方便的处理HTML、事件,实现动画效果,并且为网站提供方便的Ajax交互。

jQuery特点

轻量级
出色的浏览器兼容器
强大的选择器
出色的DOM操作封装
完善的ajax
链式编程
隐式迭代
完善的文档、强大的社区
丰富的插件

jQuery基本的规则和概念

1)jQuery会提供一个对象叫 $ ,这个就代表jQuery
2)jQuery使用$去获取我们需要的元素 $(‘选择器’) 把得到的元素称为jq对象
3)jq提供的所有方法只能有jq对象调用 jq对象.jq方法();

主要学习的有两样东西

1、各种各样的选择器
2、jq提供的各种各样的方法

和DOM代码的比较

与DOM的代码相比。你会发现,代码量大幅度的减少的,比DOM代码更简洁,在jq中主要是API的调用。而不是你自己去写,所以这就要你知道怎样去查找API,在写jq代码时,可以自己先去百度一个jq参考手册,方便你在实现某一个功能时,知道调用哪个API合适;在DOM代码没有这么多的API可以去多用,需要自己去写。

个人感觉,当你了解足够jq的API,你就会发现jq的代码特别容易理解,大致的思路是,先明白你要什么样的效果,再去查看什么API能帮你达到这样的效果,以及这个API该如何去用;然后编写jq代码,要么先不管其他元素,就一心去实现你想要的效果,等你想要的效果出来了,然后再去消除对其他元素的效果;要么就先消除你要实现的效果给其他元素带来的影响,再去实现你想要的效果;就还以灯泡效果为例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <!-- 下面这一行代码一定要引入,不然就无法调用jq中方法,这个版本有很多,可以在网上找一个自己用的舒服的版本用 -->
    <script src="./js/jquery-1.11.3.min.js"></script>
    
    <script>
        $(function () {
            // 获取img元素,注册一个点击事件
            $("img").click(function(){
            // this代表点击源,siblings()代表兄弟元素,先消除对兄弟元素的影响,再实现效果。
                $(this).siblings().css("border",0).end().css("border","4px solid red");
            })
        })
    </script>
</head>

<body>
    <img src="./images/19/1.jpg" alt="">
    <img src="./images/19/2.jpg" alt="">
    <img src="./images/19/3.jpg" alt="">
    <img src="./images/19/4.jpg" alt="">
    <img src="./images/19/5.jpg" alt="">
</body>

</html> 

看了上面的案例是不是感觉很神奇,在DOM要将近十行的代码,在这里只要三行代码,下面是去实现一个简单的微博发布功能:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>微博发布功能</title>
	<style>
		*{margin:0;padding:0}
		#weibo{
			width: 600px;
			padding:10px;
			border: 1px solid #000;
			margin:100px auto 0;
		}
		#weibo textarea{
			width: 455px;
			height: 165px;
			resize:none;
			vertical-align: bottom;
		}
		#weibo button{
			width: 40px;
			height: 24px;
			vertical-align: bottom;
		}
		#weibo ul{
			margin:20px 20px 20px 90px;
		}
		#weibo li{
			line-height: 24px;
			list-style-type:none;
			border-bottom:1px dashed #ccc;
			word-break:break-all;   /*自动换行*/
		}
	</style>
	
</head>
<body>
	<div id="weibo">
		微博内容: 
		<textarea></textarea>
		<button>发布</button>
		<ul>

			<li>昨天,天气很热,差点热死了!</li>
		</ul>
	</div>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
		$('button').click(function(){
			// 1.拿到输入的内容
			var res=$('textarea').val();
			if(res!=''){
				// console.log(res);
				// 2.创建孤儿元素
				var oLi=$('<li>'+res+'</li>');
				//3.添加元素
				$('ul').prepend(oLi);
				//4.清空文本域
				$('textarea').val('');
			}else{
				alert('请输入内容');
			}
		});
	</script>
</body>
</html>

效果如下:
jQuery的基础知识及简单微博发布功能的实现
jQuery的基础知识及简单微博发布功能的实现

本文地址:https://blog.csdn.net/only_zing/article/details/107876396