jquery

一：什么是jquery

jQuery是一个快速、简洁的JavaScript框架。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。也可以将jQuery库下载到本地，然后引入本地的jQuery库。也可以直接引入外网资源。

（1）：操作dom元素，给它添加点内容，加背景色，加颜色，加边框，加点击事件

原生js：

jquery：

$ => jQuery对象

$(选择器)，获取dom元素，注意：这里返回的是被jquery封装过后的元素。

html()方法，操作dom的html内容。

css()方法，操作dom的样式。

click()方法，设置点击事件

（2）：jquery选择器

全局选择器

$('*').css('font-size','30px')

标签选择器

$('h2').css('color','red')

类选择器

$('.one').css('text-decoration','underline')

id选择器，注意：如果id值相同，只能获取第一个元素

$('#two').css('color','green')

后代选择题

$('#three .one').css('background-color','lightblue')

属性选择器

$('p[name="nj"]').css('border','1px solid blue')

在css中选择器怎么写，在jQuery中选择器就怎么写

jQuery就是通过各种选择器，获取对应的dom元素，如果获取的是多个dom元素，不需要遍历元素就可以操作元素。

（3）：jquery获取元素的方法

使用jquery选择器返回的对象是一个集合

let five = $('#five')

prev()方法，返回同级的上一个元素

five.prev().css('color','red')

five.prev().prev().css('color','green')

prevAll()方法，返回同级的上面所有元素

注意：方法里面还可以继续添加选择器，针对指定的元素

five.prevAll('li').css('background-color' ,'lightblue')

next()方法，返回同级的下一个元素

five.next().css('color','blue')

相邻的下一个li元素

$('#five+li').css('color','blue')

five.next().next().css('color','pink')

nextAll()方法，返回同级的下面所有元素

five.nextAll('li').css('background-color','lightgreen')

相邻的下面所有li元素

$('#five~li').css('background-color','lightgreen')

siblings()方法，返回同级的所有元素

five.siblings().css('font-weight','bold')

parent()方法，获取父级元素

five.parent().css('border','1px solid black')

children()方法，获取所有的子元素

five.parent().children('p').css('background-color','lightYellow')

five.parent().parent().css('border','1px solid red')

parents()方法，默认是获取所有的父级元素，所有在使用该方法时，需要添加选择器

five.parents('.a').css('border','1px solid blue')

（4）：显示和隐藏方法

<button id="block">css显示</button>

<button id="none">css隐藏</button>

（5）：js对象和jquery对象之间的转换

二、jquery-ajax

（1）：选项卡效果

原生js：

jQuery：

（2）：一级导航效果

（2）：二级导航效果

（3）：三级导航效果

220

jquery

推荐阅读更多精彩内容