中软Day09
-
JQuery简介
- jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个快速、轻量级、可扩展的JavaScript代码库（或JavaScript框架）。
- 设计宗旨：“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- 核心特性：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
- jq是通过js实现的，不是为了完全替代js
- 生产版本:体积小，执行速度快
- 开发版本:有良好的注释，代码风格好，便于阅读
JS的缺陷： 1.代码冗余 2.需要遍历，很麻烦 3.兼容性问题（最头疼的） 4.添加动画很麻烦 5.事件会被覆盖 JQuery的优点： 1.写更少的代码，做更多的事情,简化代码量 2.js 和 html 分离 3.不需要遍历：具有“隐式迭代”的特点，自动的遍历 4.操作动画简单 5.没有兼容性问题 6.事件不会覆盖 为什么要学习jq 提高工作效率 -
JQuery核心
-
JQuery核心对象
window.jQuery = window.$ = jQuery;- 在window对象中，多了两个属性，叫做jQuery 和 $
- jQuery属性 和 $可以相互替代
// 例如jQuery中存在一个方法叫做each window.jQuery.each() jQuery.each() window.$.each() $.each() -
关于JQuery对象
-
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
-
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:
-
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码：document.getElementById(" test ").innerHTML;
-
使用jQuery获取的元素是jQuery对象，不是DOM对象，不能使用DOM对象方法。
let div = document.getElementById("d"); div.style.color="red"; // 变量名任意，个人习惯，jQuery对象以$开头 let $div = $("#d"); //错误 $div.style.color="red"; //正确 $div.css("color","red");DOM对象可以和JQuery对象相互转换
//DOM --> jquery let $div= $(dom对象); //jquery ---> DOM let div = $div[0]JQuery本身提供，通过.get(index)方法，得到相应的DOM对象
//--->DOM var div = $div.get(0); -
-
-
自定义框架
-
JQuery的入门
-
【JQ中根据ID查找元素】
全都是根据选择器去找的 #ID{} .类名{} $("#ID的名称")
-
-
JQuery的开发步骤
- 导入jq相关文件
- 文档加载函数$(function(){}): 页面初始化之后，绑定事件，动画
- 确定相关操作的事件
- 事件触发函数(回调函数)
- 函数里面去操作相关的元素
-
案例
jq入门
<script type="text/javascript"> //js文档加载完成事件 /*window.onload = function() { alert(11111); } window.onload = function() { alert(22222); }*/ //jq文档加载完成事件 jQuery(document).ready(function() { alert(3333); }); jQuery(document).ready(function() { alert(5555); }); //jQuery 简写成$ $(document).ready(function() { alert(6666); }) //最简单 $(function() { alert(7777); }) //js与jq 页面加载函数会被覆盖，jq函数页面加载函数都会执行 </script>自定义框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> </div> <div id="box1"> </div> <script type="text/javascript"> // function getEl(id) { // return document.getElementById(id); // } // var box = document.getElementById('box'); // var box1 = document.getElementById('box1'); function $(id) { return document.getElementById(id); } var box = $('box'); var box1 = $('box1'); console.log(box); console.log(box1); </script> </body> </html>
-
-
JQuery中的选择器（访问节点）
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。
-
JQuery选择器的优点
-
简洁的写法
${“#id”} 等价于 document.getElementById("id"); ${“tagName”} 等价于 document.getElementsByTagName("tagName"); -
完善的事件处理机制
val()获得第一个匹配元素的当前值。
//若网页中没有id=value的元素,浏览器会报错 document.getElementById("username").value; //需要判断document.getElementById("username")是否存在 if(document.getElementById("username")){ var username=document.getElementById("username"); alert(username.value); }else{ alert("没有该id元素"); } //使用JQUERY处理即使不存在也不会报错 var $username=$("#username"); alert("^^^ "+$username.val()); //注意:在javaScript中函数返回值为空,表示false
-
-
基本选择器
JQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用)。
基本语法：$(选择器)
-
ID选择器 : #ID的名称
- #id用法: $(”#myDiv”); 返回值 单个元素的组成的集合
-
类选择器: 以 . 开头 .类名
- class 用法: $(”.myClass”) 返回值 集合元素
-
元素选择器: 标签的名称
-
通配符选择器: *
- *****用法: $(”*”) 返回值 集合元素
-
并集选择器：选择器1,选择器2
- selector1, selector2, selectorN 用法: $(”div,span,p.myClass”) 返回值 集合元素
-
案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } </style> <!-- 1.导入jq文件 --> <script type="text/javascript" src="jquery-2.1.0.js"></script> <script type="text/javascript"> // 2.文档加载完成事件 $(function() { // var two = $('#two'); // two.onclick = function() {}; //链式编程 $('#btn1').click(function() { $('#two').css('background-color','lightgreen'); }); $('#btn2').click(function() { $('.mini').css('background-color','pink'); }); $('#btn3').click(function() { $('div').css('background-color', 'deeppink'); }); $('#btn4').click(function() { $('*').css('background-color', 'lightgreen'); }); $('#btn5').click(function() { $('.mini,span').css('background-color', 'red'); }); }) </script> </head> <body> <input type="button" value="找出ID为two的元素" id="btn1" /> <input type="button" value="找出mini类的所有元素" id="btn2" /> <input type="button" value="找出所有div元素" id="btn3" /> <input type="button" value="通配符选择器" id="btn4" /> <input type="button" value="找出mini类 和 span元素" id="btn5" /> <br /> <div id="one"> <!-- 0 --> <div class="mini">1-1</div> <!-- 1 --> </div> <div id="two"> <!-- 2 --> <div class="mini">2-1</div> <!-- 3 --> <div class="mini">2-2</div> <!-- 4 --> </div> <div id="three"> <div class="mini">3-1</div> <div class="mini">3-2</div> <div class="mini">3-3</div> </div> <span id="four">span</span> </body> </html>
-
-
层级选择器
-
子元素选择器: 父选择器 > 子选择器
- 用法: $(”form > input”) ; 返回值 集合元素
说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
- 用法: $(”form > input”) ; 返回值 集合元素
-
父选择器：
$().parent() 找某个节点的 父节点
-
后代选择器: 选择器1 儿孙
$("div>a")$("div a")$().find(选择器)在某个元素的后代中查找$().children(选择器)选择器可以不写，默认找所有子元素，否则找满足选择器的子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> <script> $(function(){ // 后代中的h1 let h1s = $("#d").find("h1"); console.log(h1s); // 所有的子元素 h1s= $("#d").children(); console.log(h1s); // 子元素中的h1 h1s= $("#d").children("h1"); console.log(h1s); }) </script> </head> <body> <div id="d"> <h1>aaa</h1> <h1>bbb</h1> <div> <h1>ccc</h1> </div> </div> </body> </html> -
相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
- 用法: $(”label + input”) ; 返回值 集合元素
说明: 匹配所有紧接在 prev 元素后的 next 元素
- 用法: $(”label + input”) ; 返回值 集合元素
-
找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
- 用法: $(”form ~ input”) ; 返回值 集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
- 用法: $(”form ~ input”) ; 返回值 集合元素
-
兄弟节点
方法 作用 $().siblings() 所有兄弟节点 $().next() 下一个兄弟节点 $().prev() 上一个兄弟节点 $().nextAll() 下面的所有兄弟节点 $().prevAll() 上面的所有兄弟节点 $().nextUntil(selector) 介于两个节点之间的所有节点（向下找） $().prevUntil(selector) 介于两个节点之间的所有节点（向上找） -
案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } </style> <!-- 1.导入jq文件 --> <script type="text/javascript" src="jquery-2.1.0.js"></script> <!-- 子元素选择器 选择器1 > 选择器2 后代选择器 选择器1 选择器2 相邻元素 选择器1 + 选择器2 ,找出紧挨的一个弟弟 找到所有弟弟 选择器1~选择器2 找出所有弟弟 --> <!-- 2.文档加载事件 --> <script type="text/javascript"> $(function() { $('#btn1').click(function() { $('body > div').css('background-color', 'deeppink'); }); $('#btn2').click(function() { $('body div').css('background-color', 'skyblue'); }); $('#btn3').click(function() { $('#one+div').css('background-color', 'pink'); }); $('#btn4').click(function() { $('#one~div').css('background-color', 'hotpink'); }) }) </script> </head> <body> <input type="button" value="找到body下的子div" id="btn1" /> <input type="button" value="找出body下的所有div" id="btn2" /> <input type="button" value="找到id为one的相邻div元素" id="btn3" /> <input type="button" value="找到id为two的所有弟弟div" id="btn4" /> <br /> <div id="one"> <!-- 0 --> <div class="mini">1-1</div> <!-- 1 --> </div> <div id="two"> <!-- 2 --> <div class="mini">2-1</div> <!-- 3 --> <div class="mini">2-2</div> <!-- 4 --> </div> <div id="three"> <div class="mini">3-1</div> <div class="mini">3-2</div> <div class="mini">3-3</div> </div> <span id="four">span</span> </body> </html>
-
-
选择器过滤
方法 作用 $().first() 满足选择器的第一个元素 $().last() 满足选择器的最后一个元素 $().eq(n) 满足选择器的第n个元素（从0开始） $(selector1).not(selector2) 满足selector1并且不满足selector2的元素 -
基础过滤选择器
方法 作用 $(“span:first”) 选择第一个span $(“span:last”) 选择最后一个span $(“span:even”) 所有偶数个span，从0开始计数 $(“span:odd”) 所有奇数个span，从0开始计数 $(“input:button”)或者$("":button") 所有的input 并且type是button的元素 $(":checkbox") 所有的 复选框 $(":radio") 所有的 单选按钮 $(":checked") 所有选中的checkbox / radio $(":selected") 所有选中的select>option $(“input:not(selected)”) 没有被选中的input(当input的type=”checkbox”) $(":gt(index)") 匹配所有大于给定索引值的元素 用法: $(”tr:gt(0)”) $(":eq(index)") 匹配一个给定索引值的元素 用法: $(”tr:eq(0)”) $(":lt(index)") 匹配所有小于给定索引值的元素 用法: $(”tr:lt(2)”) $(":animated") 匹配所有正在执行动画效果的元素 $(":header") 匹配如 h1, h2, h3之类的标题元素 用法: $(”:header”).css(”background”, “#EEE”) -
案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } </style> <!-- 1.导入jq文件 --> <script type="text/javascript" src="jquery-2.1.0.js"></script> <!-- 2.文档加载事件 --> <script type="text/javascript"> $(function() { $('#btn1').click(function() { $('div:first').css('background-color','pink'); }); $('#btn2').click(function() { $('div:even').css('background-color','deeppink'); }) $('#btn3').click(function() { $('div:odd').css('background-color','hotpink'); }) //gt great than 大于 //lt less than 小于 //eq equlas 等于 $('#btn4').click(function() { $('div:eq(2)').css('background-color', 'lightblue'); }) }) </script> </head> <body> <input type="button" value="过滤出所有div中第一个元素" id="btn1" /> <input type="button" value="过滤出所有div中偶数位的div" id="btn2" /> <input type="button" value="过滤出所有div中奇数位的div" id="btn3" /> <input type="button" value="过滤出所有div中找出索引大于2" id="btn4" /> <br /> <div id="one"> <!-- 0 --> <div class="mini">1-1</div> <!-- 1 --> </div> <div id="two"> <!-- 2 --> <div class="mini">2-1</div> <!-- 3 --> <div class="mini">2-2</div> <!-- 4 --> </div> <div id="three"> <div class="mini">3-1</div> <div class="mini">3-2</div> <div class="mini">3-3</div> </div> <span id="four">span</span> </body> </html>
-
-
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
- :contains(text) 用法: $(”div:contains(’John’)”) 返回值 集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是dom标签元素时,它就派上了用场了,它的作用是查找被标签”围”起来的文本内容是否符合指定的内容的. - :empty 用法: $(”td:empty”) 返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素 - :has(selector)
用法: $(”div:has§”).addClass(”test”) 返回值 集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使用的例子就完全清楚了:给所有包含p元素的div标签加上class=”test”. - :parent 用法: $(”td:parent”) 返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.
- :contains(text) 用法: $(”div:contains(’John’)”) 返回值 集合元素
-
可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
- :hidden 用法: $(”tr:hidden”) 返回值 集合元素
说明: 匹配所有的不可见元素，input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.同样,要在脑海中彻底分清楚冒号”:”, 点号”.”和逗号”,”的区别. - :visible 用法: $(”tr:visible”) 返回值 集合元素
说明: 匹配所有的可见元素.
- :hidden 用法: $(”tr:hidden”) 返回值 集合元素
-
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
- [attribute] 用法: $(”div[id]“) ; 返回值 集合元素
说明: 匹配包含给定属性的元素. 例子中是选取了所有带”id”属性的div标签. - [attribute=value] 用法: $(”input[name=‘newsletter’]“).attr(”checked”, true); 返回值 集合元素
说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有 name 属性是 newsletter 的 input 元素 - [attribute!=value] 用法: $(”input[name!=‘newsletter’]“).attr(”checked”, true); 返回值 集合元素
说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场. - [attribute^=value] 用法: $(”input[name^=‘news’]“) 返回值 集合元素
说明: 匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?! - [attribute$=value] 用法:
(
”
i
n
p
u
t
[
n
a
m
e
(”input[name
(”input[name=‘letter’]“) 返回值 集合元素
说明: 匹配给定的属性是以某些值结尾的元素 - [attribute*=value] 用法: $(”input[name*=‘man’]“) 返回值 集合元素
说明: 匹配给定的属性是以包含某些值的元素. - [attributeFilter1][attributeFilter2][attributeFilterN] 用法:
(
”
i
n
p
u
t
[
i
d
]
[
n
a
m
e
(”input[id][name
(”input[id][name=‘man’]“) 返回值 集合元素
说明: 复合属性选择器,需要同时满足多个条件时使用.又是一个组合,这种情况我们实际使用的时候很常用.这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
-
案例
<body> <a href="javasript:void(0)">国庆</a> <a href="javasript:void(0)" title="test">元旦</a> <a href="javasript:void(0)" title="test2">清明</a> <script type="text/javascript" src="jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { //通过属性选择器找到含title的a标签 $('a[href]').css('color', 'red'); //找多个属性 $('a[href][title]').css('color', 'pink'); //属性值确定 $('a[href][title="test2"]').css('color', 'deeppink'); }) </script> </body>
- [attribute] 用法: $(”div[id]“) ; 返回值 集合元素
-
子元素过滤选择器
- :nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 集合元素
说明: 匹配其父元素下的第N个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从0开始,后者是从1开始. - :first-child 用法: $(”ul li:first-child”) 返回值 集合元素
说明: 匹配第一个子元素.’:first’ 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别. - :last-child 用法: $(”ul li:last-child”) 返回值 集合元素
说明: 匹配最后一个子元素.’:last’只匹配一个元素,而此选择符将为每个父元素匹配一个子元素. - : only-child 用法: $(”ul li:only-child”) 返回值 集合元素
说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
- :nth-child(index/even/odd/equation) 用法: $(”ul li:nth-child(2)”) 返回值 集合元素
-
表单对象属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
-
:enabled 用法: $(”input:enabled”) 返回值 集合元素
说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦. -
:disabled 用法: $(”input:disabled”) 返回值 集合元素
说明: 匹配所有不可用元素.与上面的那个是相对应的. -
:checked 用法: $(”input:checked”) 返回值 集合元素
说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).这话说起来有些绕口. -
:selected 用法: $(”select option:selected”) 返回值 集合元素
说明: 匹配所有选中的option元素. -
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { //:表单类型 $(':text').css('backgroundColor','pink'); $('#btn').click(function() { $('select option:selected').css('backgroundColor', 'red'); alert($('select option:selected').size()); }); }) </script> </head> <body> <input type="text"> <select multiple="multiple"> <option>OP1</option> <option>OP2</option> <option>OP3</option> <option>OP4</option> </select> <input type="button" value="点我" id="btn"> </body> </html>
-
-
属性选择器
- 选择器[属性] 单个属性
- 选择器[属性1 ] [属性2 ] 多个属性
- 选择器[] [属性= 属性值] 确定的属性值
-
表单选择器
-
:input 用法: $(”:input”) ; 返回值 集合元素
说明:匹配所有 input, textarea, select 和 button 元素 -
:text 用法: $(”:text”) ; 返回值 集合元素
说明: 匹配所有的单行文本框. -
:password 用法: $(”:password”) ; 返回值 集合元素
说明: 匹配所有密码框. -
:radio 用法: $(”:radio”) ; 返回值 集合元素
说明: 匹配所有单选按钮. -
:checkbox 用法: $(”:checkbox”) ; 返回值 集合元素
说明: 匹配所有复选框 -
:submit 用法: $(”:submit”) ; 返回值 集合元素
说明: 匹配所有提交按钮. -
:image 用法: $(”:image”) 返回值 集合元素
说明: 匹配所有图像域. -
:reset 用法: $(”:reset”) ; 返回值 集合元素
说明: 匹配所有重置按钮. -
:button 用法: $(”:button”) ; 返回值 集合元素
说明: 匹配所有按钮.这个包括直接写的元素button. -
:file 用法: $(”:file”) ; 返回值 集合元素
说明: 匹配所有文件域. -
:hidden 用法: $(”input:hidden”) ; 返回值 集合元素
说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,
-
-
-
JQuery遍历函数
jquery对象本身就是数组对象，通过jquery选择器获得的都是满足该选择器条件的对象的集合体。因此在常常需要对jquery对象进行遍历。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OXfiogPO-1570699257246)(D:\谷梁\中软前端\作业\Day17(jq-2)]\3.gif)
不管哪种遍历方式，遍历的集合中的每一个元素都是JS对象，因此想要使用JQ的方法需要加$()。>
-
原始方法遍历（for循环进行遍历）
for（var i=0 ; i<Jq对象.length ; i++）{ console.log(); } -
JQ对象方法
jquery特有的遍历方式，使用jquery集合对象调用each方法即可遍历。
Jq对象.each（function（index，element）{ alert（index）; //打印索引 alert（element）; //打印集合对象中的每一个元素 }） $(element).css('color','red');在使用的时候必须加选择器环境$() 经验：一般我们很少去用element这个参数，this在这里等同于element -
JQuery的全局方法
与上面jquery的对象方法相似，但此处的each方法不是某个具体jquery对象的，而是jquery的全局对象的each方法，名字和功能虽然相同，但语法不同。
$.each（Jq对象，function（index,element）{ alert(index); //打印索引 alert(element); //打印集合对象中的每一个元素 }） -
综合案例
<body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> <script src="../js/jquery-3.3.1.js"></script> <script> /* 1.js的遍历方式 for(初始化值;循环结束条件;步长) 2.jq的遍历方式 1.jq对象.each(callback回调函数) 1.1jq对象.each(function(索引,元素)) 2.$.each(jq对象，[callback]) 3.for(元素 of 对象) 增强for循环，jq3.0版本才能使用 */ //案例要求： 遍历ul标签，元素弹窗 $(function() { //1.获取所有li标签 var cities = $('#city li'); //后代选择器 //cities jq对象 cities[i] js对象 //js遍历 /*for(var i = 0; i < cities.length; i++) { // alert($(cities[i]).html()); // alert(i + ' ' + cities[i].innerHTML); }*/ //第一种jq遍历 /*cities.each(function(index, element) { //this获取到的是一个js对象 //alert(this.innerHTML); //alert($(this).html()); //alert(index + ' ' + element.innerHTML); if ('上海' === element.innerText) { //break;//因为for循环，所以不能用break和continue return false; // return true 相当于continue // return false 相当于break } alert(this.innerHTML); })*/ //第二种方式 /*$.each(cities,function() { alert(this.innerHTML); })*/ //第三种方式 for (li of cities) { alert(li.innerHTML); } }) </script> </body>
-
JQuery元素遍历
-
查找父元素
语法1：子元素对象.parent():该方法返回子元素的直接父元素的对象
语法2：子元素对象.parents()：该方法返回子元素的所有父元素
语法3：子元素对象.parents(元素)：该方法返回指定的父元素对象
//获取h5标签的父元素div $(function(){ console.log($("h5").parents("div")); });
-
查找子元素
语法1：父元素对象.children() :该方法返回父元素对象的所有直接子元素
语法2：父元素对象.children(元素) :该方法返回父元素对象的指定直接子元素
语法3：父元素对象.find(元素)：该方法返回父元素的指定子元素对象
//实例：获取id为ff的元素下的id为school的元素对象 $(function(){ console.log($("#ff").find("#school")); });
-
过滤指定元素
语法：元素对象集合.eq(index)：该方法返回元素集合中的指定下标的元素对象，index从0开始，类似于Java数组下标
//遍历id为ff的元素下所有input子标签 $(function(){ var ch = $("#ff").find("input"); console.log(ch.length); for (var i=0; i <ch.length; i++) { console.log(ch.eq(i)); } });遍历方法
方法 描述 add() 把元素添加到匹配元素的集合中 addBack() 把之前的元素集添加到当前集合中 andSelf() 在版本 1.8 中被废弃。addBack() 的别名 children() 返回被选元素的所有直接子元素 closest() 返回被选元素的第一个祖先元素 contents() 返回被选元素的所有直接子元素（包含文本和注释节点） each() 为每个匹配元素执行函数 end() 结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态 eq() 返回带有被选元素的指定索引号的元素 filter() 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 find() 返回被选元素的后代元素 first() 返回被选元素的第一个元素 has() 返回拥有一个或多个元素在其内的所有元素 is() 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true last() 返回被选元素的最后一个元素 map() 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象 next() 返回被选元素的后一个同级元素 nextAll() 返回被选元素之后的所有同级元素 nextUntil() 返回介于两个给定参数之间的每个元素之后的所有同级元素 not() 从匹配元素集合中移除元素 offsetParent() 返回第一个定位的父元素 parent() 返回被选元素的直接父元素 parents() 返回被选元素的所有祖先元素 parentsUntil() 返回介于两个给定参数之间的所有祖先元素 prev() 返回被选元素的前一个同级元素 prevAll() 返回被选元素之前的所有同级元素 prevUntil() 返回介于两个给定参数之间的每个元素之前的所有同级元素 siblings() 返回被选元素的所有同级元素(兄弟元素) slice 把匹配元素集合缩减为指定范围的子集 -
综合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> <script> $(function () { // 获取所有的span // 控制台输出每个span的itany属性的值 jquery对象.attr("itany") let spans = $("span"); // 方式1 // for(let i = 0 ; i < spans.length ; i++) // { // let value = $(spans[i]).attr("itany"); // console.log(value); // } // 方式2 // for(let i = 0 ; i < spans.length ; i++) // { // let value = spans.eq(i).attr("itany"); // console.log(value); // } // 方式3 // spans.each(function(){ // // 对于每个元素，都会执行该方法 // // $(this) 是每次循环的元素的jquery对象 // console.log($(this).attr("itany")); // $(this).css("color","red"); // }); // 注意，如果对于Jquery对象数组中的所有元素进行相同的操作，可以不用遍历 $("span").css("color","green"); }) </script> </head> <body> <span itany="11">1</span> <label for="">a</label> <span itany="22">2</span> <h1>b</h1> <span itany="33">3</span> <span itany="44">5</span> <div>c</div> </body> </html>
-
-
JQ与JS之间的转换
-
定义：
- DOM对象：用js获取的元素就是DOM对象（js对象）
- JQ对象：使用jq获取的元素就是jq对象
-
联系：jq对象是js对象的一个集合，里面存放着带大量的js对象，是伪数组(具有length属性)
-
区别：js对象不能调用jq的方法，反之亦然
-
JQ对象，只能调用jq的属性和方法
- jq转js
- jq对象[0]
- jq转js
-
JS对象，只能调用js的属性和方法
- js转jq
- $(js对象)
- js转jq
-
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { //给按钮绑定事件 $('#btn').click(function() { //$('#div1').html('修改内容'); //$('#div1').innerHTML = '1111'; //将jq转换成js // var jsDiv = $('#div1')[0]; // jsDiv.innerHTML = '111'; //将js转换成jq var div = document.getElementById('div1'); // div.html('111'); var $div = $(div); $div.html('222'); }) }); </script> </head> <body> <div id="div1"> 明天放假啦！！！ </div> <input type="button" value="点点" id="btn"> </body> </html>
-
-
访问属性
-
- DOM属性
$().prop("属性名") 取值操作$().prop("属性名","属性值") 赋值操作
- HTML属性
$().attr("属性名")取值操作$().attr("属性名","属性值")赋值操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> <script> function select(flag) { $(":checkbox").prop("checked",flag); } </script> </head> <body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <button onclick="select(true)">全选</button> <button onclick="select(false)">全不选</button> </body> </html> - DOM属性
-
访问样式
-
访问class
- 作为普通属性访问
- 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
addClass("样式名")添加样式removeClass("样式名")删除样式removeClass()删除所有样式toggleClass()(“样式名”) 有则删除，没有则添加hasClass()判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ width: 80%; margin:auto; padding:20px; } .header{ width: 100%; height: 40px; border:1px solid black; } .container{ width: 100%; height: 440px; border:1px solid black; } .header i{ border:1px solid black; border-radius:50%; float: right; font-size:20px; margin-top: 10px; vertical-align:center; } .hide{ display:none; } </style> <link rel="stylesheet" href="iconfont/iconfont.css"> <script src="js/jquery-3.3.1.js"></script> <script> function doChange() { $(".container").toggleClass("hide"); $("i").toggleClass('icon-down'); } </script> </head> <body> <div class="content"> <div class="header"> <i class="iconfont icon-up" onclick="doChange()"></i> </div> <div class="container"> content.............. </div> </div> </body> </html> -
访问css
- $().css(“样式名”) 取值操作 ( 原始css样式 background-color )
- $().css(“样式名”,“样式值”) 赋值操作
- $().css({}) 一次性修改多个css样式 参数是json对象，对象属性名是css属性名，对象值是css属性值
- $().width() 、 $().height() 无参取值，有参赋值
-
-
访问内容
-
$().html()无参取值，有参赋值，注意：取值取标签，赋值解析标签 -
$().text()无参取值，有参赋值，注意：取值不取标签，赋值不解析标签 -
$().val()无参取值，有参赋值，相当于表单组件的value<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> <script> function doChange() { let val = $("#source").val(); $("#target").text( val ); let arr = ["red","green","blue"]; let color = arr[parseInt(val.length / 5)]; if(color) { $("#target").css("color", arr[parseInt(val.length / 5)] ) } } </script> </head> <body> <input type="text" id="source" onkeyup="doChange()"> <h1 id="target">暂无内容</h1> </body> </html>
-
-
-
事件绑定
-
约定
事件名指的是：原始JavaScript事件，去掉on。
-
Jquery的标准事件绑定方式
jq对象.事件方法(回调函数)
-
当回调函数为空的时候，会触发浏览器默认行为
focus() submit()提交表单 -
案例
<body> <input id="name" type="text" value="绑定点击事件"> <script src="../js/jquery-3.3.1.js"></script> <script> //1.获取name对象，绑定click事件 $(function() { /*$('#name').click(function() { alert('被点击了'); })*/ //给name绑定鼠标移入移出事件 /*$('#name').mouseover(function() { alert('鼠标移入'); }); $('#name').mouseout(function() { alert('鼠标移出'); })*/ //链式编程 /*$('#name').mouseover(function() { alert('鼠标移入'); }).mouseout(function() { alert('鼠标移出'); });*/ $('#name').focus(function() { console.log(1); }); }) </script> </body>
-
-
Jquery动态事件绑定
-
$().事件名(事件处理函数)
$("#d").click(function(){})
-
$().on(“事件名”,事件处理函数) $("#d").on(“click”,function(){})
-
$().bind(“事件名”,事件处理函数) $("#d").bind(“click”,function(){})
-
-
解除事件绑定
$().unbind(“事件名”)-
on绑定事件/off解除绑定
- jq对象.on(‘事件名称’, 回调函数)
- jq对象.off(‘事件名称’) 当不写参数的时候，解除所有事件
-
案例
<body> <input id="btn" type="button" value="使用on绑定点击事件"> <input id="btn2" type="button" value="使用off解绑点击事件"> <script src='../js/jquery-3.3.1.js'></script> <script type="text/javascript"> $(function() { //1.使用on给按钮绑定事件 $('#btn').on('click', function() { alert('点击了'); }); //2.使用off解绑事件 $('#btn2').click(function() { //解除btn的单击事件 //$('#btn').off('click'); //将事件源上的所有事件全部解除 $('#btn').off(); }); }) </script> </body>
-
-
事件切换
jq对象.toggle(fn1, fn2,…) 依次执行(可循环)参数函数
从1.9版本之后，jq不在支持toggle 所以要用migrate(迁移)插件回复此功能-
案例
<body> <input id="btn" type="button" value="事件切换"> <div id="myDiv" style="width:300px;height:300px;background:pink"> 点击按钮变成绿色，再次点击红色 </div> <script src="../js/jquery-3.3.1.js"></script> <script src="../js/jquery-migrate-1.0.0.js"></script> <script> //在jq3.3 toggle弃用 $(function() { //获取按钮，绑定toggle事件 $('#btn').toggle(function() { $('#myDiv').css('backgroundColor', 'green'); }, function() { $('#myDiv').css('backgroundColor', 'red'); }); }) </script> </body>
-
-
使用js触发事件
$().事件名()<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> <script> function doChange() { // $("#mf").submit(); // $("#f").click(); $("#name").focus(); } </script> </head> <body> <form action="http://www.baidu.com" id="mf"></form> <input type="file" id="f"> <input type="text" id="name"/> <button onclick="doChange()">to Baidu</button> </body> </html>
-
-
DOM操作
-
创建jquery对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> <script> // 创建jquery对象 // let $div = $("<div>"); // $div.css({ // "width":"200px", // "height":"200px", // "border":"1px solid black" // }); // $div.html("aaaaaaaaaaaaa"); // console.log($div); let ulStr = ` <ul> <li>111</li> <li>112</li> <li>113</li> <li>114</li> </ul> `; let $ul = $(ulStr); $ul.find("li").eq(2).css("color","red"); console.log($ul); </script> </head> <body> </body> </html> -
添加
<!--原始HTML--> <a> <c></c> </a>-
$(a).append(b)
在匹配元素内部最后面新增一个节点
<a> <c></c> <b></b> </a> -
$(b).appendTo(a)
把新节点追加到匹配元素内部最后面（效果同append,只是书写上前后位置互换）
<a> <c></c> <b></b> </a> -
$(a).prepend(b)
在匹配元素内部最前面新增一个节点
<a> <b></b> <c></c> </a> -
$(b).prependTo(a)
把新节点追加到匹配元素内部最后面（效果同prepend,只是书写上前后位置互换）
<a> <b></b> <c></c> </a> -
$(a).after(b)
在匹配元素同级之后新增一个节点
<a></a> <b></b> -
$(b).insertAfter(a)
把新节点追加到匹配元素内部最后面（效果同after,只是书写上前后位置互换）
<a></a> <b></b> -
$(a).before(b)
在匹配元素同级之前新增一个节点
<b></b> <a></a> -
$(b).insertBefore(a)
把新节点追加到匹配元素内部最后面（效果同before,只是书写上前后位置互换）
<b></b> <a></a>
-
-
删除
- $(a).remove() 删除a以及子标签
- $(a).empty() 删除a的子标签，a不删除
-
替换
$(selector旧).replaceWith(content新) 100%把旧的替换掉，替换为指定的 HTML 或 DOM 元素 replaceAll(): 颠倒了的 replaceWith() 方法. 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失 -
综合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> <script> // let doAdd = ()=> { // // 取用户名 // let name = $("#username").val(); // // 取性别 找到radio选中的 // let sex = $(":radio:checked").val(); // // 取年龄 // let age = $("#age").val(); // // 取简介 // let intro = $("#intro").val(); // // 取爱好 :checked 数组 =》 字符串 // let hobbs = []; // $(":checkbox:checked").each(function(){ // hobbs.push($(this).val()); // }); // let hobby = hobbs.join(","); // // 创建5个td // let td1 = $("<td>"); // td1.html(name); // let td2 = $("<td>"); // td2.html(sex); // let td3 = $("<td>"); // td3.html(age); // let td4 = $("<td>"); // td4.html(intro); // let td5 = $("<td>"); // td5.html(hobby); // // 创建一个a 设置href属性 设置标签内容 绑定点击事件 // let a = $("<a>"); // a.prop("href","#"); // a.html("删除"); // a.click(function(){ // $(this).parent().parent().remove(); // }) // // 创建一个td 将a 放到td中 // let td6 = $("<td>"); // td6.append(a); // // 创建一个tr，将6个td放到tr中 // let tr = $("<tr>"); // tr.append(td1); // tr.append(td2); // tr.append(td3); // tr.append(td4); // tr.append(td5); // tr.append(td6); // // 将tr放到表格中 // $("table").append(tr); // } let doAdd = ()=> { // 取用户名 let name = $("#username").val(); // 取性别 找到radio选中的 let sex = $(":radio:checked").val(); // 取年龄 let age = $("#age").val(); // 取简介 let intro = $("#intro").val(); // 取爱好 :checked 数组 =》 字符串 let hobbs = []; $(":checkbox:checked").each(function(){ hobbs.push($(this).val()); }); let hobby = hobbs.join(","); let tr = ` <tr> <td>${name}</td> <td>${sex}</td> <td>${age}</td> <td>${intro}</td> <td>${hobby}</td> <td> <a href="#" οnclick="doDel(this)">删除</a> </td> </tr> `; $("table").append($(tr)); } let doDel = (item)=> { $(item).parent().parent().remove(); } </script> </head> <body> <table cellspacing="0" cellpadding="5" border="1" width="100%"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>简介</td> <td>爱好</td> <td>操作</td> </tr> <tr> <td>张三</td> <td>女</td> <td>22</td> <td>xxxxxxx</td> <td>吃饭，睡觉</td> <td> <a href="#">删除</a> </td> </tr> </table> <hr> <input type="text" id="username" /> <input name="sex" type="radio" value="男" checked>男 <input name="sex" type="radio" value="女">女 <select id="age"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <textarea name="" id="intro" cols="30" rows="10"></textarea> <input name="hobby" type="checkbox" value="吃饭">吃饭 <input name="hobby" type="checkbox" checked value="睡觉">睡觉 <input name="hobby" type="checkbox" value="写bug">写bug <input type="button" value="添加" onclick="doAdd()"> </body> </html>
-
-
JQuery动画效果
-
三种方式显示和隐藏元素
- 默认显示和隐藏方式
- show([speed,[easing],[fn]])
- speed动画速度，slow，normal，fast(预定义)或毫秒值(1000)
- easing，切换效果，swing(默认值)，先慢，再快，再慢，linear匀速
- fn,回调函数，当动画执行完成后调用吗，每个元素执行1次
- h ide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn])，切换
- show([speed,[easing],[fn]])
- 滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])
- 淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
- 默认显示和隐藏方式
-
综合案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 1.引入jq --> <script src="../js/jquery-3.3.1.js"></script> <script> function hideFn() { //第一种隐藏方式 /*$('#showDiv').hide(2000, 'linear', function() { alert('动画执行完毕'); });*/ //第二种，滑动 // $('#showDiv').slideUp(1000); //第三种,淡入淡出 $('#showDiv').fadeOut(1000); } function showFn() { // $('#showDiv').show(2000); // $('#showDiv').slideDown(1000); $('#showDiv').fadeIn(1000); } function toggleFn() { //$('#showDiv').toggle(1000); //$('#showDiv').slideToggle(1000); $('#showDiv').fadeToggle(1000); } </script> </head> <body> <input type="button" value="点击按钮隐藏div" onclick="hideFn()"> <input type="button" value="点击按钮显示div" onclick="showFn()"> <input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> <div id="showDiv" style="width:300px;height:300px;background:pink"> div显示和隐藏 </div> </body> </html>记住的hide() 和 show()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-3.3.1.js"></script> </script> <style> div{ width: 100px; height: 100px; border:1px solid black; background-color:red; } </style> </head> <body> <div> </div> <button onclick="show()">show()</button> <button onclick="hide()">hide()</button> <button onclick="toggle()">toggle()</button> <button onclick="slideUp()">slideUp()</button> <button onclick="slideDown()">slideDown()</button> <button onclick="slideToggle()">slideToggle()</button> <button onclick="fadeIn()">fadeIn()</button> <button onclick="fadeOut()">fadeOut()</button> <button onclick="fadeToggle()">fadeToggle()</button> <button onclick="doAnimate()">animate()</button> <script> let div = $("div"); let show = ()=>{ div.show(3000); } let hide = ()=>{ div.hide(3000); } let toggle = ()=>{ div.toggle(3000); } let slideUp = ()=>{ div.slideUp(3000); } let slideDown = ()=>{ div.slideDown(3000); } let slideToggle = ()=>{ div.slideToggle(3000); } let fadeIn = ()=>{ div.fadeIn(3000); } let fadeOut = ()=>{ div.fadeOut(3000); } let fadeToggle = ()=>{ div.fadeToggle(3000); } let doAnimate = () => { div.animate({ "borderRadius" : "50%", "width":"200px", "height":"200px", // "backgroundColor":"green" "opacity":'0.5' }, 3000); } </script> </body> </html>
-
-
综合案例
-
抽奖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery案例之抽奖</title> <script src='../js/jquery-3.3.1.js'></script> <script> /*分析: 1.给开始按钮绑定单击事件 1.1 定义一个循环定时器 1.2 切换小相框的src * 定义一个数组，存放图像资源路径 * 生成随机数 数组的索引 2.给结束按钮绑定事件 2.1停止定时器 2.2给大相框设置src属性*/ var imgs = ['../img/1.jpg', '../img/2.jpg', '../img/3.jpg', '../img/4.jpg', '../img/5.jpg', '../img/6.jpg', '../img/7.jpg', '../img/8.jpg', '../img/9.jpg', '../img/10.jpg', ]; var startId, index; $(function() { //处理按钮是否可以使用 $('#startID').prop('disabled', false); $('#stopID').prop('disabled', true); $('#startID').click(function() { //0.处理按钮是否可以使用 $('#startID').prop('disabled', true); $('#stopID').prop('disabled', false); //1.循环定时器 startId = setInterval(function() { //2.随机生成索引 index = Math.floor(Math.random() * 10); //3.设置小相框的src $('#img1ID').prop('src', imgs[index]); },20); }) $('#stopID').click(function() { //0.处理按钮是否可以使用 $('#startID').prop('disabled', false); $('#stopID').prop('disabled', true); //1.停止定时器 clearInterval(startId); //2.给大相框设置src值 $('#img2ID').prop('src', imgs[index]).hide(); //3.显示 $('#img2ID').show(1000); }) }) </script> </head> <body> <!-- 小像框 --> <div style="border-style:dotted;width:160px;height:100px"> <img id="img1ID" src="../img/1.jpg" style="width:160px;height:100px"/> </div> <!-- 大像框 --> <div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"> <img id="img2ID" src="../img/1.jpg" width="800px" height="500px"/> </div> <!-- 开始按钮 --> <input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px" > <!-- 停止按钮 --> <input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px" > </body> </html> -
显示和隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 400px; } img{ width:90px ; height:90px; vertical-align: top; } </style> <script src="jquery-1.12.2.js"></script> <script> $(function () { $("#btn1").click(function () { //获取div,最后一个图片,隐藏 $("div>img").last("img").hide(800,function () { $(this).prev().hide(800,arguments.callee); }); }); //显示 $("#btn2").click(function () { $("div>img").first("img").show(800,function () { $(this).next().show(800,arguments.callee); }); }); }); </script> </head> <body> <input type="button" value="隐藏动画" id="btn1"/> <input type="button" value="显示动画" id="btn2"/> <div> <img src="images/1.jpg"/> <img src="images/2.jpg"/> <img src="images/3.jpg"/> <img src="images/4.jpg"/> </div> </body> </html> -
jq方法全选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对象进行方法扩展</title> <!-- $('#btn').demo1() --> <script src="../js/jquery-3.3.1.js"></script> <script> //使用jq插件,给jq对象添加两个方法,check()选中所有复选框,uncheck()取消选中 //1.定义jq对象插件 $.fn.extend({ check:function() { //选中复选框 this 调用该方法的jq对象 this.prop('checked', true); }, uncheck:function() { //取消选中复选框 this.prop('checked', false); } }); $(function() { //获取按钮 $('#btn-check').click(function() { //获取所有复选框对象 $('input[type="checkbox"]').check(); }); //复选框对象调用方法 $('#btn-uncheck').click(function() { //获取所有复选框对象 $('input[type="checkbox"]').uncheck(); }); }) </script> </head> <body> <input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()"> <input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()"> <br/> <input type="checkbox" value="football">足球 <input type="checkbox" value="basketball">篮球 <input type="checkbox" value="volleyball">排球 </body> </html> -
jq方法比较大小
<script src="../js/jquery-3.3.1.js"></script> <script> //对全局方法进行扩展,max求两个值的最大值, min求两个值的最小值 //1.定义插件 //$.fn.extend $.extend({ max:function(a, b) { return a >= b ? a : b; }, min:function(a, b) { return a <= b ? a : b; } }) var max = $.max(4, 5); //alert(max); var min = $.min(4, 5); alert(min); </script>
-
-
错误
-
关于赋值操作
任何jQuery 元素对象的赋值操作，基本上都是通过方法的第二个参数赋值，不会出现=
// 错误代码 $().css() = "20px"; -
$ is not defined错误- jquery 的js文件没有导入
- jquery 的js文件路径错误
- jquery 的js文件导入位置错误
-
-
插件
增强JQuery的功能
-
实现方式：
- $.fn.extend(对象)
增强jq对象的功能 $(’#id’).新功能(); - $.extend(对象)
$.新功能();
- $.fn.extend(对象)
-
fullpage全屏插件
鼠标滚轮事件，绑定页面宽高。
fullpage.js是一个基于jQuery的插件，可用于制作全屏网站，效果简单，但兼容性较差。、
github 官网 https://github.com/alvarotrigo/fullPage.js
-
功能
- 支持鼠标滚动
- 支持前进后退和键盘控制
- 多个回调函数
- 支持手机、平板触摸事件
- 支持 CSS3 动画
- 支持窗口缩放
- 窗口缩放时自动调整
- 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式
-
使用方法
- 引入相关文件
- 写html骨架
- 写自定义js内容，调用fullpage方法
-
JavaScript入口函数
$(function(){ $('#fullpage').fullpage()({ //fullpage 方法里面接受json对象形式 navigation: true, //是否显示项目导航 loopBottom: true, //滚动到最底部后是否滚回顶部 scrollingSpeed: 1200, //滚动速度，单位为毫秒 }); }); -
fullpage详细参数
选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 sectionColor 函数 设置背景颜色 anchors 数组 定义锚链接 scrollingSpeed 整数 700 滚动速度，单位为毫秒 easing 字符串 easeInQuart 滚动动画方式 menu 布尔值 false 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动 navigation 布尔值 false 是否显示项目导航 navigationPosition 字符串 right 项目导航的位置，可选 left 或 right navigationTooltips 数组 项目导航的 tip slidesNavigation 布尔值 false 是否显示左右滑块的项目导航 slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置，可选 top 或 bottom controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色 loopBottom 布尔值 false 滚动到最底部后是否滚回顶部 loopTop 布尔值 false 滚动到最顶部后是否滚底部 loopHorizontal 布尔值 true 左右滑块是否循环滑动 autoScrolling 布尔值 true 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条 scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条 css3 布尔值 false 是否使用 CSS3 transforms 滚动 paddingTop 字符串 0 与顶部的距离 paddingBottom 字符串 0 与底部距离 fixedElements 字符串 normalScrollElements keyboardScrolling 布尔值 true 是否使用键盘方向键导航 touchSensitivity 整数 5 continuousVertical 布尔值 false 是否循环滚动，与 loopTop 及 loopBottom 不兼容 animateAnchor 布尔值 true normalScrollElementTouchThreshold 整数 5 -
fullPage.js 方法
$.fn.fullpage.moveTo(1);名称 说明 moveSectionUp() 向上滚动 moveSectionDown() 向下滚动 moveTo(section, slide) 滚动到 moveSlideRight() slide 向右滚动 moveSlideLeft() slide 向左滚动 setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动 setAllowScrolling() 添加或删除鼠标滚轮/触控板控制 setKeyboardScrolling() 添加或删除键盘方向键控制 setScrollingSpeed() 定义以毫秒为单位的滚动速度 -
回调函数
名称 说明 afterLoad 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算 onLeave 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数 afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数 onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数 -
使用案例
$('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function(anchorLink, index){ var loadedSection = $(this); if(index == 3){ alert("Section 3 ended loading"); } if(anchorLink == 'secondSlide'){ alert("Section 2 ended loading"); } } });
-
-
-
easing.js插件
easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}$(element).animate({ height:500, width:600 },{ easing: 'easeInOutQuad', duration: 500, complete: function(){} });
-
3229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
