经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery总结 - 小杨-先生
来源：cnblogs　　作者：小杨-先生　　时间：2021/6/7 9:11:14　　对本文有异议

目录

一、jQuery介绍

1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

2、jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery引入

首先需要jQuery官网下载jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。

  1. <script src="jQuery.js"></script>

二、jQuery对象和DOM对象

jQuery 找到的标签对象称为 ——> jQuery对象

原生 JS 找到的标签对象称为 ——> DOM对象

DOM对象只能使用DOM对象的方法,不能使用jQuery对象的方法

jQuery对象也是,它不能使用DOM对象的方法

我们在声明一个jQuery对象变量的时候在变量名前面加上$：

  1. var $variable = jQuery对像;
  2. var variable = DOM对象;

jQuery对象转成DOM对象，通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了，DOM对象转换成jQuery对象：$(DOM对象)，通过$符号包裹一下就可以了

  1. $variable[0];

DOM 对象和 jQuery 对象互相转换：

  1. jQuery对象转DOM对象 ——> jQuery对象[0]  示例:$('#d1')[0]
  2. DOM对象转jQuery对象 ——> $(dom对象)

三、jQuery选择器

不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象

选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本选择器

和css一样

  1. id选择器：
  2. $("#id");
  4. 标签选择器：
  5. $("tagName");
  7. class选择器：
  8. $(".className");
  10. 配合使用：
  11. $("div.c1");  	// 找到有c1 class类的div标签
  13. 所有元素选择器：
  14. $("*");
  16. 组合选择器：
  17. $("#id, .className, tagName");

层级选择器

和css一样

x 和 y 可以为任意选择器

  1. $("x y");		// x 的所有后代 y（子子孙孙）
  2. $("x > y");		// x 的所有儿子 y（儿子）
  3. $("x + y");		// 找到所有紧挨在 x 后面的 y
  4. $("x ~ y");		// x 之后所有的兄弟 y

基本筛选器

选择之后进行过滤筛选

方式一：

  1. :first 		// 第一个
  2. :last 		// 最后一个
  3. :eq(index)	// 索引等于index的那个元素
  4. :even 		// 匹配所有索引值为偶数的元素，从 0 开始计数
  5. :odd 		// 匹配所有索引值为奇数的元素，从 0 开始计数
  6. :gt(index)	// 匹配所有大于给定索引值的元素
  7. :lt(index)	// 匹配所有小于给定索引值的元素
  8. :not(元素选择器)	// 移除所有满足not条件的标签
  9. :has(元素选择器)	// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
  12. // 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
  13. $("div:has(h1)")
  14. // 找到所有后代中有c1样式类（类属性class='c1'）的div标签
  15. $("div:has(.c1)")
  17. $("li:not(.c1)")		// 找到所有不包含c1样式类的li标签
  18. $("li:not(:has(a))")	// 找到所有后代中不含a标签的li标签
  20. 例子：
  21. <ul>
  22.     <li id="1">上海</li>
  23.     <li id="2">成都</li>
  24.     <li id="3">泸州</li>
  25.     <li id="4">雅安</li>
  26.     <li id="5">北京</li>
  27. </ul>
  29. $('li:first');	// 查找所有li标签中的第一个标签

方式二：

和前面使用冒号的一样 :first等，只不过冒号的那个是写在选择器里面的，而下面的这几个是方法

  1. .first() 	// 获取匹配的第一个元素
  2. .last() 	// 获取匹配的最后一个元素
  3. .not() 		// 从匹配元素的集合中删除与指定表达式匹配的元素
  4. .has() 		// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
  5. .eq() 		// 索引值等于指定值的元素
  7. $('li').first();	// 查找所有li标签中的第一个标签

属性选择器

  1. [attribute]
  2. [attribute=value]		// 属性等于
  3. [attribute!=value]		// 属性不等于
  6. 例子：多用于input标签
  7. <input type="text">
  8. <input type="password">
  9. <input type="checkbox">
  10.     
  11. $("input[type='checkbox']");	// 取到checkbox类型的input标签
  12. $("input[type!='text']");		// 取到类型不是text的input标签

表单筛选器

多用于找form表单里面出现的input标签

找到的是type属性为这个值的input标签中

  1. :text
  2. :password
  3. :file
  4. :radio
  5. :checkbox
  6. :submit
  7. :reset
  8. :button
  10. 例子：多用于input标签
  11. <input type="text">
  12. <input type="password">
  13. <input type="checkbox">
  14.     
  15. $(':password')	// 找到input标签中type属性为password的标签

表单对象属性筛选器

  1. :enabled	// 可用的标签
  2. :disabled	// 不可用的标签
  3. :checked	// 选中的input标签
  4. :selected	// 选中的option标签
  6. 例子1：
  7. <input type="text" disabled="disabled">
  8. <input type="password">
  9. $("input:enabled")  	// 找到可用的input标签
  11. 例子2：
  12. <select id="s1">
  13.   <option value="1">北京</option>
  14.   <option value="2">四川</option>
  15.   <option selected value="3">云南</option>	// 默认选中
  16.   <option value="4">深圳</option>
  17. </select>
  18. $(":selected")  	// 找到所有被选中的option

筛选器方法

选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，写在对象后面加括号，不再是写在选择器里面的了。

下一个：

  1. $('#l3').next();  			// 找到下一个兄弟标签
  2. $('#l3').nextAll(); 		// 找到下面所有的兄弟标签
  3. $('#l3').nextUntil('#l5');	// 往下直到找到id为l5的标签，不包含它

上一个：

  1. $("#id").prev()				// 找到上一个兄弟标签
  2. $("#id").prevAll()			// 找到上面所有的兄弟标签
  3. $("#id").prevUntil("#i2")	// 往上直到找到id为i2的标签，不包含它

父亲元素：

  1. $("#id").parent()	// 查找当前元素的父亲元素
  2. $("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
  3. $("#id").parentsUntil('body') 
  4. // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

儿子和兄弟元素：

  1. $('ul').children(); 		// 找到当前标签的所有儿子标签
  2. $('ul').children('#l3');  	// 找到符合后面这个选择器的儿子标签
  4. $('#l5').siblings();		// 找到兄弟们，不包含自己
  5. $('#l5').siblings('#l3'); 	// 找到符合后面这个选择器的兄弟标签

查找：find

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

  1. $('ul').find('#l3');  --> 类似于  $('ul #l3')

过滤：filter

和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签

  1. // 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div
  2. ('li').filter('.l3');

四、标签操作

样式操作

样式类操作：

  1. addClass();		// 添加指定的CSS类名。
  2. removeClass();	// 移除指定的CSS类名。
  3. hasClass();		// 判断样式存不存在
  4. toggleClass();	// 切换CSS类名，如果有就移除，如果没有就添加。

例子：

  1. $('div.c1').addClass('c2');
  2. $('div.c1').removeClass('c2');
  3. $('div.c1').hasClass('c2');
  4. $('div.c1').toggleClass('c2');

CSS样式：

  1. // 原生js
  2. 标签.style.backgroundColor = 'black';
  4. // jQuery
  5. $('.c1').css('background-color','red');  
  6. // 同时设置多个css样式
  7. $('.c1').css({'background-color':'yellow','width':'200px'})

位置操作：

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

.position()的差别在于： .position()获取相对于它最近的具有相对位置(position: relative 或 position: absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器界面左上角的距离。

  1. offset()	// 获取匹配元素在当前窗口的相对偏移或设置元素位置
  2. position()	// 获取匹配元素相对父元素的偏移，不能设置位置
  3. $(window).scrollTop();  	// 滚轮向下移动的距离
  4. $(window).scrollLeft(); 	// 滚轮向左移动的距离
  6. // 查看位置
  7. $('.c2').position();  // 查看相对于父级元素位置
  8. $('.c2').offset();    // 查看距离窗口左上角的绝对位置
  10. // 设置位置
  11. $('.c2').offset({'top':'20','left':'40'});

尺寸操作：

  1. // 与盒子模型相关
  2. $('.c1').height();  	// content 高度
  3. $('.c1').width();   	// content 宽度
  4. $('.c1').innerHeight();	// content 高度 + padding高度
  5. $('.c1').innerWidth(); 	// content 宽度 + padding宽度
  6. $('.c1').outerHeight();	// content 高度 + padding高度 + border高度
  7. $('.c1').outerWidth();	// content 宽度 + padding宽度 + border宽度

文本操作

HTML：

  1. html()		// 取得第一个匹配元素的html内容，包含标签内容
  2. html(val)	// 修改所有匹配元素的html内容，识别标签，能够表现出标签的效果

文本值：

  1. text()		// 取得所有匹配元素的内容，只有文本内容，没有标签
  2. text(val)	// 修改所有匹配元素的内容，不识别标签，将标签作为文本插入进去

例子：

  1. $('.c1').text('<h3>hello Word</h3>');
  2. $('.c1').html('<h3>hello Word</h3>');

值操作

  1. val()		// 取得第一个匹配元素的当前值
  2. val(val)	// 修改所有匹配元素的值
  3. val([val1, val2])	// 修改多选的checkbox、多选select的值

实例一：获取值

  1. <input type="text" class="c1">  ————>获取值：$('.c1').val();
  3. <input type="checkbox" value="1">
  4. // 获取被选中的值这样是不行的：$(':checkbox:checked').val();
  5. // 需要循环取值
  6. var d = $(':checkbox:checked');
  7. for (var i=0;i<d.length;i++){
  8.     console.log(d.eq(i).val());
  9. }
  11. 单选select ---> $('#city').val();
  12. 多选select ---> $('#author').val(); 	// ["2", "3"]

实例二：设置值

  1. <input type="text" class="c1">  ——>设置值：$('.c1').val('小杨');
  3. <input type="checkbox" value="1">	——>设置值：$(':checkbox').val([1,3]);
  4. // 如果直接：$(':checkbox').val(1);这样的话会把所有的的value全部设置为1
  6. 单选select ---> $('#city').val('1'); // 或者——> option value='1'
  7. 多选select ---> $('#author').val(['2','3'])；

属性操作

用于ID自带属性等或自定义属性：

  1. attr(attrName)				// 返回第一个匹配元素的属性值
  2. attr(attrName, attrValue)	// 为所有匹配元素设置一个属性值
  3. attr({k1: v1, k2:v2})		// 为所有匹配元素设置多个属性值
  4. removeAttr(attrName)		// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

  1. prop() 		// 获取属性

实例：

  1. // 设置单个属性
  2. $('.c1').attr('id','d1');
  4. // 设置多个属性
  5. $('.c1').attr({name:'xiao',id:'d1'});
  7. // 查看属性
  8. $('.c1').attr('属性名');
  10. // 删除属性
  11. $('.c1').removeAttr('属性名');
  14. // prop ——> 针对的是checked\selected\disabled
  15. // 查看标签是否有checked属性,也就是是否被选中
  16. attr ————> $(':checked').attr('checked');	// 返回：选中（checked），没选中（undefined）
  17. prop ————> $(':checked').prop('checked'); 	// 返回：选中（true），没选中（false）
  19. // 通过设置属性的方式来设置是否选中:
  20. $(':radio').eq(2).prop('checked',true);  	// true和false不能加引号
  21. $(':radio').eq(2).prop('checked',false);

prop和attr的区别：

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

简单总结：

1、对于标签上有的能看到的属性和自定义属性都用attr

2、对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文档操作

添加到指定元素--内部的后面

  1. $(A).append(B)		// 把B追加到A
  2. $(A).appendTo(B)	// 把A追加到B
  4. 实例：
  5. // 添加字符串照样能识别标签
  6. $('#d1').append('<a href="http://www.jd.com">京东</a>');

添加到指定元素--内部的前面

  1. $(A).prepend(B)		// 把B前置到A
  2. $(A).prependTo(B)	// 把A前置到B
  4. 实例：
  5. // 添加字符串照样能识别标签
  6. $('#d1').perpend('<a href="http://www.jd.com">京东</a>');

添加到指定元素--外部的后面

  1. $(A).after(B)		// 把B放到A的后面
  2. $(A).insertAfter(B)	// 把A放到B的后面
  4. 实例：
  5. // 添加字符串照样能识别标签
  6. $('#d1').after('<a href="http://www.jd.com">京东</a>');

添加到指定元素--外部的前面

  1. $(A).before(B)			// 把B放到A的前面
  2. $(A).insertBefore(B)	// 把A放到B的前面

移除和清空元素

  1. remove()	// 从DOM中删除所有匹配的元素。
  2. empty()		// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
  4. 实例：
  5. $('div').remove();	// 移除div标签
  6. $('div').empty();	// 清空div标签中的所有内容

替换

  1. replaceWith()
  2. replaceAll()
  4. 实例：
  5. var a = document.createElement('a')
  6. a.href = 'http://www.baidu.com';
  7. a.innerText = '百度';
  9. // 写法不一样效果一样
  10. $('div').replaceWith(a);		// 将所有的div标签替换成a标签
  11. $(a).replaceAll('div');			// 将所有的div标签替换成a标签

克隆

  1. clone()		// 克隆 
  4. 实例：
  5. <button class="btn">按钮</button>
  7. <script>
  8.     $('.btn').click(function (){
  9.         // var a = $(this).clone(); 	// 克隆标签
  10.         var a = $(this).clone(true);	// 连带事件一起克隆
  11.         $(this).after(a)
  12.     })
  14. </script>

五、事件

事件绑定方式

方式一：

  1. <style>
  2. .c1{
  3.     height: 100px;
  4.     width: 100px;
  5.     background: red;
  6. }
  7. </style>
  9. <div class="c1"></div>
  11. <script>
  12.     $('.c1').click(function () {
  13.         $(this).css({backgroundColor:'green'})
  14.     })
  15. </script>

方式二：

  1. <style>
  2. .c1{
  3.     height: 100px;
  4.     width: 100px;
  5.     background: red;
  6. }
  7. </style>
  9. <div class="c1"></div>
  11. <script>
  12.     $('.c1').on('click', function () {
  13.         $(this).css({backgroundColor:'green'})
  14.     })
  15. </script>

常用事件

  1. click(function(){...})		// 左键点击的事件
  2. hover(function(){...})		// 鼠标悬浮触发的事件
  3. blur(function(){...})		// 失去光标(焦点)触发的事件
  4. focus(function(){...})		// 获取光标触发的事件
  5. change(function(){...}) 	// 内容发生变化，input，select等
  6. keyup(function(){...}) 		// 键盘抬起触发的事件
  7. keydown(function(){...})	// 键盘按下触发的事件

**左键点击的事件：click **

  1. $('.c1').click(function () {
  2. 	$(this).css({backgroundColor:'green'})
  3. })

获取光标触发的事件：focus —— 失去光标(焦点)触发的事件：blur

  1. <style>
  2.     .c1{
  3.         height: 100px;
  4.         width: 100px;
  5.         background: red;
  6.     }
  7. </style>
  9. <div class="c1" ></div>
  10. <input type="text">
  12. <script>
  13.     $('[type="text"]').focus(function () {			// 获取光标事件
  14.         $('.c1').css({backgroundColor:'green'})
  15.     })
  17.     $('[type="text"]').blur(function () {			// 失去光标事件
  18.         $('.c1').css({backgroundColor:'red'})
  19.     })
  20. </script>

域内容发生改变时触发的事件：change ——内容发生变化，input，select等

  1. <select name="" id="d1">
  2.     <option value="1">成都</option>
  3.     <option value="2">北京</option>
  4.     <option value="3">上海</option>
  5. </select>
  7. <script>
  8.     $('#d1').change(function () {	
  9.         console.log($(this).val())
  10.     })
  11. </script>

input 实时监听事件：只要input框里面的值发生变化就触发某个事件，input事件不能直接绑定，必须用on绑定才行

  1. <input type="text" id="d1">
  3. <script>
  4.     $('#d1').on("input", function () {
  5.         console.log($(this).val())
  6.     })
  7. </script>

鼠标悬浮触发的事件：hover

  1. <style>
  2.     .c1{
  3.         height: 100px;
  4.         width: 100px;
  5.         background: red;
  6.     }
  7. </style>
  9. <div class="c1"></div>
  11. <script>
  12.     $('.c1').hover(
  13.         // 第一步：鼠标放上去
  14.         function () {$(this).css({backgroundColor: 'yellow'});},
  15.         // 第二步：鼠标移走
  16.         function () {$(this).css({backgroundColor: 'red'});}
  17.     )
  18. </script>

鼠标悬浮触发的事件：mouseenter、mouseout——等同于hover

mouseover 和 mouseenter 的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象

  1. <style>
  2.     .c1{
  3.         height: 100px;
  4.         width: 100px;
  5.         background: red;
  6.     }
  7. </style>
  9. <div class="c1"></div>
  11. <script>
  12.     // 第一步：鼠标放上去
  13.     $('.c1').mouseenter(function () {
  14.         $(this).css({backgroundColor: 'yellow'})
  15.     })
  16.     // 第二部：鼠标移走
  17.     $('.c1').mouseout(function () {
  18.         $(this).css({backgroundColor: 'red'})
  19.     })
  20. </script>

键盘按下触发的事件：keydown

  1. $(window).keydown(function (e) {
  2.     console.log(e.keyCode); 	//每个键都有一个keyCode值,通过不同的值来触发不同的事件
  3. })

键盘抬起触发的事件：keyup

  1. $(window).keyup(function (e) {
  2.     console.log(e.keyCode);
  3. })

移除事件：. off

  1. .off( events [, selector ][,function(){}])
  3. 1.events： 事件
  4. 2.selector: 选择器（可选的）
  5. 3.function: 事件处理函数
  8. off() 方法移除用 .on()绑定的事件处理程序。
  9. $("li").off("click")；就可以了

事件冒泡

冒泡的意思就是因为HTML可以嵌套，如果你给儿子标签绑定了事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的往上找点击事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #d1{
  8.             background-color: red;
  9.             height: 200px;
  10.         }
  11.         #d2{
  12.             background-color: green;
  13.             height: 100px;
  14.             width: 100px;
  15.         }
  16.     </style>
  18. </head>
  19. <body>
  21. <div id="d1">
  22.     <div id="d2"></div>
  23. </div>
  25. <script src="jquery.js"></script>
  26. <script>
  27.     $('#d1').click(function () {
  28.         alert('父级标签');
  29.     });
  30.     $('#d2').click(function () {
  31.         alert('子级标签');
  32.     });
  33. </script>
  35. </body>
  36. </html>

阻止事件冒泡

就是为了阻止后续事件发生

1、return false；

  1. $('#d1').click(function () {
  2.     alert('父级标签');
  3. });
  4. $('#d2').click(function () {
  5.     alert('子级标签');
  6.     return false
  7. });

2、e.stopPropagation( );

用事件对象的这个方法就能阻止冒泡 （Propagation：传递的意思）

  1. $('#d1').click(function () {
  2.     alert('父级标签');
  3. });
  4. $('#d2').click(function (e) {	// 这个参数e(只是个形参)表示当前事件本身，这个事件也是一个对象
  5.     alert('子级标签');
  6.     e.stopPropagation();
  7. });

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，给未来将要添加进来的某些子标签自动绑定上事件。

例一：没有事件委托，只有第一个按钮可以触发事件，其他新添加的按钮虽然 class=c1 但是不能触发事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div class="cc">
  10.     <button class="c1">添加按钮</button>
  11. </div>
  13. <script src="jQuery.js"></script>
  14. <script>
  15.     $('.c1').click(function () {
  16.         var btn = document.createElement("button");		// 新建button标签
  17.         btn.innerText = '添加按钮';	
  18.         btn.className = 'c1'		// 给新标签添加class=c1
  19.         $(this).after(btn);			// 把新标签放在自己的后面
  20.     })
  21. </script>
  22. </body>
  23. </html>

列二：设置事件委托，每个新增按钮都可以触发事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div class="cc">
  10.     <button class="c1">添加按钮</button>
  11. </div>
  13. <script src="jQuery.js"></script>
  14. <script>
  15.     
  16.     // 将 'button.c1' 选择器中的标签的点击事件委托给了 $('div.cc')
  17.     $('div.cc').on('click','button.c1',function () {
  18.         var btn = document.createElement("button");
  19.         btn.innerText = '添加按钮';
  20.         btn.className = 'c1'
  21.         $(this).after(btn);
  22.     })
  23. </script>
  24. </body>
  25. </html>

六、补充

页面载入

JS 代码写到head标签和写道 body 标签下面的作用是不同的，写在 head 标签里面的话，如果你写了操作某个标签的内容的话，那个标签还没加载出来，先加载了你的 JS 代码，就找不到这个标签，所以不会生效，所以写在 body 标签最下面是一种解决办法，但还有另外两种方法：

方法一 ：等页面上所有的元素都加载完，在执行这里面的 JS 代码

缺点：如果你自己写了两个 JS 文件，每个 JS 文件中都有一个 window.onload 的话，那么后引入的文件会把前面引入的文件的 window.onload 里面的 JS 代码全部覆盖掉，也会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的 JS 代码，加载比较慢

  1. window.onload=function(){
  2.     // JS的代码
  3. }

方法二（推荐）：不存在覆盖问题，而且只要文档加载完就触发，不需要等着一些图片视频什么的，加载 JS 效果的速度快。

  1. // 写法一：
  2. $(document).ready(function(){
  3. 	// JS的代码
  4. })
  6. // 写法二：简写
  7. $(function(){
  8. 	// JS代码
  9. })

$(document).ready 与 window.onload( ) 的区别

1、window.onload() 函数有覆盖现象，必须等待着图片资源加载完成之后才能调用

2、$(document).ready 的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

动画效果

基本动画

  1. show()	--> $('.c1').show(5000)	// 5秒之后显示这个标签，显示过程有个动画
  2. hide()	--> $('.c1').hide(5000)	// 5秒之后这个标签消失，消失过程有个动画

滑动（拉窗帘一样）

  1. slideDown()		--> $('.c1').slideDown(5000)
  2. slideUp()		--> $('.c1').slideUp(5000)
  3. slideToggle()	--> $('.c1').slideToggle(5000)	// 前两个互相切换

淡入淡出（控制透明度）

  1. fadeIn()		-->$('.c1').fadeIn(5000)
  2. fadeOut()		-->$('.c1').fadeOut(5000)
  3. fadeTo()		-->$('.c1').fadeTo(5000,0.2)	// 0.2是最后显示透明度
  4. fadeToggle()	-->$('.c1').fadeToggle(5000)	// 前两项互相切换

each 循环

$.each (可迭代对象，function (k,v) { 迭代结果操作 } )

function 里面可以接受两个参数，K 是索引，V 是每次循环的具体元素。

  1. 实例一：获取选中的值
  2. <input type="checkbox" value="1">一
  3. <input type="checkbox" value="2">二
  4. <input type="checkbox" value="3">三
  5. <input type="checkbox" value="4">四
  6. <input type="checkbox" value="5">五
  8. $.each($(':checkbox:checked'),function(k,v){
  9.     console.log(k,v.value);
  10. })
  12. // 输出
  13. 0 "2"
  14. 1 "4"
  15. 2 "5"
  17. 实例二：
  18. var li =[10,20,30,40]
  19. $.each(li,function(k, v){  
  20.   console.log(k, v);
  21. })
  23. // 输出
  24. 0 10
  25. 1 20
  26. 2 30
  27. 3 40

.each ( function (k,v) { 迭代结果操作 } )

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

K 是索引，V 是每次循环的具体元素。

  1. // 由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
  2. // 为每一个li标签加class
  3. $("li").each(function(){
  4.   $(this).addClass("c1");
  5. });

注意： jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 -- 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

  1. $("li").addClass("c1");  	// 对所有标签做统一操作

终止 each 循环

在遍历过程中可以使用 return false提前结束each循环。

而直接使用return后面什么都不加，不写false，就是跳过本次循环的意思。

JS 和 jQuery 中的 for 循环也是通过他们两个来跳出当此循环或者终止循环

  1. 实例一：return false
  2. var a = [1,2,3,4,5,6,7,8]
  3. $.each(a, function(k,v){
  4.     if (v > 3){			// 大于3就结束循环
  5.         return false;
  6.     }else{
  7.         console.log(v);
  8.     }
  9. });
  11. // 输出
  12. 1
  13. 2
  14. 3
  16. 实例二：return
  17. var a = [1,2,3,4,5,6,7,8]
  18. $.each(a, function(k,v){
  19.     if (v > 2 && v < 7){	// 在2-7之间的数字就跳过循环
  20.         return false;
  21.     }else{
  22.         console.log(v);
  23.     }
  24. });
  26. // 输出
  27. 1
  28. 2
  29. 7
  30. 8

.data( ) 方法

任意 jQuery 对象都有 data 方法，可以保存任意值，可以用来代替全局变量

.data(key, value)：设置值

描述：在匹配的元素上存储任意相关数据。

  1. $("div").data("age",18);	//给所有div标签都保存一个名为age，值为18

.data(key)：取值，没有的话返回undefined

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

  1. $("div").data("age");		//返回第一个div标签中保存的"age"的值

可以保存标签

  1. $('div.c1').data('a标签',$('a.c2'));
  2. $('.c1').data('a标签').text();	-->百度

.removeData(key)：删除

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

  1. $('.c1').removeData('a标签');		// 移除元素上存放’a标签‘对应的数据

原文链接：http://www.cnblogs.com/XiaoYang-sir/p/14850897.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号