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

程序员文章站 2022-06-22 20:16:45

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>