一、jquery 简介

1. 什么是jquery

1. jquery：是一个轻量级的js库

2. jQuery库包含以下功能：

1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.AJAX
8.Utilities

3. jquery的优点跟特征

jquery的优点:写的少做的多
jquery的特征:
1.强大的元素选择器:使用的是css1-css3所有选择器
2.简化了dom操作
3.优化了事件机制
4.ajax
5.插件

二、jquery语法

1.先看jquery源码
源码中：
window.jQuery==window.$=jQuery
jQuery在源码是一个函数，该函数内部返回 jQuery.fn.init 对象
jQuery.fn=jQuery.prototype
2.使用jquery：
a. 标识符： $ 或 jQuery + () 执行
b. 要使用jquery 需要先引入jquery 的库
如果元素初始化了，直接写jquery代码。如果元素未初始化，写dom加载完成事件

dom加载完成事件

<body>
<script src="js/jquery-1.9.1.js"></script>
<script>$(window).ready(function (){console.log("dom加载完成");});//简写$(function (){console.log("简写");});
</script>
</body>

三、jquery引入方法

1.本地引入：

<body>
<script src="./js/jquery-1.9.1.js"></script>
</body>

2.远程引入：

<body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</body>

3.引入cdn:

<body>
<script src="js/jquery-1.9.1.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</body>

四、jquery选择器

1. 基本

  • *选择器

匹配所有元素，找到每一个元素

<body>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("*"));
</script>
</body>

  • element选择器

根据给定的元素标签匹配所有元素

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("button"));
</script>
</body>

  • class选择器

根据给定的css类名匹配元素

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($(".btn"));
</script>
</body>

  • id选择器

根据给定的ID匹配一个元素

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("#an1"));
</script>
</body>

  • 复合选择器

将每一个选择器匹配到的元素合并后一起返回

<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("#an1,#an2"));
</script>
</body>

2. 层级

  • 匹配所有ul里面的li

在给定的祖元素下匹配所有后代元素

<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul li"));
</script>
</body>

  • 匹配ul.menu里面所有的li

在给定的父元素下匹配所有的子元素

<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li"));
</script>
</body>

  • 匹配ul.menu里面li的第一个子集紧跟其后的元素

:nth-child 匹配其父元素下的第N个子或奇偶元素

  • 匹配紧跟其后的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li:nth-child(1)+li"));
</script>
</body>

  • 匹配ul.menu里面li的第一个子集里面所有的元素
    ~ 匹配元素之后所有的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li:nth-child(1)~li"));
</script>
</body>

  • 获取.menu里面li的第一个元素
    :first 获取第一个元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li:first"));
</script>
</body>

  • 获取.menu里面li的第一个子元素
    :first-child 匹配所给选择器的第一个子元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li:first-child"));
</script>
</body>

  • 去除.menu里面的li的.child元素
    :not(selector) 去除所有与给定选择器匹配的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li:not(.child)"));//:not(selector)
</script>
</body>

  • 匹配.menu里面li所有为偶数的元素
    :even 匹配所有索引值为偶数的元素，从0开始计数
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li:even"));
</script>
</body>

  • 匹配.menu里面li所有为奇数的元素
    :odd 匹配所有索引值为偶数的元素，从0开始计数
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu>li:odd"));
</script>
</body>

  • 匹配.menu里面的li的索引值为3的元素
    匹配一个给定索引值的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($(".menu>li:eq(3)"));
</script>
</body>

  • 匹配.menu里面的li的索引值小于2的元素
    匹配所有小于给定索引值的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($(".menu>li:lt(2)"));
</script>
</body>

  • 匹配.menu里面的li的索引值大于2的元素
    匹配所有大于给定索引值的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($(".menu>li:gt(2)"));
</script>
</body>

3.基本筛选器

  • :header
    匹配如 h1, h2, h3之类的标题元素
<body>
<h1>1111</h1>
<h2>2222</h2>
<h3>3333</h3>
<h4>4444</h4>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("body :header"));
</script>
</body>

  • :root
    选择该文档的根元素，永远是元素
<body>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($(":root"));
</script>
</body>

-:focus
匹配当前获取焦点的元素

<head lang="en"><title></title><style>input:focus{color: red;}</style>
</head>
<body>
<input type="text" id="user" class="ipt"/>
<script src="js/jquery-1.9.1.js"></script>
<script>$("input").focus(); //默认获得焦点console.log($("body :focus"));
</script>
</body>

4.内容

  • 查找ul所有li中包含2的文本，包含你的文本
    匹配包含给定文本的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul li:contains(2)"));console.log($("ul li:contains(你)"));
</script>
</body>


  • 匹配.menu里面.child元素
    匹配含有选择器所匹配的元素的元素
<body>
<ul class="menu"><li>1</li><li class="child">2<ul><li>21</li><li>22</li><li>你好</li><li>第二</li></ul></li><li>3</li><li>4</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("ul.menu:has(.child)"));
</script>
</body>

  • 匹配不包含子元素或者文本的空元素的div
    匹配所有不包含子元素或者文本的空元素
<body>
<div></div>
<div></div>
<div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("div:empty"));
</script>
</body>

  • 匹配含有子元素或者文本的元素的div
    匹配含有子元素或者文本的元素
<body>
<div></div>
<div></div>
<div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("div:parent")); //匹配的元素必须有子元素或者 内容
</script>
</body>

5.可见性

  • :hidden

匹配所有不可见元素，或者type为hidden的元素

<head lang="en"><title></title><style>button{display: none;}</style>
</head>
<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($(":hidden"));
</script>
</body>

  • :visible
    匹配所有的可见元素
<head lang="en"><title></title><style>button{display: none;}</style>
</head>
<body>
<button class="btn">按钮</button>
<button class="btn" id="an1">按钮</button>
<button class="btn1" id="an2">按钮</button>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($(":visible"));
</script>
</body>

6.属性

  • 匹配含有type属性的元素
    匹配包含给定属性的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("input[type]"));
</script>
</body>

  • 查找所有type的属性是text的input元素
    匹配给定的属性是某个特定值的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("input[type='text']"));
</script>
</body>

  • 查找所有type以t开始的input元素
    匹配给定的属性是以某些值开始的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("input[type^='t']"));
</script>
</body>

  • 查找所有type以t结尾的input元素
    匹配给定的属性是以某些值结尾的元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("input[type$='t']"));
</script>
</body>


-查找所有type中包含x的input元素
匹配给定的属性是以包含某些值的元素

<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("input[type*='x']"));
</script>
</body>

  • 找到所有含有type class id属性的元素
    复合属性选择器，需要同时满足多个条件时使用
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("input[type][class][id]"));
</script>
</body>

7. 子元素

  • :first-child :last-child
    :first-child 匹配第一个子元素
    :last-child 匹配最后一个子元素
<body>
<ul id="nav"><li>1</li><p>2</p><li>3</li><p>4</p><li>5</li><p>6</p><li>7</li><p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("#nav>li:first-child"));console.log($("#nav>li:last-child"));
</script>
</body>

  • :first-of-type :last-of-type
    :first-of-type 匹配ul里面li里的第一个子元素
    :last-of-type 匹配ul里面li里的最后一个子元素
<body>
<ul id="nav"><li>1</li><p>2</p><li>3</li><p>4</p><li>5</li><p>6</p><li>7</li><p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("#nav>li:first-of-type"));console.log($("#nav>li:last-of-type"));
</script>
</body>

  • :nth-child :nth-last-child
    :nth-child(3) 匹配#nav里面li所有元素的第三个元素
    :nth-last-child(2) 匹配#nav里面li所有元素的倒数第二个元素
<body>
<ul id="nav"><li>1</li><p>2</p><li>3</li><p>4</p><li>5</li><p>6</p><li>7</li><p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("#nav>li:nth-child(3)"));console.log($("#nav>li:nth-last-child(2)"));
</script>
</body>

  • :nth-of-type :nth-last-of-type
    :nth-of-type(2) 匹配#nav里面li子集的第二个元素
    :nth-last-of-type(2) 匹配#nav里面li子集的倒数第二个元素
<body>
<ul id="nav"><li>1</li><p>2</p><li>3</li><p>4</p><li>5</li><p>6</p><li>7</li><p>8</p>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>console.log($("#nav>li:nth-of-type(2)"));console.log($("#nav>li:nth-last-of-type(2)"));
</script>
</body>

8.表单

  • :input 匹配所有 input, textarea, select 和 button 元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":input"));
</script>
</body>

  • :text 匹配所有的单行文本框
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":text"));
</script>
</body>

  • :password 匹配所有密码框
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":password"));
</script>
</body>

  • :radio 匹配所有单选按钮
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":radio"));
</script>
</body>

  • :checkbox 匹配所有复选框
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":checkbox"));
</script>
</body>

  • :submit 匹配所有提交按钮
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":submit"));
</script>
</body>

  • :image 匹配所有图像域
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":image"));
</script>
</body>

  • :reset 匹配所有重置按钮
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":reset"));
</script>
</body>

  • :file 匹配所有文件域
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($(":file"));
</script>
</body>

9. 表单对象属性

  • :disabled 匹配所有不可用元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($("input:disabled"));
</script>
</body>

  • :enabled 匹配所有可用元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($("input:enabled"));
</script>
</body>

  • :checked 匹配所有选中的被选中元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($("input[type=radio]:checked"));
</script>
</body>

  • :selected 匹配所有选中的option元素
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select><option value="">选择</option><option value="">宝鸡</option><option value="" selected>西安</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>console.log($("select>option:selected"));
</script>
</body>

10. 混淆选择器

对含有#号的ID进行编码

<body>
<span id="#span">特殊字符</span>
<span class="+span">特殊字符</span>
<script src="js/jquery-3.4.1.min.js"></script>
<script>//$.escapeSelector("#span")   3.0+console.log($.escapeSelector("#span"));    //   \#spanconsole.log($("#"+$.escapeSelector("#span")));console.log($("."+$.escapeSelector("+span")));
</script>
</body>

jquery概念、引入、选择器相关推荐

  1. JavaScript之jQuery够用即可（jQuery的引入、查找选择器、左侧菜单栏）

    文章目录 一.写在前面 二.jQuery的引入 二.各种查找选择器 四.实例之左侧菜单栏 一.写在前面 JQuery世界上使用最广泛的一个库,它是一个轻量级的库,文件大小只有几十k,但是功能却相当强大 ...

  2. jQuery→简介引入、jQuery类数组对象$()与DOM对象、各种选择器、attr()、html() 、text()、val()

    官网下载 https://jquery.com/download/ jQuery对象与DOM对象 jQuery类数组对象$('')转DOM对象 DOM对象转jQuery对象 id选择器 类选择器 元素 ...

  3. 转：初探 jQuery 的 Sizzle 选择器

    这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...

  4. jQuery的内容选择器和属性

    jQuery的选择器 jQuery的内容选择器 :empty :parent :contains(text) :has(selector) $(function () {//:empty 作用是找内容 ...

  5. jQuery 的 Sizzle 选择器

    这是一篇关于介绍jQuery Sizzle选择器的文章,由我和obility共同完成.在文中,我们试图用自己的语言配以适量的代码向读者展现出Sizzle在处理选择符时的流程原理,以及末了以少许文字给你 ...

  6. jQuery的简单了解和学习（1） jquery简介+语法+选择器+事件

    jQuery jQuery简介 jQuery是一个Javascript函数库,可以让程序员写得少,而实现得多,主要包含以下功能:HTML元素的选取.操作:CSS操作:HTML事件函数:JavaScri ...

  7. jQuery的常见选择器和筛选器

    关于jQuery是前端方法库 特点: 1 优质的选择器和筛选方法 2 好用的饮食迭代 3 强大的链式编程 jQuery向外暴露两个变量:jQuery和$ (jQuery === $) 选择器 // j ...

  8. jQuery入门、选择器、事件、静态方法、动画

    目录 第一章-jQuery基础知识 1.jQuery入门 1.1.jQuery介绍 1.2.jQuery安装 1.3.jQuery函数 1.4.jQuery对象 2.jQuery选择器 3.jQuer ...

  9. jquary学习（二）jquary的使用，jQuery中的选择器

    目录 首先在官网下载jquary的js文件 html页面文件里面引入 jQuery中的选择器 基本选择器 id 选择器 标签选择器 $("a") 类选择器 $(".cla ...

  10. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

最新文章

  1. python openpyxl写入多行_Python openpyxl读写操作
  2. 「 每日一练，快乐水题 」717. 1比特与2比特字符
  3. 北京工业计算机考研科目,2020北京工业大学计算机考研初试科目、参考书目、招生人数汇总...
  4. spark读取文件源码分析-1
  5. 【TensorFlow-windows】学习笔记六——变分自编码器
  6. LibreOJ #6207. 米缇（杜教筛 + 拉格朗日插值）
  7. 12. URI , URN, URL 区别
  8. 计算机软件考试大纲,求计算机软件资格考试大纲和复习资料
  9. y的花式写法_26个字母的花式写法，总有一个你喜欢哒
  10. 谷歌/FOFA搜索引擎使用
  11. 机械臂D-H参数法分析
  12. LR性能测试Web Page Breakdown分析篇
  13. Q配置管理和文档管理
  14. Acrel-3000电能管理系统保证企业生产人员的生命安全，提高生产人员的工作效率
  15. 光伏组件高温自燃？台湾一屋顶光伏电站起火
  16. 2022年人工智能5大发展趋势
  17. zbb20170728 oracle 查看被锁对象
  18. C++中的dynamic_cast和static_cast转化
  19. 大数据_Hive_Hsql
  20. 以网游服务端的网络接入层设计为例，理解实时通信的技术挑战

热门文章

  1. gc的原因 频繁full_Java性能优化要点之：GC垃圾回收知识点整理
  2. button执行onclick函数_千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的...
  3. java异常处理试题答案_java试题及答案
  4. delphi 异步 调用 带参数_如何在 Spring 异步调用中传递上下文
  5. 服务器项目有哪些,怎么部署项目到服务器？服务器的特性有哪些？
  6. docker挂载本地目录_Docker：使用本地卷和tmpfs挂载
  7. XAF-列表视图数据访问模式
  8. 如何判断链表有环、如何判断两个链表相交
  9. 一次MySQL死锁问题解决
  10. saltstack学习篇