JQuery

JavaScript库，是一个封装好的集合（方法和函数）。简单说就是一个js文件，里面是堆原生js代码进行了封装。

Jquery是一个JS库，就是为了快速方便 *** 作DOM，里面基本都是函数（方法）。

JQuery优点：

• 轻量级，核心文件才几十kb
• 跨浏览器兼容，基本兼容了现在主流的浏览器
• 链式编程，隐式迭代
• 对事件，样式，动画支持，大大简化了DOM *** 作
• 支持插件拓展开发。有这个丰富的第三方插件如：轮播图，日期控件
• 免费开源

基本用法：

1.基本入口函数 语法一： $(document).ready(fuctioin(){ 需要执行的代码 }) 语法二： $(){ 需要执行的代码 } 上述两种方法会等页面DOM结构渲染完毕，不必等所有外部资源加载完成，再去执行其中的js代码。 相当于原生js中的DOMContentLoaded 不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码。

2.jQuery的顶级对象$ $是jQuery的别称，在代码中可使用jQuery代替$，一般都直接使用$。 $也是jQery中的顶级对象，将我们的元素包装成jQuery对象。

3.jQuery对象和DOM对象 通过原生JS获取的是DOM对象 //eg:var mydiv = document.querySelector(‘div‘) jQuery方法获取的是jQuery对象 //eg:var mydiv = $(‘div‘) jQuery对象本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）。

jQuery对象只能使用jQuery方法。DOM对象只能使用原生JS的属性和方法。

4.jQuery对象和DOM对象转换 jQuery对象只是把JS中一些常用的属性和方法进行了封装。当需要使用未被封装的方法的时候，需要进行转换。 DOM对象转换为jQuery对象：$(DOM对象) jQuery对象转为DOM对象：$(‘‘)[索引号] 或 $(‘‘).get(索引号)

---

jQuery常用API

1.jQuery选择器 原生JS获取元素方式多,杂，而且兼容情况不一致。因此jQuery做了封装，使获取元素统一标准。 语法： $(”选择器“) //里面选择器直接写CSS选择器即可，但要加引号。

jQuery基本选择器

id选择器 $(#id号) 描述

全选选择器	$(‘*‘)
类选择器	$(‘.类名‘)
标签选择器	$(‘标签名‘)
并集选择器	$(‘div,li,p‘)	获取多个元素
交集选择器	$(‘li.current‘)

JQuery层级选择器

子代选择器 $(‘ul>li‘) >号，获取亲儿子层级的元素，并不会获取孙子层级元素

后代选择器	$(‘ul li‘)

jQuery筛选选择器

语法 用法 描述

:first	$(‘li:first‘)	获取第一个li元素
:last	$(‘li:last‘)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)‘)	获取到的li元素中，选择索引号为2的元素，index从0开始
:odd	$(‘li:odd‘)	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even‘)	获取到的li元素中，选择索引号为偶数的元素

jQuery筛选方法（使用时需用小括号）

parent() $("li").parent(); 返回最近以及的父级元素

children(selector)	$(‘ul‘).children(‘li‘)	相当于$(‘ul>li‘),查找儿子元素
find(selector)	$(‘ul‘).find(‘li‘)	相当于$(‘ul li‘),后代选择器
siblings(selector)	$(‘.first‘).siblings(‘li‘)	查找兄弟节点，不包括本身
nextAll([expr])	$(‘.first‘).nextAll()	查找当前元素之后的同辈元素
prevtAll([expr])	$(‘.last‘).prevtAll()	查找当前元素之前的同辈元素
hasClass(class)	$(‘div‘).hasClass(‘pro‘)	查找当前元素是否含有某个特定的类，如有则返回true
eq(index)		相当于$(‘li‘:eq(2))

2.jQuery样式 *** 作 语法： $(‘选择器‘).css(‘属性‘,‘值‘) jQuery对象是以伪数组形式存储， *** 作样式时，会自动遍历内部DOM元素，该过程叫做隐式迭代。因此当获取到的元素有多个时，无需像原生JS那样用for循环进行遍历。

3.jQuery效果 4.jQuery属性 *** 作 5.jQuery文本属性值 6.jQuery元素 *** 作 7.jQuery元素，位置 *** 作

JQuery