jQuery是一个快速、小型且功能丰富的JavaScript

优点：丰富的功能（DOM操作、过滤器、时间、动画、Ajax等）、编写更少可读的代码提高开发人员的工作效率、跨浏览器支持（IE9+）

缺点：jQuery代码库一直在增长（jQuery1.5超过200KB）、不支持组件化开发、jQuery更适合组件化开发，当涉及到复杂的项目时，能力有限

jQuery使用

jQuery监听文档加载

$( document ).ready( handler )  ：  //deprecated 
$( "document" ).ready( handler ) ：  //deprecated 
$().ready( handler ) ：//deprecated 
$( handler ) ：//推荐用这种写法，其它可以使用但是不推荐

jQuery与其他库变量名冲突（jQuery别名$的冲突）

1	jQuery.noConflict()

jQuery对象（类数组对象——可通过索引访问）

如果传入假值：返回一个空的集合。
如果传入选择器：返回在在documnet中所匹配到元素的集合。
如果传入元素：返回包含该元素的集合。
如果传入HTML字符串，返回包含新创建元素的集合。
如果传入回调函数：返回的是包含document元素集合, 并且当文档加载完成会回调该函数。
因为函数也是对象，所以该函数还包含了很多已封装好的方法。如：jQuery.noConflict、jQuery.ready等

const obj = {
    "name":"oww"
}
const obj1 = $()  // 创建空对象
const obj2 = $(obj) // 通过j对象创建jQuery对象
const obj3 = $('li') // 通过选择器创建jQuery对象

jQuery对象与Element对象的区别：jQuery会包含所选择到的对象，可以通过$(element)和obj3[index]之间相互转换，转换后具有不同的函数

jQuery选择器

常规选择器：通用选择器（*）、属性/后代/基本（id、class、元素）/兄弟/交集/伪元素（伪类不行）/可见选择器（:visible,:hidden）、jQuery扩展选择器（:eq(),:odd,:even:first:last）—eq是用索引、odd奇数、even偶数

jQuery过滤器

eq(index): 从匹配元素的集合中，取索引处的元素， eq全称(equal 等于)，返回jQuery对象。
first() : 从匹配元素的集合中，取第一个元素，返回jQuery对象。
last(): 从匹配元素的集合中，取最后一个元素，返回jQuery对象。
not(selector): 从匹配元素的集合中，删除匹配的元素，返回jQuery对象。
filter(selector): 从匹配元素的集合中，过滤出匹配的元素，返回jQuery对象。
.find(selector): 从匹配元素集合中，找到匹配的后代元素，返回jQuery对象。
is(selector|element| . ): 根据选择器、元素等检查当前匹配到元素的集合。集合中至少有一个与给定参数匹配则返回true。  8.odd() :将匹配到元素的集合减少为集合中的奇数，从零开始编号，返回jQuery对象。
even()：将匹配到元素的集合减少到集合中的偶数，从零开始编号，返回jQuery对象。
支持链式调用
on添加监听

const $li = $('li')
$li.click((event)=>{
    console.log("1", event)
})
$li.on('click',(event)=>{
    console.log("2", event)
})

jQuery函数

jQuery对文本的操作

.text()、.text(text)

<div class="active list div">
    <li><p>1</pp></li>
    <li value="2">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li><span>9</span></li>
</div>

const $li = $('li')
console.log(typeof $li.text()) // string 会把其本身和子元素的text拼接为1个string
console.log($li.text()) // 123456789
$li.text("aaa") // 更改所有选择元素的text

.html、.html(htmlString)

1
2
3

const $li = $('li')
console.log($li.html())  // <p>1</p> 获取选中第一个元素的html
$li.html("<span>10<span>") //给所有选中元素设置innerHtml

.val()、.val(value)

1
2
3

const $li = $('li')
console.log($li.odd().val()) // 2 获取选中第一个元素的value
$li.val(12)

jQuery对css的操作

.width()、.height()、.css(prppertyName) 获取选中第一个元素的指定样式属性值

.css(propertyName,value)、.css({propertyName1:value1,propertyName2，value2}) 为每一个匹配到的元素设置属性

jQuery对class的操作

.addClass(className)、.addClass(classNames)、.addClass(funcntion)

const $li = $('li')
$li.addClass(function(index){
    if(index%2===0){
        this.classList.add("active1")
    }else{
        this.classList.add("active2")
    }

}) // 通过this手动给选中的元素添加类
$li.addClass((index)=>{
    if(index%2===0){
        return "active1"
    }else{
        return "active2"
    }

}) // 通过返回类名，jQuery给元素添加类

.hasClass(className) 判断匹配到的元素是否分配了该类

const $div = $('div')
console.log($div.hasClass("active")) // true
console.log($div.hasClass("active list")) // true
console.log($div.hasClass("active div")) // false 该方法是判断所选中元素是否包含要查询的类的字符串

.removeClass()、.removeClass(className)、.removeClass(classNames)、.removeClass(function) 删除指定的类

.toggleClass()、.toggleClass(className[,state])、.toggleClass(classNames[,state]) 删除或添加指定的类

Ouwenwu

jquery