谷歌seo网站运营/陕西省人民政府
1. jQuery介绍与基本使用
文档：https://jquery.cuishifeng.cn/index.html
jQuery简介
- jQuery由美国人John Resig于2006年创建
- jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
- 它的设计思想是write less,do more
初识jQuery：
实现隔行变色效果，只需一句关键代码
- $("tr:even").css("background-color","#ccc");
jQuery能做什么：
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
注意：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
jQuery的优势：
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
获取jQuery：
进入jQuery官网：http://jquery.com
jQuery库文件：
- jQuery库分开发版和发布版
- 在页面中引入jQuery
- <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
jQuery基本语法：
使用jQuery弹出提示框
$(document).ready()
- $(document).ready()与window.onload类似，但也有区别
DOM对象和jQuery对象
- DOM对象：直接使用JavaScript获取的节点对象
var objDOM=document.getElementById("title"); var objHTML=objDOM.innerHTML;
- jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$("#title").html( ); 等同于 document.getElementById("title").innerHTML;注意：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
jQuery语法结构
语法：$(selector).action() ;
- 工厂函数$()：将DOM对象转化为jQuery对象
- 选择器 selector：获取需要操作的DOM 元素
- 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
示例：$("#current").addClass("current");
jQuery代码风格
- “$”等同于“ jQuery ”
$(document).ready()=jQuery(document).ready() $(function(){...})=jQuery (function(){...})
- 操作连缀书写
$("h2").css("background-color","#CCFFFF").next().css("display","block");
常用语法举例
DOM对象转jQuery对象
- 使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName"); //DOM对象var $txtName =$(txtName); //jQuery对象注意：
- jQuery对象命名一般约定以$开头
- 在事件中经常使用$(this)，this是触发该事件的对象
jQuery对象转DOM对象
- jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
var $txtName =$ ("#txtName"); //jQuery对象var txtName =$txtName[0]; //DOM对象
- 通过get(index)方法得到相应的DOM对象
var $txtName =$("#txtName"); //jQuery对象var txtName =$txtName.get(0); //DOM对象
总结：
- jQuery的基本语法结构是
$(selector).action() ;- 常用选择器
- ID选择器
- 标签选择器
- 类选择器
- 设置样式的方法
- css()
- addClass()
- DOM对象和jQuery对象可以相互转化
代码：
<script src="./jquery-3.5.0.min.js"></script><script>//jQuery的简洁入口$(function(){$("h1").css("color","green");//获取id属性值为bid的按钮并绑定点击事件。$("#bid").click(function(){alert("ok");});});/*//jQuery的标准入口$(document).ready(function(){//获取h1标签，并设置css样式$("h1").css("color","blue");});/*//当前页面加载完成后执行window.onload = function(){//使用jquery编写js程序//获取h1标签，并设置css样式$("h1").css("color","red");//获取id属性值为bid的按钮并绑定点击事件。$("#bid").click(function(){alert("ok");});}*/</script>
</head>
<body><h1>jQuery实例--基本使用</h1><button id="bid">点击我</button>
</body>
2、jQuery选择器
文档：https://css.cuishifeng.cn/
- jQuery选择器类似于CSS选择器，用来选取网页中的元素
$("h3").css("background","#09F");
- 获取并设置网页中所有<h3>元素的背景
- “h3”为选择器语法，必须放在$()中
- $(“h3”)返回jQuery对象
- .css()是为jQuery对象设置样式的方法
jQuery选择器分类
- jQuery选择器功能强大，种类也很多，分类如下：
- 类CSS选择器
- 基本选择器
- 层次选择器
- 属性选择器
- 过滤选择器
- 基本过滤选择器
- 可见性过滤选择器
2.1 基本选择器
- 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
名称
语法构成
描述
示例
标签选择器
element
根据给定的标签名匹配元素
$("h2" )选取所有h2元素
类选择器
.class
根据给定的class匹配元素
$(" .title")选取所有class为title的元素
ID选择器
#id
根据给定的id匹配元素
$(" #title")选取id为title的元素
并集选择器
selector1,selector2,...,selectorN
将每一个选择器匹配的元素合并后一起返回
$("div,p,.title" )选取所有div、p和拥有class为title的元素
交集选择器
element.class或element#id
匹配指定class或id的某元素或元素集合
$("h2.title")选取所有拥有class为title的h2元素
全局选择器
*
匹配所有元素
$("*" )选取所有元素
标签选择器
- 标签选择器根据给定的标签名匹配元素
类选择器
- 类选择器根据给定的class匹配元素
ID选择器
- ID选择器根据给定的id匹配元素
并集选择器
- 并集选择器用来合并元素集合
交集选择器
- 交集选择器可以对元素集合根据class或id再筛选
全局选择器
- 全局选择器可以获取所有元素
<body><h1 id="hid">jQuery实例--基本选择器</h1><ul><li>aaa</li><li class="cc">bbb</li><li>ccc</li></ul><h2>aaaaaaaaaa</h2><ol><li class="cc">dddd</li><li>eeee</li></ol><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){// document.getElementById("hid"); //获取id值为hid元素节点//等价于上面语句,获取id值为hid元素节点，并设置css样式$("#hid").css("color","blue");//document.getElementsByTagName("li"); //获取网页中所有li元素节点//获取网页中所有li元素节点，并设置css样式//$("li").css("color","red");//获取class属性值为cc所有元素节点，并设置css样式$(".cc").css("color","red");//选择器组，统一设置指定css样式$("h1,h2,h3,h4,h5,h6").css("background-color","#ddd");});</script>
</body>2.2 层次选择器
- 层次选择器通过DOM 元素之间的层次关系来获取元素
| 名称 | 语法构成 | 描述 | 示例 |
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu下的<span>元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素<span> |
| 相邻元素 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
| 同辈元素 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<d> |
后代选择器
- 后代选择器用来获取元素的后代元素
子选择器
- 子选择器用来获取元素的子元素
相邻选择器
- 相邻选择器用来选取紧邻目标元素的下一个元素
同辈选择器
- 同辈选择器用来选取目标元素之后的所有同辈元素
<body><h1 id="hid">jQuery实例--层级选择器</h1><ul><li>aaaaaa</li><li>bbbbbb</li><li>cccccc</li><ol><li>ddddd</li><li>ddddd</li><li>ddddd</li></ol></ul><li>ccccc</li><li>ddddd</li><li>eeeee</li><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取ul中所有子元素节点li（包括后代节点），并设置样式$("ul li").css("color","red"); //获取ul中所有直接子元素节点li（包括后代节点），并设置样式$("ul>li").css("color","red");//获取ul同级紧邻后面的第一个兄弟节点li，并设置样式$("ul+li").css("color","red");//获取ul后面所有同级兄弟li元素节点，并设置样式$("ul~li").css("color","red");});</script>
</body>2.3 基本筛选器（基本过滤选择器）
- 过滤选择器通过特定的过滤规则来筛选元素
- 语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素
- 主要分类如下：
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器
- 内容过滤选择器、子元素过滤选择器……
- 基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元
名称
语法构成
描述
示例
基本过滤选择器
:first
选取第一个元素
$(" li:first" )选取所有<li>元素中的第一个<li>元素
:last
选取最后一个元素
$(" li:last" )选取所有<li>元素中的最后一个<li>元素
:even
选取索引是偶数的所有元素
（index从0开始）$(" li:even" )选取索引是偶数的所有<li>元素
:odd
选取索引是奇数的所有元素
（index从0开始）$(" li:odd" )选取索引是奇数的所有<li>元素
- 基本过滤选择器可以根据索引的值选取元素
名称
语法构成
描述
示例
基本过滤选择器
:eq(index)
选取索引等于index的元素
（index从0开始）$("li:eq(1)" )选取索引等于1的<li>元素
:gt(index)
选取索引大于index的元素
（index从0开始）$(" li:gt(1)" )选取索引大于1的<li>元素
（注：大于1，不包括1）:lt(index)
选取索引小于index的元素
（index从0开始）$(“li:lt(1)” )选取索引小于1的<li>元素
（注：小于1，不包括1）
- 基本过滤选择器还支持一些特殊的选择方式
名称
语法构成
描述
示例
基本过滤选择器
:not(selector)
选取去除所有与给定选择器匹配的元素
$(" li:not(.three)" )选取class不是three的元素
:header
选取所有标题元素，如h1~h6
$(":header" )选取网页中所有标题元素
:focus
选取当前获取焦点的元素
$(":focus" )选取当前获取焦点的元素
<body><h1 id="hid">jQuery实例--基本筛选器</h1><ul><li>aaaaaa</li><li class="cc">bbbbbb</li><li>cccccc</li><li class="cc">ddddd</li><li>eeeee</li><li>ffffff</li></ul><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取所有li节点并设置样式$("li").css("color","red");//获取第一个li节点并设置样式$("li:first").css("color","red");//获取最后一个li节点并设置样式$("li:last").css("color","red");//获取偶数索引号对应的所有li节点并设置样式$("li:even").css("color","red");//获取奇数索引号对应的所有li节点并设置样式$("li:odd").css("color","red");//获取class属性值为cc的所有li节点并设置样式$("li.cc").css("color","red");//获取class属性值不为cc的所有li节点并设置样式$("li:not(.cc)").css("color","red");//获取索引位置为2的li节点并设置样式$("li:eq(2)").css("color","red");//获取前2个li节点并设置样式$("li:lt(2)").css("color","red");//获取所有li节点并添加鼠标移入和移出事件$("li").mouseover(function(){$(this).animate({paddingLeft:"+=20"},800);}).mouseout(function(){$(this).animate({paddingLeft:"-=20"},500);});});</script>
</body>
2.4 内容选择器和可见选择器
- 内容选择器根据要求选择内容符合的元素
| 名称 | 语法构成 | 描述 | 示例 |
| 内容选择器 | :contains(text) | 匹配包含给定文本的元素 | $("td:empty")查找所有包含 "John" 的 div 元素 |
| :empty | 匹配所有不包含子元素或者文本的空元素 | $(" li:last" )查找所有不包含子元素或者文本的空元素 | |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 | $("div:has(p)").addClass("test");给所有包含 p 元素的 div 元素添加一个 text 类 | |
| :parent | 匹配含有子元素或者文本的元素 | $("td:parent")查找所有含有子元素或者文本的 td 元素 |
- 可见性过滤选择器可以通过元素显示状态来选取元素
| 名称 | 语法构成 | 描述 | 示例 |
| 可见选择器 | :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
| :hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
<body><h1 id="hid">jQuery实例--内容选择器</h1><div>John Resig</div><div>George Martin</div><div>Malcom John Sinclair</div><div>J. Ohn</div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){$("div:contains('John')").css("color","red");});</script>
</body>
2.5 属性选择器
- 属性选择器通过HTML元素的属性来选择元素
名称
语法构成
描述
示例
属性选择器
[attribute]
选取包含给定属性的元素
$(" [href]" )
选取含有href属性的元素
[attribute=value]
选取等于给定属性是某个特定值的元素
$(" [href ='#']" )
选取href属性值为“#”的元素
[attribute !=value]
选取不等于给定属性是某个特定值的元素
$(" [href !='#']" )
选取href属性值不为“#”的元素
1
属性选择器
[attribute^=value]
选取给定属性是以某些特定值开始的元素
$(" [href^='en']" )
选取href属性值以en开头的元素
[attribute$=value]
选取给定属性是以某些特定值结尾的元素
$(" [href$='.jpg']" )
选取href属性值以.jpg结尾的元素
[attribute*=value]
选取给定属性是以包含某些值的元素
$(" [href* ='txt']" )
选取href属性值中含有txt的元素
[selector] [selector2] [selectorN]
选取满足多个条件的复合属性的元素
$("li[id][title=新闻要点]" )
选取含有id属性和title属性为新闻要点的<li>元素
<body><h1 id="hid">jQuery实例--属性选择器</h1><form>姓名：<input type="text" name="uname" value="zhangsan"/><br/><br/>年龄：<input type="text" name="age"/><br/><br/>邮箱：<input type="text" name="email"/><br/><br/>电话：<input type="text" name="phone"/><br/><br/>地址：<input type="text" name="address"/><br/><br/></form><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取所有含有value属性的input元素标签，并设置样式//$("input[value]").css("border","1px solid red");//获取name属性值为phone的input元素标签，并设置样式//$("input[name='phone']").css("border","1px solid red");//获取name属性值不为phone的input元素标签，并设置样式//$("input[name!='phone']").css("border","1px solid red");//获取name属性值是以a字符开头的所有input元素标签，并设置样式//$("input[name^='a']").css("border","1px solid red");//获取name属性值是以e字符结尾的所有input元素标签，并设置样式//$("input[name$='e']").css("border","1px solid red");//获取name属性值中含有m字符的所有input元素标签，并设置样式$("input[name*='m']").css("border","1px solid red");});</script>
</body>2.6 子元素选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 子元素选择器 | :first-child | 匹配所给选择器( :之前的选择器)的第一个子元素 | $("ul li:first-child")在每个 ul 中查找第一个 li |
| :last-child | 匹配最后一个子元素 | $("ul li:last-child")在每个 ul 中查找最后一个 li | |
| :nth-child | 匹配其父元素下的第N个子或奇偶元素(index从1开始) | $("ul li:nth-child(2)")在每个 ul 查找第 2 个li | |
| … |
<body><h1 id="hid">jQuery实例--子元素选择器</h1><ul><li>aaaaaaa</li><li>bbbbbbb</li><li>ccccccc</li><li>ddddddd</li><li>eeeeeee</li></ul><ul><li>1111111</li><li>2222222</li><li>3333333</li><li>4444444</li><li>5555555</li></ul><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取每组ul中的第一个li节点并添加样式//$("ul li:first-child").css("color","red");//获取每组ul中的最后一个li节点并添加样式//$("ul li:last-child").css("color","red");//获取每组ul中的第三个li节点并添加样式$("ul li:nth-child(3)").css("color","red");});</script>
</body>2.7 表单选择器
获取对应的type:
语法
描述
示例
:input
匹配所有input、textarea、select和button 元素
$("#myform :input")
选取表单中所有的input、select和button元素
:text
匹配所有单行文本框
$("#myform :text")
选取email 和姓名两个input 元素
:password
匹配所有密码框
$("#myform :password" )
选取所有<input type="password" />元素
:radio
匹配所有单项按钮
$("#myform :radio")
选取<input type="radio" />元素
:checkbox
匹配所有复选框
$(" #myform :checkbox " )选取
<input type="checkbox " />元素
:submit
匹配所有提交按钮
$("#myform :submit " )选取
<input type="submit " />元素
名称 语法构成 描述 示例 表单对
象属性
:enabled 匹配所有可用元素 $("input:enabled")查找所有可用的input元素 :disabled 匹配所有不可用元素 $("input:disabled")查找所有不可用的input元素 :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，
对于select元素来说，获取选中推荐使用 :selected
$("input:checked")查找所有选中的复选框元素 :selected 匹配所有选中的option元素 $("select option:selected")查找所有选中的选项元素
<body><h1 id="hid">jQuery实例--表单中选择器</h1><ul><li><input type="checkbox" name="likes[]" value="1"/> aaaaaaa</li><li><input type="checkbox" name="likes[]" value="2"/> bbbbbbb</li><li><input type="checkbox" name="likes[]" value="3"/> ccccccc</li><li><input type="checkbox" name="likes[]" value="4"/> ddddddd</li><li><input type="checkbox" name="likes[]" value="5"/> eeeeeee</li></ul><button onclick="doFun()">获取</button><script src="./jquery-3.5.0.min.js"></script><script>function doFun(){//获取所有多选框中选择中的元素节点//var list = $("input[type='checkbox']:checked");var list = $(":checkbox:checked");alert(list.length);//获取li元素节点（条件是里面的多选框必须选中），并设置样式$("li:has(input:checked)").css("color","red");}</script>
</body>注意：
特殊符号的转义
- 选择器中的特殊符号需要转义，在如下html代码中
<div id="id#a">aa</div><div id="id[2]">cc</div>
- 获取这两个元素的选择器：
选择器中的空格
- }选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果
3、 jQuery属性
3.1 属性操作
获取与设置节点属性
- attr() 和 prop()用来获取与设置元素属性
- prop()不可以添加不能存在的属性，只支持且相对attr()更适合HTML DOM的属性操作
- removeAttr()用来删除元素的属性
<body><h1 id="hid">jQuery实例--jQuery属性操作</h1><a id="aid" href="http://www.baidu.com" title="百度链接">百度</a><br/><br/><button onclick="dofun()">更改链接属性</button><script src="./jquery-3.5.0.min.js"></script><script>function dofun(){var a = $("#aid");console.log(a.attr("href")); //获取console.log(a.prop("href")); //获取console.log(a.attr("title"));console.log(a.prop("title"));a.attr("href","http://news.baidu.com"); //添加或更改a.removeAttr("title"); //删除属性//a.attr("aa","bb"); //添加属性// a.prop("aa","bb"); //添加属性 prop方法不可以添加不能存在的属性a.prop("title","百度新闻"); //只支持HTML DOM的属性操作}</script>
</body>3.2 CSS类操作
追加和移除样式
- 追加样式：
- addClass(class)或addClass(class1 class2 … classN)
- 移除样式
- removeClass(“style2 ”)或removeClass("style1 style2 ")
切换样式
- toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
- toggleClass(class)
<script>//jquery入口$(function(){//获取上面所有的li节点并添加点击事件$("ul.uu li").click(function(){//切换class类属性$(this).toggleClass("active");/*//判断当前节点li是否含有active class属性if($(this).hasClass('active')){//删除class类属性$(this).removeClass("active");}else{//添加class类属性$(this).addClass("active");}*/});});</script>3.3 html文本与值操作
HTML代码操作html()
- html()可以对HTML代码进行操作，类似于JS中的innerHTML
文本操作text()
- text()可以获取或设置元素的文本内容
html()和text()的区别
语法
参数
功能
html()
无参数
用于获取第一个匹配元素的HTML内容或文本内容
html(content)
content参数为元素的HTML内容
用于设置所有匹配元素的HTML内容或文本内容
text()
无参数
用于获取所有匹配元素的文本内容
text (content)
content参数为元素的文本内容
用于设置所有匹配元素的文本内容
Value值操作val()
- val()可以获取或设置元素的value属性值
<body><h1 id="hid">jQuery实例--jQuery属性--HTML代码/文本/值的操作</h1><ul><li class="c1"><a href="http://www.baidu.com">百度</a></li><li class="c2"><a href="http://www.163.com">网易</a></li><li class="c3"><a href="http://www.qq.com">腾讯</a></li><li class="c4"><a href="http://www.sina.com">新浪</a></li></ul>搜索：<input type="text" name="kw" value="html"/> <button>搜索</button><br/><br/><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){console.log($("li.c1").html()); //类似于js中的innerHTMLconsole.log($("li.c2").text());$("li.c3").html('<a href="http://www.qq.com">腾讯2</a>');$("li.c4").text('<a>新浪2</a>');console.log($("input[name='kw']").val());$("input[name='kw']").val('CSS样式');});</script>
</body>案例：全选/全不选
-
<body><h1 id="hid">jQuery实例--jQuery属性操作--全选/全不选</h1><ul class="uu"><li><input type="checkbox" name="likes[]" value="1"/> 苹果</li><li><input type="checkbox" name="likes[]" value="2"/> 橘子</li><li><input type="checkbox" name="likes[]" value="3"/> 哈密瓜</li><li><input type="checkbox" name="likes[]" value="4"/> 菠萝</li><li><input type="checkbox" name="likes[]" value="5"/> 芒果</li></ul><button>全选</button><button>全不选</button><button>反选</button><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取按钮并绑定点击事件$("button").click(function(){//判断按钮上的文本，指定对应的操作switch($(this).html()){case "全选"://获取所有多选框并设置选中$("ul.uu input:checkbox").prop("checked",true);break;case "全不选":$("ul.uu input:checkbox").prop("checked",false);break;case "反选":$("ul.uu input:checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));});break;}});});</script> </body>
4、CSS样式操作
直接设置样式值
- 使用css()为指定的元素设置样式值
例如：
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>*{padding:0px;margin:0px;}#outer{background-color:#ddd;width:400px;height:400px;margin:50px;padding:20px;position:relative;}#inner{background-color:#fc0;width:200px;height:200px;position:absolute;}</style>
</head>
<body><h1 id="hid">jQuery实例--jQuery中的CSS样式操作</h1><div id="outer"><div id="inner"></div></div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取标题并设置css样式//$("#hid").css("color","red"); //单个属性设置$("#hid").css({"color":"green","background-color":"#ddd"});console.log($("#hid").css("color")); //获取css属性//获取div层的位置，即相对屏幕的位置var offset = $("#inner").offset();console.log("获取div层的位置:"+offset.left,offset.top);//获取偏移位置,position需要提前定位，否则和offset方式一样var position = $("#inner").position();console.log(position.left,position.top);//获取尺寸console.log($("#inner").width(),$("#inner").height());$("#inner").width(300)});</script>
</body>5、 jQuery节点遍历
| 语法 | 参数 | 功能 |
| each(callback) | 对于每个匹配的元素所要执行的函数 | $("img").each(function(i){ this.src = "test" + i + ".jpg"; }); 迭代两个图像，并设置它们的 src 属性。 注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。 |
<body><h1 id="hid">jQuery实例--节点遍历操作</h1><ul><li>2</li><li>1</li><li>10</li><li>18</li><li>8</li></ul><button>乘以2</button><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){$("button").click(function(){//$("li").css("color","red");//获取li节点并遍历执行操作$("li").each(function(i){//alert(i); //索引位置$(this).html($(this).html()*2);});});/*//统一绑定点击事件$("li").click(function(){alert($(this).html());});*/});</script>
</body> 
6、jQuery文档处理
6.1 元素插入
元素内部插入子节点
语法
功能
append(content)
$(A).append(B)表示将B追加到A中
如：$("ul").append($newNode1);
appendTo(content)
$(A).appendTo(B)表示把A追加到B中
如：$newNode1.appendTo("ul");
prepend(content)
$(A). prepend (B)表示将B前置插入到A中
如：$("ul"). prepend ($newNode1);
prependTo(content)
$(A). prependTo (B)表示将A前置插入到B中
如：$newNode1. prependTo ("ul");
<body><h1 id="hid">jQuery实例--文档处理--内部插入</h1><ul class="uu"><li>苹果</li><li>橘子</li><li>哈密瓜</li></ul>名称：<input type="text" name="tname"/><button>前添加</button><button>后追加</button><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取按钮并绑定点击事件$("button").click(function(){//获取输入框中的内容var tname = $("input[name='tname']").val();//获取上的内容判断执行对应的操作switch($(this).html()){case "前添加"://$("ul.uu").prepend("<li>"+tname+"</li>");$("<li>"+tname+"</li>").prependTo("ul.uu");break;case "后追加"://$("ul.uu").append("<li>"+tname+"</li>");$("<li>"+tname+"</li>").appendTo("ul.uu");break;}});});</script>
</body>元素外部插入同辈节点
语法
功能
after(content)
$(A).after (B)表示将B插入到A之后
如：$("ul").after($newNode1);
insertAfter(content)
$(A). insertAfter (B)表示将A插入到B之后
如：$newNode1.insertAfter("ul");
before(content)
$(A). before (B)表示将B插入至A之前
如：$("ul").before($newNode1);
insertBefore(content)
$(A). insertBefore (B)表示将A插入到B之前
如：$newNode1.insertBefore("ul");
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>ul,li{padding:0px;margin:0px;}ul.uu{list-style:none;}ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}ul.uu li:hover{background-color:#fc0;}ul.uu li.active{background-color: #f0c;}</style>
</head>
<body><h1 id="hid">jQuery实例--文档处理--外部插入</h1><ul class="uu"><li class="active">苹果</li><li>橘子</li><li>哈密瓜</li><li>菠萝</li><li>芒果</li></ul>名称：<input type="text" name="tname"/><button>前添加</button><button>后追加</button><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取所有的li节点并绑定点击事件$("ul.uu li").click(function(){$("ul.uu li").removeClass("active");$(this).addClass("active");});//获取所有按钮并绑定点击事件$("button").click(function(){//获取输入框中的内容var tname = $("input[name='tname']").val();//获取按钮上的文本并判断执行对应操作switch($(this).html()){case "前添加"://$("li.active").before("<li>"+tname+"</li>");$("<li>"+tname+"</li>").insertBefore("li.active");break;case "后追加"://$("li.active").after("<li>"+tname+"</li>");$("<li>"+tname+"</li>").insertAfter("li.active").click(function(){$("ul.uu li").removeClass("active");$(this).addClass("active");});break;}});});</script>
</body>
6.2 外部插入和删除实例
<body><h1 id="hid">jQuery实例--文档处理--外部插入和删除</h1><form>姓名：<input type="text" title="姓名" name="uname"/><br/><br/>年龄：<input type="text" title="年龄" name="age"/><br/><br/>邮箱：<input type="text" title="邮箱" name="email"/><br/><br/>电话：<input type="text" title="电话" name="phone"/><br/><br/>地址：<input type="text" title="地址" name="address"/><br/><br/></form><br/><br/><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取所有的输入框并绑定获得和失去焦点事件$("input:text").focus(function(){//获得焦点事件处理var title = $(this).attr("title");$("<span> 请输入正确的"+title+"信息</span>").insertAfter(this).css("color","#ddd");}).blur(function(){//失去焦点事件处理$(this).next("span").remove();});});</script>
</body>6.3 节点删除、复制和替换
删除节点
- jQuery提供了三种删除节点的方法
- ◦remove()：删除整个节点
- ◦detach()：删除整个节点，保留元素的绑定事件、附加的数据
- ◦empty()：清空节点内容
复制节点
- clone()用于复制某个节点
- 可以使用clone()实现输出DOM元素本身的HTML
替换节点
- replaceWith():把前面节点的全部替换成后面的，后面的节点删除
- replaceAll()：用前面的节点的替换掉所有后面的节点，前面的节点删除
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>ul,li{padding:0px;margin:0px;}ul.uu{list-style:none;}ul.uu li{line-height:40px;padding-left:20px;margin:5px;background-color:#ddd;}ul.uu li:hover{background-color:#fc0;}ul.uu li.active{background-color: #f0c;}</style>
</head>
<body><h1 id="hid">jQuery实例--文档处理--删除操作</h1><ul class="uu"><li>苹果</li><li>橘子</li><li>哈密瓜</li><li>菠萝</li><li>芒果</li></ul><button>删除</button><button>清空</button><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取li节点并添加选中效果$("ul.uu li").click(function(){$(this).toggleClass("active");});//获取按钮并绑定点击事件$("button").click(function(){//根据按钮上的文本执行对象操作switch($(this).html()){case "删除":$("li.active").remove();break;case "清空":$("ul.uu").empty();break;}});});</script>
</body>7、jQuery特效展示
7.1 显示与隐藏
显示：
- show( [speed,[easing],[fn] ) 在显示元素时，能定义显示元素时的效果，如显示速度
提示：
- speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
- fn:在动画完成时执行的函数，每个元素执行一次
隐藏
hide([speed,[easing],[fn]]) 隐藏显示的元素
提示：参数同上
切换
- toggle([speed],[easing],[fn]) 除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态
提示：参数同上，speed默认为 "0"毫秒；
改变元素的高度
- slideDown() 可以使元素逐步延伸显示
- slideUp()则使元素逐步缩短直至隐藏
$("h2").click(function(){$(".txt").slideUp("slow");$(".txt").slideDown("slow"); });
淡入淡出效果
- fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
<body><h1 id="hid">jQuery实例--jQuery特效展示</h1><button>显示</button><button>隐藏</button><button>切换</button><br/><br/><img src="./images/33.jpg" width="300"/><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取按钮并绑定点击事件$("button").click(function(){//判断按钮上的文本并执行对应的操作switch($(this).html()){case "显示"://$("img").show("slow");//$("img").slideDown("slow");$("img").fadeIn("slow");break;case "隐藏"://$("img").hide("slow");//$("img").slideUp("slow");$("img").fadeOut("slow");break;case "切换"://$("img").toggle("slow");//$("img").slideToggle("slow");//$("img").fadeToggle("slow");$("img").stop().toggle("slow");//stop()防止多次快速点击动画不停的bugbreak;}});});</script>
</body>7.2 短信墙特效
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>ul,li{margin:0px;padding:0px;}ul{width:400px;list-style:none;}ul li{line-height:80px;margin-bottom:2px;background-color:#ddd;}#did{width:400px;height:326px;border:1px solid #fc0;overflow:hidden;}</style>
</head>
<body><h1 id="hid">jQuery实例--jQuery效果展示--短信墙特效</h1><div id="did"><ul class="uu"><li>苹果</li><li>橘子</li><li>哈密瓜</li><li>香蕉</li><li>荔枝</li><li>芒果</li></ul></div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//定时每隔3秒后执行一次setInterval(function(){//获取ul中的最后一个li节点设置隐藏后添加到ul里面的最前面，并设置滑动显示//$("ul.uu li:last").hide().prependTo("ul.uu").slideDown("slow");//向上滚动展示$("ul.uu li:first").slideUp("slow",function(){$(this).appendTo("ul.uu").show();});},3000);});</script>
</body>7.3 树形菜单特效
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>ul.uu{display:none;}h4{line-height:40px;}h4:hover{background-color:#ddd;}</style>
</head>
<body><h1 id="hid">jQuery实例--jQuery效果展示--树形菜单</h1><h4>水果系列</h4><ul class="uu"><li>苹果</li><li>橘子</li><li>哈密瓜</li></ul><h4>水果系列</h4><ul class="uu"><li>苹果</li><li>橘子</li><li>哈密瓜</li></ul><h4>水果系列</h4><ul class="uu"><li>苹果</li><li>橘子</li><li>哈密瓜</li></ul><br/><br/><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取上面所有的h4标题并绑定点击事件$("h4").click(function(){//获取当前h4紧邻的兄弟ul节点，并滑动展开显示$(this).next("ul.uu").slideToggle("slow")});});</script>
</body>7.4 选项卡特效
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>ul,li,div{margin:0px;padding:0px;}#did .header ul{list-style:none;}#did .header ul li{line-height:50px;width:120px;float:left;margin-right:4px;background-color:#ddd;}#did .header ul li:hover{background-color:#fc0;}#did .body{clear:both;width:500px;height:400px;border:1px solid #ddd;}#did .body .cc{display:none;height:400px;}#did .header ul li.b1,#did .body div.d1{background-color:red;}#did .header ul li.b2,#did .body div.d2{background-color:green;}#did .header ul li.b3,#did .body div.d3{background-color:blue;}</style>
</head>
<body><h1 id="hid">jQuery实例--jQuery效果展示--选项卡</h1><div id="did"><div class="header"><ul><li class="b1">aaa</li><li class="b2">bbb</li><li class="b3">ccc</li><li>ddddd</li></ul></div><div class="body"><div class="cc d1">AAA</div><div class="cc d2">BBB</div><div class="cc d3">CCC</div><div class="cc">DDDD</div></div></div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取上面header头中ul里面的所有li节点，并绑定鼠标移入事件$("#did .header ul li").mouseover(function(){//获取事件源对象li的索引位置var m = $(this).index();//隐藏所有body层$("#did .body div").hide();//显示索引位置m对应的div层$("#did .body div").eq(m).fadeIn("slow");});});</script>
</body>7.5 导航栏特效
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>div,ul,li,a{margin:0px;padding:0px;}ul{list-style:none; position:absolute;}a{text-decoration:none;display:block;width:100px;line-height:40px;}a:hover{background-color:#fc0;}#menu{width:100%;height:40px;line-height:40px;}#menu ul li{width:100px;float:left;line-height:40px;background-color:#ddd;text-align:center;border-right:2px solid #fff;}#menu ul li ul.item li{border-top:2px solid #fff;}#menu ul li ul.item{display:none;position:relative;}</style>
</head>
<body><h1 id="hid">jQuery实例--jQuery效果展示--导航栏效果</h1><div id="menu"><ul><li><a href="#">商品展示</a><ul class="item"><li><a href="#">热卖商品</a></li><li><a href="#">最新商品</a></li><li><a href="#">特价商品</a></li><li><a href="#">推荐商品</a></li></ul></li><li><a href="#">站内新闻</a><ul class="item"><li><a href="#">国内新闻</a></li><li><a href="#">体育信息</a></li><li><a href="#">热点新闻</a></li></ul></li><li><a href="#">网站公告</a><ul class="item"><li><a href="#">国内新闻</a></li><li><a href="#">体育信息</a></li><li><a href="#">热点新闻</a></li><li><a href="#">体育信息</a></li><li><a href="#">热点新闻</a></li></ul></li><li><a href="#">关于我们</a><ul class="item"><li><a href="#">国内新闻</a></li><li><a href="#">体育信息</a></li><li><a href="#">热点新闻</a></li></ul></li><li><a href="#">在线帮助</a></li></ul></div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取所有菜单中li选项，并绑定鼠标移入和移出事件$("#menu ul li").mouseover(function(){//移入事件处理//$(this).find("ul.item").show();$("ul.item:animated").stop().hide();$(this).find("ul.item").slideDown("slow");}).mouseout(function(){//移出事件处理$(this).find("ul.item").hide();});});</script>
</body>8、jQuery事件处理
- jQuery事件是对JavaScript事件的封装，常用事件分类如下：
- ◦基础事件
- window事件
- 鼠标事件
- 键盘事件
- 表单事件
- ◦复合事件是多个事件的组合
- 鼠标光标悬停
- 鼠标连续点击
8.1 一次性点击事件和激发事件
| 语法 | 功能 |
| one(type,[data],fn) | 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 |
| trigger(type,[data]) | 在每一个匹配的元素上触发某类事件。 |
<body><h1 id="hid">jQuery实例--事件处理</h1><button onclick="dofun()">点击我</button><button id="bid">投票</button><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取投票按钮并绑定一次性点击事件$("#bid").one("click",function(){alert("投票成功！");$(this).html("已投票");});});function dofun(){console.log("事件被点击！");$("#hid").css("color","red");//使用jquery程序激发一个事件$("#bid").trigger("click");}</script>
</body>8.2 移入与移出事件
| 语法 | 功能 |
| mouseover([[data],fn]) | 当鼠标指针位于元素上方时，会发生 mouseover 事件。 |
| mouseout([[data],fn]) | 当鼠标指针从元素上移开时，发生 mouseout 事件。 |
| hover([over,]out) | 当鼠标移到元素上或移出元素时触发执行的事件函数 |
$(function(){//获取did层并绑定鼠标的移入和移出事件$("#did").mouseover(function(){console.log("鼠标移入。。。。");}).mouseout(function(){console.log("鼠标移出。。。。");});//效果同上的代码$("#did").hover(function(){//鼠标移入事件处理console.log("鼠标移入111。。。。");},function(){//鼠标移出事件处理console.log("鼠标移出11。。。。");});
}<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>div,img,ul,li{margin:0px;padding:0px;}#did{width:384px;height:240px;}#list img{width:85px;border:2px solid #fff;margin-right:2px;}#list img:hover{border:2px solid red;}</style>
</head>
<body><h1 id="hid">jQuery实例--鼠标移入事件处理</h1><div id="did"><img id="mid" src="./images/11.jpg" width="384"/></div><div id="list"><img src="./images/11.jpg"/><img src="./images/22.jpg"/><img src="./images/33.jpg"/><img src="./images/44.jpg"/></div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取did层并绑定鼠标的移入和移出事件//获取图片列表并绑定鼠标移入事件$("#list img").mouseover(function(){$("#mid").attr("src",$(this).attr("src"));});});</script>
</body>8.3 图片放大镜
| offset([coordinates]) | 获取匹配元素在当前视口的相对偏移。 |
$("p:last").offset({ top: 10, left: 30 });//获取第二段的偏移<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>div,img,ul,li{margin:0px;padding:0px;}#did{width:300px;height:300px;overflow:hidden;display:none;position:absolute;} </style>
</head>
<body><h1 id="hid">jQuery实例--图片的放大镜效果</h1><br/><br/><img id="mid" src="./images/33.jpg" width="384" height="240"/><div id="did"><img src="./images/33.jpg"/></div><br/><br/><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取mid图片节点并绑定鼠标移入、移出和移动事件$("#mid").mouseover(function(){//获取被放大图片（事件源对象）的位置var offset = $(this).offset();//计算放大图层位置var y = offset.top;var x = offset.left+$(this).width()+5;//通过css对放大图层定位，并设置可见$("#did").css({top:y+"px",left:x+"px"}).show();}).mouseout(function(){//隐藏放大图层$("#did").hide(); }).mousemove(function(e){//输出事件位置//console.log(e.pageX,e.pageY);//获取当前被放大图层位置var offset = $(this).offset();//计算鼠标在被放大图层上的位置var x = e.pageX - offset.left;var y = e.pageY - offset.top;//设置放大镜图层的滚动位置$("#did").scrollLeft(x*5-150).scrollTop(y*5-150);});});</script>
</body>8.4 拖动效果
| mousedown([[data],fn]) | 当鼠标指针移动到元素上方，并按下鼠标按键 |
| on(events,[selector],[data],fn) | 在选择元素上绑定一个或多个事件的事件处理函数。 |
| off(events,[selector],[fn]) | 在选择元素上移除一个或多个事件的事件处理函数 |
| mouseup([[data],fn]) | 当在元素上放松鼠标按钮时，会发生 mouseup 事件。 |
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>div{margin:0px;padding:0px;}#did{width:200px;height:200px;background-color:#ddd;cursor:move;position:absolute;}</style>
</head>
<body><h1 id="hid">jQuery实例--拖动效果</h1><div id="did"></div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取拖动div层并绑定鼠标按下和抬起事件$("#did").mousedown(function(e){//设置背景颜色$(this).css("background-color","blue");//获取当前div层位置var offset = $(this).offset();//计算鼠标按在div层上的位置//e.pageX鼠标相对窗口的水平位置var x = e.pageX - offset.left;var y = e.pageY - offset.top;//绑定鼠标移动事件$(document).on("mousemove",function(en){//定位div图层位置$("#did").css({top:en.pageY-y+"px",left:en.pageX-x+"px"});});}).mouseup(function(){ $(this).css("background-color","#ddd");//取消鼠标移动事件$(document).off("mousemove");});}); </script>
</body>8.5 阻止事件冒泡
| event.stopPropagation() | 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。 |
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery实例</title><style>#outer{width:400px;height:400px;background-color: #ddd;margin:50px;padding:20px;}#inner{width:200px;height:200px;background-color:#fc0;}</style>
</head>
<body><h1 id="hid">jQuery实例--阻止事件冒泡</h1><div id="outer"><div id="inner"></div></div><script src="./jquery-3.5.0.min.js"></script><script>//jquery入口$(function(){//获取div层并绑定点击事件$("#outer").click(function(){console.log("outer.....");});$("#inner").click(function(e){console.log("inner.....");//阻止事件冒泡（传播）e.stopPropagation();});});</script>
</body>