jQuery学习
一、简介
事实上jQuery就是一个JavaScript的函数库，同样的实现方式用jQuery明显比JavaScript要简单，jQuery主要有 HTML元素选取，元素操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTML DOM遍历和修改，AJAX，Utilities还有大量的插件。
jQuery是目前最流行的JavaScript框架，主流浏览器都可以兼容
二、jQuery特点
- 使用jQuery一半都有函数入口
- $ 符的意义其实就是函数名 它和 jqueru 具有一样的意义
- jQuery - 链(Chaining)， Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
- 几乎都是方法，都要带括号
三、使用的注意事项
遇到过的一点点需要注意的地方
-
我自己所使用的ide没有jQuery代码补全的功能，所以在刚开始学习使用的时候经常碰到拼写错误
$("#id").css("color","red");在" "中的单词拼写错误是没有提示的，运行网页的时候不会报错，反正就是没有效果。所以以后使用的时候如果出错，要考虑到拼写错误，切记切记！ -
jQuery的事件冒泡，简单点描述问题就是，如果给一个div元素和div下面的button子元素同时绑定事件，那么点击按钮的时候会同时触发div上的事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery</title> <style> #outer{width:400px;height:200px;background-color: #ddd;margin:50px;padding:20px;} </style> </head> <body> <h1 id="hid">jQuery事件冒泡</h1> <div id="outer"> <button id="inner">点我</button> </div> <script src="./jquery-3.5.0.min.js"></script> <script> $(function(){ //获取div层并绑定点击事件 $("#outer").click(function(){ console.log("outer....."); }); $("#inner").click(function(e){ console.log("inner....."); //阻止事件冒泡（传播） //e.stopPropagation(); }); }); </script> </body> </html>在这个例子中会出现点击按钮的时候也触发了div层的事件，可以理解为点击效果传递下去了，如果外面再嵌套一个div也会再触发第三个，这就是事件冒泡的现象，原理不多赘述
解决方法就是
e.stopPropagation();阻止事件冒泡，在原生JavaScript 种有类似的方法，都可以实现阻止事件冒泡 -
jQuery封装的几乎都是方法，在使用的时候都要记得带上括号
-
还有一个版本问题
- 1.X版本： 支持 ie6、ie7、ie8 ，版本不向后兼容，插件支持较好
- 2.X版本： 不支持 ie6、ie7、ie8 ，插件支持不好
- 3.X版本： 不支持 ie6、ie7、ie8 ，插件支持不好，新特性，移除了一些方法
-
jQuery函数入口，JavaScript也有函数入口，函数入口的目的就是等页面资源都加载之后才执行JavaScript的操作，如非如此结果很容易想到
//原生JavaScript写法 //所有的文件资源加载完成后，才执行 window.onload = function () { //do something } //jQuery写法 //1.文档加载完毕，图片等外部资源不加载的时候，就可以执行 $(document).ready(function () { //do something }); //2.文档加载完毕，图片等外部资源不加载的时候，就可以执行 $(function () { //do something }); //3.文档加载完毕，外部资源也加载完毕的时候，再执行这个函数。 $(window).ready(function () { //do something });入口函数在原生JavaScript只能出现一次，重复出现会覆盖事件，jQuery中可以出现多次，不会覆盖事件
-
选择器用法示例 来源：
选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id=“lastname” 的元素 .class $(".intro") class=“intro” 的所有元素 .class,.class $(".intro,.demo") class 为 “intro” 或 “demo” 的所有元素 element $(“p”) 所有 <p> 元素 el1,el2,el3 $(“h1,div,p”) 所有 <h1>、<div> 和 <p> 元素 :first $(“p:first”) 第一个 <p> 元素 :last $(“p:last”) 最后一个 <p> 元素 :even $(“tr:even”) 所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 :odd $(“tr:odd”) 所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 :first-child $(“p:first-child”) 属于其父元素的第一个子元素的所有 <p> 元素 :first-of-type $(“p:first-of-type”) 属于其父元素的第一个 <p> 元素的所有 <p> 元素 :last-child $(“p:last-child”) 属于其父元素的最后一个子元素的所有 <p> 元素 :last-of-type $(“p:last-of-type”) 属于其父元素的最后一个 <p> 元素的所有 <p> 元素 :nth-child(n) $(“p:nth-child(2)”) 属于其父元素的第二个子元素的所有 <p> 元素 :nth-last-child(n) $(“p:nth-last-child(2)”) 属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数 :nth-of-type(n) $(“p:nth-of-type(2)”) 属于其父元素的第二个 <p> 元素的所有 <p> 元素 :nth-last-of-type(n) $(“p:nth-last-of-type(2)”) 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 :only-child $(“p:only-child”) 属于其父元素的唯一子元素的所有 元素
:only-of-type $(“p:only-of-type”) 属于其父元素的特定类型的唯一子元素的所有 元素
parent > child $(“div > p”) <div> 元素的直接子元素的所有 <p> 元素 parent descendant $(“div p”) <div> 元素的后代的所有 <p> 元素 element + next $(“div + p”) 每个 <div> 元素相邻的下一个 <p> 元素 element ~ siblings $(“div ~ p”) <div> 元素同级的所有 <p> 元素 :eq(index) $(“ul li:eq(3)”) 列表中的第四个元素（index 值从 0 开始） :gt(no) $(“ul li:gt(3)”) 列举 index 大于 3 的元素 :lt(no) $(“ul li:lt(3)”) 列举 index 小于 3 的元素 :not(selector) $(“input:not(:empty)”) 所有不为空的输入元素 :header $(":header") 所有标题元素 <h1>, <h2> … :animated $(":animated") 所有动画元素 :focus $(":focus") 当前具有焦点的元素 :contains(text) $(":contains(‘Hello’)") 所有包含文本 “Hello” 的元素 :has(selector) $(“div:has§”) 所有包含有 <p> 元素在其内的 <div> 元素 :empty $(":empty") 所有空元素 :parent $(":parent") 匹配所有含有子元素或者文本的父元素。 :hidden $(“p:hidden”) 所有隐藏的 <p> 元素 :visible $(“table:visible”) 所有可见的表格 :root $(":root") 文档的根元素 :lang(language) $(“p:lang(de)”) 所有 lang 属性值为 “de” 的 <p> 元素 [attribute] $("[href]") 所有带有 href 属性的元素 [attribute=value] $("[href=‘default.htm’]") 所有带有 href 属性且值等于 “default.htm” 的元素 [attribute!=value] $("[href!=‘default.htm’]") 所有带有 href 属性且值不等于 “default.htm” 的元素 [attribute$=value] $("[href$=’.jpg’]") 所有带有 href 属性且值以 “.jpg” 结尾的元素 [attribute|=value] $("[title|=‘Tomorrow’]") 所有带有 title 属性且值等于 ‘Tomorrow’ 或者以 ‘Tomorrow’ 后跟连接符作为开头的字符串 [attribute^=value] $("[title^=‘Tom’]") 所有带有 title 属性且值以 “Tom” 开头的元素 [attribute~=value] $("[title~=‘hello’]") 所有带有 title 属性且值包含单词 “hello” 的元素 [attribute*=value] $("[title*=‘hello’]") 所有带有 title 属性且值包含字符串 “hello” 的元素 [name=value][name2=value2] $( “input[id][name$=‘man’]” ) 带有 id 属性，并且 name 属性以 man 结尾的输入框 :input $(":input") 所有 input 元素 :text $(":text") 所有带有 type=“text” 的 input 元素 :password $(":password") 所有带有 type=“password” 的 input 元素 :radio $(":radio") 所有带有 type=“radio” 的 input 元素 :checkbox $(":checkbox") 所有带有 type=“checkbox” 的 input 元素 :submit $(":submit") 所有带有 type=“submit” 的 input 元素 :reset $(":reset") 所有带有 type=“reset” 的 input 元素 :button $(":button") 所有带有 type=“button” 的 input 元素 :image $(":image") 所有带有 type=“image” 的 input 元素 :file $(":file") 所有带有 type=“file” 的 input 元素 :enable $(":enabled") 所有启用的元素 :disabled $(":disabled") 所有禁用的元素 :selected $(":selected") 所有选定的下拉列表元素 :checked $(":checked") 所有选中的复选框选项 .selector $(selector).selector 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 :target $( “p:target” ) 选择器将选中ID和URI中一个格式化的标识符相匹配的<p>元素
四、选择元素
4.1 选择元素方式的对比以及转化
<body>
<div></div>
<div id="myid"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
</body>
<script>
var myid = document.getElementById("myid"); //通过 id 获取单个元素
var tempcls = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
var testcls = document.getElementsByTagName("div"); //通过标签获取的是伪数组
//通过jQuery获取的是都是数组，其中包含着原生 JS 中的DOM对象。
console.log($('#myid'));//也是数组，只有一个元素，用[0]可以获取
console.log($('.box'));
console.log($('div'));
//jQuery对象转化为DOM对象，两种方法
$('#myid')[0].style.backgroundColor = 'blue';//方式一
$('.box').get(1).style.backgroundColor = 'red';//方式二
</script>
4.2 层级选择器
//1.获取ul中所有子元素节点li（包括后代节点）
$("ul li");
//2.获取ul中所有直接子元素节点li（包括后代节点）
$("ul>li");
$("ul>li");
//3.获取ul同级紧邻后面的第一个兄弟节点li
$("ul+li");
//4.获取ul后面所有同级兄弟li元素节点
$("ul~li")
4.3 基本筛选器
//获取所有li节点
$("li");
//获取第一个li节点
$("li:first");
//获取最后一个li节点
$("li:last");
//获取偶数索引号对应的所有li节点
$("li:even");
//获取奇数索引号对应的所有li节点
$("li:odd");
//获取class属性值为cc的所有li节点
$("li.cc");
//获取class属性值不为cc的所有li节点
$("li:not(.cc)");
//获取索引位置为2的li节点
$("li:eq(2)");
//获取前2个li节点
$("li:lt(2)");
4.4 内容选择器
//获取div元素中内容有"John"的内容
$("div:contains('John')");
4.5 属性选择器
//获取所有含有value属性的input元素标签
$("input[value]");
//获取name属性值为phone的input元素标签
$("input[name='phone']");
//获取name属性值不为phone的input元素标签
$("input[name!='phone']");
//获取name属性值是以a字符开头的所有input元素标签
$("input[name^='a']");
//获取name属性值是以e字符结尾的所有input元素标签
$("input[name$='e']");
//获取name属性值中含有m字符的所有input元素标签
$("input[name*='m']");
4.6 子元素选择器
//获取每组ul中的第一个li节点
$("ul li:first-child");
//获取每组ul中的最后一个li节点
$("ul li:last-child");
//获取每组ul中的第三个li节点
$("ul li:nth-child(3)");
4.7 表单选择器
<body>
<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(){
//获取li元素节点（条件是里面的多选框必须选中），并设置样式
$("li:has(input:checked)").css("color","red");
}
</script>
</body>
JavaScript的基础上封装的选择器使用起来比较简单也是略微复杂的地方，以他的事件，动画效果，文档处理等都没有太大的难点，对照使用手册可以轻松使用
五、常见的jQuery方法和原生JavaScript的对比
| 序号 | jQuery | JavaScript | 描述 |
|---|---|---|---|
| 1 | $(document).ready(); $(function(){});等方法 | window.onload(); | 加载DOM |
| 2 | $(’#idName’) | document.getElementById(‘idName’); | 根据id选择元素 |
| 3 | $(’.className’) | document.getElementsByClassName(‘className’); | 根据class选择 |
| 4 | $(‘tagName’) | document.getElementsByTagName(‘tagName’); | 根据TagName选择 |
| 5 | (’<b>Hello!</b>’); | document.createElement(‘p’); | 创建元素 |
| 6 | $(‘p’).append((’<b>Hello!</b>’)); | document.body.appendElement(para); | 添加元素 |
| 7 | $(‘p’).after(’<b>Hello!</b>’); | parentElement.insertBefore(newElement,targetElement) | 插入元素 |
| 8 | clone();/clone(true);//通常和appendTo()一起使用 | node.cloneNode(deep); | 复制节点 |
| 9 | $(‘ul li’).remove(li[title!=‘Hello’]);//删除节点 empty();//清空节点 | element.removeChild(node) | 删除节点 |
| 10 | $(‘p’) .replaceWith(’<h2>Hi</h2>’); $(’<h2>Hi</h2>’).replaceAll(‘p’); | element.replaceChild(newChild,oldChild) | 替换节点 |
| 11 | $(‘p’).attr(‘name’,‘value’); | setAttribute(“name”,“value”); | 属性获取 |
| 12 | $(‘p’).removeAttr(“name”); | removeAttribute(“name”); | 属性设置 |
| 13 | $(‘p’).attr(“name”); | getAttribute(“name”); | 属性删除 |
| $(‘p’).css(‘style’,‘value’); | element.style.property | 设置属性 | |
| 15 | $(‘p’).addClass(“test”); | element.classList.add(“test”); | 添加类信息 |
| $(‘p’).removeClass(“test”); | element.classList.remove(“test”); | 删除类信息 | |
| 17 | $(‘p’).html(“test”); | element.innerHTML = “test”; | 改变元素内容 |
| 18 | $(‘p’).hide(); $(‘p’).show(); | element.style.display = “none”; element.style.display = “block”; | 显示和隐藏元素 |
| 19 | $(‘p’).toggle(); | 元素切换（显示加隐藏） | |
| 20 | $(‘p’).val(“test”); | element.value = “test”; | 表单赋值 |
| alert($(‘p’).val()); | alert(element.value); | 获取表单值 |
未全部归纳
2315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
