python前端之JQuery

2022-03-29 00:00:00

251 339

开通VIP，畅享免费电子书等14项超值服

首页

好书

留言交流

下载APP

联系客服

2022.03.29

目的：学习JQuery函数库的基本使用方法和应用场景。

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

jquery的口号和愿望WriteLess,DoMore（写得少，做得多）

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的window.onload更快。

$(document).ready(function(){......});可以简写为：

$(function(){......});jquery选择器jquery用法思想一

选择某个网页元素，然后对它进行某种操作

jquery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

同一个函数完成取值和赋值

操作行间样式

//获取div的样式$("div").css("width");$("div").css("color");//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({fontSize:"30px",color:"red"});特别注意

选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2")//为id为div1的对象追加样式divClass2$("#div1").removeClass("divClass")//移除id为div1的对象的class名为divClass的样式$("#div1").removeClass("divClassdivClass2")//移除多个样式$("#div1").toggleClass("anotherClass")//重复切换anotherClass样式jquery属性操作1、html()取出或设置html内容

width()、height()获取元素width和heightinnerWidth()、innerHeight()包括padding的width和heightouterWidth()、outerHeight()包括padding和border的width和heightouterWidth(true)、outerHeight(true)包括padding和border以及margin的width和height2、获取元素相对页面的绝对位置

offse()3、获取可视区高度

$(window).height();4、获取页面高度

$(document).height();5、获取页面滚动距离

$(document).scrollTop();$(document).scrollLeft();6、页面滚动事件

$(window).scroll(function(){......})实例1、层级菜单

2、选项卡

3、置顶菜单

4、滚动到顶部

6、手风琴效果

5、无缝滚动

事件函数列表：

blur()元素失去焦点focus()元素获得焦点change()表单元素的值发生变化click()鼠标单击dblclick()鼠标双击mouseover()鼠标进入（进入子元素也触发）mouseout()鼠标离开（离开子元素也触发）mouseenter()鼠标进入（进入子元素不触发）mouseleave()鼠标离开（离开子元素不触发）hover()同时为mouseenter和mouseleave事件指定处理函数mouseup()松开鼠标mousedown()按下鼠标mousemove()鼠标在元素内部移动keydown()按下键盘keypress()按下键盘keyup()松开键盘load()元素加载完毕ready()DOM加载完成resize()浏览器窗口的大小发生改变scroll()滚动条的位置发生变化select()用户选中文本框中的内容submit()用户递交表单toggle()根据鼠标点击的次数，依次运行多个函数unload()用户离开页面绑定事件的其他方式

可使用jquery对象上的trigger方法来触发对象上绑定的事件。

自定义事件

除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。

//给element绑定hello事件element.bind("hello",function(){alert("helloworld!");});//触发hello事件element.trigger("hello");事件冒泡什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止

阻止右键菜单

$(document).contextmenu(function(event){event.preventDefault();});合并阻止操作

实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

//event.stopPropagation();//event.preventDefault();//合并写法：returnfalse;页面弹框实例

一般绑定事件的写法

//ev.delegateTarge委托对象$(ev.delegateTarge).undelegate();//上面的例子可使用$list.undelegate();jquery元素节点操作创建节点

1、append()和appendTo()：在现存元素的内部，从后面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

函数节流

javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

整屏滚动实例

1、无缝滚动

2、幻灯片

3、弹框

4、todolist

5、整屏滚动

json是JavaScriptObjectNotation的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

javascript对象字面量：

json的另外一个数据格式是数组，和javascript中的数组字面量相同。

同步和异步

现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

局部刷新和无刷新

同源策略

ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

常用参数：

1、url请求地址

4、data设置发送给服务器的数据

5、success设置请求成功后的回调函数

6、error设置请求失败后的回调函数

以前的写法：

ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。

jsonp的原理如下：

functionaa(dat){alert(dat.name);}页面上定义一个函数，引用一个外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的内容如下：

aa({"name":"tom","age":18});外部js文件调用页面上定义的函数，通过参数把数据传进去。

1、什么是正则表达式：

能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：

varre=/规则/参数;

3、规则中的字符

1）普通字符匹配：

2）转义字符匹配：

\d匹配一个数字，即0-9

\D匹配一个非数字，即除了0-9

\w匹配一个单词字符（字母、数字、下划线）

\W匹配任何非单词字符。等价于[^A-Za-z0-9_]

\s匹配一个空白符

\S匹配一个非空白符

\b匹配单词边界

\B匹配非单词边界

\1重复子项

4、量词：对左边的匹配字符定义个数

出现零次或一次（最多出现一次）

+出现一次或多次（至少出现一次）

*出现零次或多次（任意次）

{n}出现n次

{n,m}出现n到m次

{n,}至少出现n次

5、任意一个或者范围

[a-z0-9]:匹配a到z或者0到9中的任意一个字符

6、限制开头结尾

^以紧挨的元素开头

$以紧挨的元素结尾

7、修饰参数：

g：global，全文搜索，默认搜索到第一个结果接停止

i：ingorecase，忽略大小写，默认大小写敏感

m：multiplelines，多行搜索（更改^和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）

8、常用函数

1、test

用法：正则.test(字符串)匹配成功，就返回真，否则就返回假

2、search

用法：字符串.search(正则)匹配成功，返回位置，否则返回-1

3、match

用法：字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null

4、replace

用法：字符串.replace(正则，新的字符串)匹配成功的字符去替换新的字符

正则默认规则

匹配成功就结束，不会继续匹配，区分大小写

本地存储分为cookie，以及新增的localStorage和sessionStorage

localStorage和sessionStorage合称为WebStorage,WebStorage支持事件通知机制，可以将数据更新的通知监听者，WebStorage的api接口使用更方便。

iPhone的无痕浏览不支持WebStorage，只能用cookie。

jQueryUI是以jQuery为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jqueryUI网址

常用jqueryUI插件：

Draggable

1、设置数值的滑动条

2、自定义滚动条

1、ajax数据加载

2、表单验证

3、滑动条

4、自定义滚动条

jQuery是对JavaScript和DOM的一种封装。是为了让程序员快速简单的开发一个页面出来。

在python中叫模块，在其它语言中叫类库。每个语言中叫法不一样而已。

jQuery就是封装了DOM/BOM/JavaScript的类库。

可分为两类操作：查找元素，操作元素。

1、DOM查找元素回顾

在DOM中有大概10个左右的选择器，即是查找元素的方法。

2、jQuery查找元素：主要用的是选择器和筛选

jquery是模块，要使用需要先导入，在导入之前要先下载。

jquery版本有：1.x,2.x,3.x，推荐使用1系列的最新版本。最新1.12.4版本

引入CSS文件和写自己CSS样式的方法如下：

导入jQuery文件之后，在运行上面代码后，在终端上执行下面命令：

$("#i1")//用jquery方法去查找id号为i1的对象，结果是jquery对象，输出如下：

jQuery.fn.init[div#i1,context:document,selector:"#i1"]

document.getElementById("i1")//通过DOM方法查找，结果是DOM对象，输出如下：

python

jquery对象与DOM对象之间的转换

$("#i1")[0]//在jquery后面对象第1个元素(第0个索引)就是DOM对象，输出如下：

3、jQuery对象与DOM对象之间的相互转换

jquery对象[0]（第0个索引）就是DOM对象。

DOM对象转换为jquery对象，直接使用：$(DOM对象)

DOM对象转jquery对象，方法如下：

d=document.getElementById("i1")//获取DOM对象

$(d)//直接使用$()方法就可以转换，输出如下：

jQuery.fn.init[div#i1,context:div#i1]

直接找到某个或者某类标签。

1、通过id号查找

2、class选择器

以下面代码段为示例，讲解常用选择器的用法。

$(".c1")

3、标签选择器

4、组合选择器

根据上面这段代码，要查找所有的a标签和class的属性值是c2的标签。以及id是i5的标签：

jQuery.fn.init(5)[div#i5.c1,a,a,a,div.c2,prevObject:jQuery.fn.init(1),context:document,selector:"a,.c2,#i5"]

5、层级选择器

查找id号是i5下面的所有a标签：

$("#i5a")//输出如下：子子孙孙都能找到

jQuery.fn.init(2)[a,a,prevObject:jQuery.fn.init(1),context:document,selector:"#i5a"]$("#i5>a")//只找它的子标签

$("div+div")//找第1个div标签后面的平级div标签，输出如下：

jQuery.fn.init(3)[div#i5.c1,div.c1,div.c1,prevObject:jQuery.fn.init(1),context:document,selector:"div+div"]$("div~div")//找第1个div标签后面的兄弟标签，输出如下：

jQuery.fn.init(3)[div#i5.c1,div.c1,div.c1,prevObject:jQuery.fn.init(1),context:document,selector:"div~div"]6、基本筛选器

:first获取匹配的第一个元素，例如：

$("a:first")//找a标签的第一个，输出：

jQuery.fn.init[a,prevObject:jQuery.fn.init(1),context:document,selector:"a:first"]

$("#ida:first")//找到相应的id号后找第一个a标签。

$("#id>a:first")//找到相应的id号后找第一个子a标签

:not(selector)去除所有与给定选择器匹配的元素，例如：

$("input:not(:checked)")

:even匹配所有索引值为偶数的元素，从0开始计数

$("tr:even")//查找tr标签的偶数元素，注意是从0开始

:odd匹配所有索引值为奇数的元素，从0开始计数

$("tr:odd")//查找tr标签的奇数元素，注意是从0开始

:last()获取最后个元素

:eq(index)匹配一个给定索引值的元素，从0开始计数

$("tr:eq(1)")//索引从0开始，参数是1表示第二个tr标签

$(#i5a:eq(0))//输出如下：

jQuery.fn.init[a,prevObject:jQuery.fn.init(1),context:document,selector:"#i5a:eq(0)"]:gt(index)匹配所有大于给定索引值的元素

:lt(index)匹配所有小于给定索引值的元素

:lang(language)选择指定语言的所有元素。

:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“-”的元素。例如，选择器$("div:lang(en)")将匹配and（和他们的后代

），但不包括对于HTML元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。

$("p:lang(it)")选择所有

的语言属性:

:header匹配如h1,h2,h3之类的标题元素

$(":header").css("background","#EEE");给页面内所有标题加上背景色

:animated匹配所有正在执行动画效果的元素

$("#run").click(function(){$("div:not(:animated)").animate({left:"+=20"},1000);});:focus匹配当前获取焦点的元素。

如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言

$(document.activeElement)将检索，而不必搜索整个DOM树。

常用的有：:first,:last,:eq()

7、属性

根据标签的属性去查找标签。例如有下面两行HTML代码

[attribute]匹配包含给定属性的元素。如：

8、表单选择器

表单选择器可以通过属性选择器实现。例如下面这样：

表单对象属性

//disabled属性表示这个输入框不能输入

根据上面代码查找：

9、举例

实例一：多选、反选、全选

选择权：

jQuery的for循环是each,在each内部可以写函数，函数体中的this是DOM对象，也是当前循环的元素，也可以使用$(this)方法把DOM对象转换成jQuery对象。each内部的函数可以传递一个参数，这个参数是当前索引。

详细代码如下所示：

10、筛选器

在选择器选择到标签的基础上，在筛选一次。

this指是的当前标签，就是鼠标点击的标签。后面接next()表示当前标签的下一个标签。

$(this).next()

由于$()是jQuery对象，括号里面是选择器，在后面接某个方法时就是筛选器。

常用筛选器有：下面使用的是this（当前对象），这个this也可以换成前面所说的选择器。

$(this).next()当前对象的下一个

$(this).nextAll()查找当前元素之后所有的同辈元素。可以用表达式过滤

$(this).prev()当前对象的上一个

$(this).prevAll()查找当前元素之前所有的同辈元素,可以用表达式过滤。

$(this).prevUntil()查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

$(this).parent()当前标签的父标签

$(this).parents()取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。例：

$("span").parents("p")找到每个span的所有是p元素的祖先元素。

$(this).parentsUntil()查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。例如：

$("#i1").parentUntil(".c1")

$(this).children()当前标签的子标签

$(this).siblings()当前标签的所有兄弟标签

上面这几个查找方法都可以嵌套使用，还可以嵌套多个。要灵活使用。

通过上面的查找方法，找到后就可以添加样式：

jQuery支持“链式编程”，把代码写成一行方式。

筛选器之过滤常用方法

$("li").eq(1)找到第二个li标签，注意索引从0开始。与$("li.eq(1)")是一样的效果，但这个的参数全是字符串。

方法说明：获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个。类似的有get(index),不过get(index)返回的是DOM对象。

$("li").first()获取第1个li标签

$("li").last()获取最后1个li标签

下面的代码是对上面这几个方法的一个应用，运行下面的代码，在页面上显示“菜单一”到“菜单四”，“内容”不显示。当点击菜单一时显示菜单一下面的内容；点击菜单二时显示菜单二下面的内容，菜单一的内容就隐藏。实现在这个功能使用jQuery来实现，用两行代码或者一行代码即可实现这个功能。最开始用$(".header")找到class属性值是header的标签，接着通过click()方法（点击事件）捕获当前标签，在click()方法使用匿名函数来完成这个功能。具体代码如下所示：

回顾DOM操作，现在有下面这行代码：

helloworld

在DOM中操作如下：

tag=document.getElementById("i1");//通过id号获取标签

tag.innerHTML//获取标签内的HTML，输出如下：

"helloworld"

tag.innerText//获取文本内容，输出如下：

"helloworld"

下面用jQuery操作这行代码：

$("#i1").html()//获取HTML，输出如下：

$("#i1").text()//获取文本内容，输出如下：

$("#i1").html("

hellopython

")//修改HTML的内容，此时屏幕上显示hellopython

$("#i1").text("

hellopython

")//修改标签的文本内容，此时屏幕上显示如下信息：

hellopython

对于input标签，DOM操作获取值和设置值方式有点不一样，现有下面这行代码，如下所示：

现对这行代码用DOM操作如下：

tag=document.getElementById("i2")//获取标签

tag.value//获取输入框的值

tag.value="123";//设置输入框的值

在jQuery中的操作如下：

$("#i2").val()//获取输入框的的值

$("#i2").val("python")//设置输入框的的值

当然上面的这些操作，不是只针对input标签才有的，对于标签有value属性的都可以这样操作，比如form表单标签，textarea标签等。

通过上面的操作，可得到下面的文本操作小结：

$(..).text()获取文本内容

$(..).text("

")设置文本内容，不解析HTML代码

$(..).html()获取标签下面包含的文本内容和HTML代码

$(..).html("

")设置HTML，要解析HTML代码

$(..).val()获取值

$(..).val(..)设置值

jQuery的val()方法其实就是封装了DOM对象的value属性。

举例：模态对话框，现在页面上有一个表格，可以点添加按钮弹出一个对话框，也可以点击每一行编辑按钮进行编辑。这里需要用到CSS较多的内容，对话框用jQuery来实现。详细代码如下所示：

给某个标签添加样式，删除样式。先把样式进行定义。使用jQuery提供的addClass(),removeClass(),

toggleClass()，等方法可以添加样式。

例如下面代码所示，运行下面的代码，在页面上显示一个“开关”按钮，点击开关时即可显示或者隐藏页面上的文字，代码内容如下所示。要实现这个功能使用addClass()和removeClass()才能完成，但使用toggleClass()一行代码即可完成。

专门用于做自定义属性。

专门用于checkbox,radio做操作

$(..).index()获取索引位置

利用上一个开关按钮的代码举例说明$(..).attr和$(..).removeAttr的用法。在终端上操作如下：

$("#i1");//获取id为i1的标签：此时为jQuery卦象

$("#i1")[0];//此时输出结果是DOM对象，输出如下：

$("#i1").attr("type");//获取type属性的值，输出："button"

$("#i1").attr("value")//输出：“开关”

$("#i1").attr("id")//输出："i1"

$("#i1").attr("name","michael");//添加一个属性name，值是michael

$("#i1")[0]//DOM对象，输出如下：

当给attr()方法传一个参数是获取属性值，传两个参数是设置属性值，如果有重复就修改值。

$("#i1").removeAttr("value");//删除value属性

下面对$(..).prop()用法举例，假如有下面一行HTML代码，在页面上显示可以勾选的选择框。在终端操作如下：

$("#i2").prop("checked");//查看是否选中，默认没有选中，输出:false

$("#i2").prop("checked",true);//设置为true,表示选中

$("#i2").prop("checked",false);//设置为false,表示不选中

14、获取表格内容

通过jQuery的属性attr()方法，获取某个标签的属性值，并且获取该标签的文本内容。将该内容赋值给input标签的输入框，从而实现点击编辑的时候获取到该标签原有的信息。详细代码如下所示：

通过attr()方法获取菜单标签的属性值，保存到变量中。然后进一步获取内容标签的子标签对应的属性值，通过使用removeClass()、addClass、siblings()等方法修改内容标签的属性值，从而达到修改的目的。详细代码如下所示：

添加：

append()在列表节点的索引最后添加。

prepend()在列表节点的索引起始处添加。

prependto()把所有匹配的元素追加到另一个指定的元素元素集合中。

appendto()把所有匹配的元素前置到另一个、指定的元素元素集合中。

after()在匹配的节点后面添加

before()在匹配的节点前面添加

删除：

remove()删除匹配到的节点及内容

empty()删除匹配到的节点内容，节点不删除。

克隆

clone()可以克隆节点添加到其它节点中去。

上面方法举例，代码如下所示，在页面上显示添加、删除、复制按钮。分别根据文本框的内容进行添加、删除和复制操作。

17、jQuery的CSS处理

$("t1").append()

$("t1").remove()

setInterval

透明度1》0

position

字体大小，位置

$(window).scrollTop()不加参数是获取像素值，获取的是主窗口的像素值

$(window).scrollTop(0)加参数是设置值，0表示顶部，回到顶部

scrollLeft([val])

offset，指定标签在HTML中的坐标

offset().left

offset().top

position()指定标签相对父标签(relative)标签的坐标。例如下面代码所示：

$("#i1").height()获取标签的高度

$("#i1").innerHeight()获取纯高度+内边距

$("#i1").outerHeight()获取边框+纯高度+内边距

$("#i1").innerHeight(true)获取的是jQuery对象

区分这几个高度

#纯高度，边框，外边距，内边距

根据上面这小段HTML代码获取高度位置：

$("#i1").height()//输出是：80，是标签的高度

$("#i1").innerHeight()//输出是：82，文本高度加内边距

$("#i1").outerHeight()//输出是：84，文本高度加边框加内边距

$("#i1").innerHeight(true)//获取到是jQuery对象，输出是：

获取窗口位置举例，现有下面这段HTML代码，在终端上执行操作，获取窗口的位置。

python

根据上面代码执行下面这些命令

$(window).scrollTop()//获取的是主窗口的当前位置

$(window).scrollTop(0)//0表示顶部，回到主窗口的顶部

$(window).scrollTop(1000)//获取到主窗口的1000像素位置处

offset操作

$("#i1").offset()//获取id为i1的标签位置，输出：

{top:8,left:8}//要理解为什么是8

$("#i2").offset()//获取id为i2的标签位置，输出：

{top:129,left:8}

$("#i2").offset().top//要明白这几个位置的意思。

129

$("#i2").offset().left

19、jQuery事件

在DOM中，三种事件绑定方式

在jQuery中绑定事件方式：

})

还可以根据某个标签的class属性值找到下面的子标签，对相同的子标签名绑定相同的事件的，如：

找到某个标签有class属性值是c，对其下面的所有a标签绑定一个click事件。对应的解绑事件是：

delegate是委托的意思，这种绑定方式有一个非常重要的功能。看后面的示例。

还有一种绑定和解绑事件方式是：on,off

前面三种绑定方式，在内部调用的都是on方式。

阻止事件发生

returnfalse

在事件绑定中，还有一个重要的功能要记住，就是return。在标签中在onclick的属性值前面加上return,则在DOM操作时，当事件函数return是true时，标签的默认动作才会执行，为false时不执行。当使用jQuery绑定事件时，则在事件函数中也是根据return后面的值是true还是false判定是否要对后面的动作执行。例如下面代码示例所示：

jQuery一个非常重要的功能，当页面框架加载完成之后，自动执行。由于HTML的代码是从上到下，依次执行，

比如在某些页面中有加载图片，图片加载又慢。此时用jQuery绑定的事件就要需图片加载完成后才参绑定成功。

此时可以把jQuery绑定的事件放在匿名函数内，像下面这样做：

$(function(){

//把需要执行的jQuery代码放在这匿名函数内

$(...)

21、jQuery扩展

从前面的各种实例已知，直接使用jQuery的选择器及其相应的方法如下：

另外，jQuery还直接提供了各种各样的方法，可以直接调用，如：

$.ajax();

此外，还可以给jQuery添加扩展，给jQuery添加自定义的方法。

使用自定义方法是用$.extend()方法进行扩展，参数是一个字典，键名是函数名，值是函数，例如：

varv=$.HelloWorld();

alert(v);

jQuery扩展还有另外一种方法，使用$.fn.extend(),参数仍然是字典，例如：

引用别人的jQuery文件时，要注意可能会存在的一些问题：函数名相同的问题，比如引用了几个不同公司的jQuery扩展，这几个扩展当中可能就存在函数相同的问题，这个问题还没有解决办法，所在以引用时要特别注意；另外一个要注意的是，在引用别人的jQuery扩展，可能在扩展文件中定义了全局变量，如果有全局变量名和当前代码文件的变量名相同，可能会造成一些不能预知的问题，此时可以通过JavaScript的自执行函数来解决，再将全局变量改为局部变量，因为变量的作用域在函数内。例如在一个jQuery扩展文件中，把扩展的代码全部放到自执行函数内，如下面这样：

1.id选择器

2.元素标签名选择器element

3.类选择器

4.*选择器（匹配所有元素）

5.群组选择器

6.后代选择器

7.指定选择器

8.子选择器

9.next(选择器)

10.nextall(选择器)

11.prev方法

12.prevall方法

13.slbings()方法

滤器主要通过特定的过滤规则来筛选所需的DOM元素，和CSS中的伪类的语法类

：使用冒号(:)开头。

1.基本筛选

2.内容筛选器

3.可见性过滤器

注意：:hidden过滤器一般是包含的内容为：CSS样式为display:none、input表单类型为

type="hidden"和visibility:hidden的元素。

4.子元素过滤器

子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

5.其他方法

1.元素内容操作

2.元素属性操作

3.元素样式操作

元素样式操作包括了直接设置CSS样式、增加CSS类别、类别切换、删除类别这几种

操作方法。而在整个jQuery使用频率上来看，CSS样式的操作也是极高的，所以需要重点

掌握。

4.css方法

jQuery不但提供了CSS的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的CSS操作方法，我们分别来了解一下。

THE END

python前端之JQuery

领先:使用jQuery生成丰富用户界面MicrosoftLearn

jquery实现菜单栏jquery实现下拉菜单

掌握jQuery中的单选框：如何选择第一个单选项

javascript下拉菜单代码(用jquery做下拉菜单)腾讯云开发者社区

使用jQuery实现各种下拉菜单功能效果的方法总结js教程

web前端下拉菜单怎么做?Worktile社区

36个JQuery导航菜单(转)知更鸟

jquery下拉菜单（导航）代码汇总下载

jQuery创建折叠式菜单jquery

10+最流行的jQueryTree菜单插件jQuery插件前端技术

python前端之JQuery