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);	获取表单值

未全部归纳

Html学习5-1_jQuery