jQuery的使用

入口函数

jQuery中的入口函数$(document).ready(function(){})、$(function(){})

JS中的入口函数：window.onload = function(){}

两者之间存在的异同：

1. jQuery中的入口函数比JS中的函数先执行，如下代码依次在控制台打出jQuery入口函数、js入口函数

window.onload = function() {
    console.log('js入口函数')
}
$(function() {
    console.log('jQuery入口函数')
})

jQuery中的入口函数，在DOM树加载完成就执行，js入口函数等到所有的资源加载完毕就开始执行。

2. jQuery中的入口函数可以是多个，js入口函数会覆盖

DOM对象和jQuery对象的相互转换

jQuery对象是指通过jQuery函数创建出来的对象，DOM对象是指通过原生API创建出来的对象

jQuery中的选择器

:eq(index) :在获取到的li中寻找到索引值为index的元素

//在id为site 中寻找后代第2个li元素
$('#site li:eq(2)')

:odd:符合条件的中奇数的jQuery对象

$('li:odd')

:even:获取符合条件的偶数的

:first:符合条件中的第一个

last:符合条件中的最后一个

筛选选择器

1. children('selector'):获取当前元素的所有的子元素的选择器，可以不传递参数
2. find('selector'):获取当前元素中的后代元素，可以不传递参数
3. siblings('selector')：查找兄弟节点不包括自己，可以不传递参数
4. parent():查找父节点
5. eq(index):查找符合条件的第index个元素
6. next():获取元素中的下一个兄弟元素
7. prev():获取元素中的上一个兄弟元素

$('ul').children('li')
//获取ul中的所有的子代中的所有li元素

jQuery中的样式操作

1. css操作

• 设置单个样式css(name,value)
• 设置多个样式css({name,value})
• 获取样式css('background'):获取元素只会返回第一个元素的值

//设置单个样式
$('ul').css('background','gray')
//设置多个样式
$('ul).css({
    background:'gray',
    fontSize:'14px'
})
//获取属性值
$('ul').css('background')

2. class操作

• 添加类名：addClass('className')不会覆盖原来的类名
• 移除类名：removeClass('className')
• 判断是否存在某个类名：hasClass('className')
• 切换类名：toggleClass('className'):判断是否有该类名，如果存在就移除该类名，如果不存在就删除该类名

3. attr获取属性

• 设置单个属性attr(name,value)
• 设置多个属性attr({name1,value1,name2:value2})
• 获取属性：attr(name)
• 移除属性：removeAttr(name)

//设置单个属性
$('img').attr('title','图片')

prop对属性进行修改 在jQuery 1.6之后对于checked、selected、disabled这类布尔属性不能使用attr方法，只能使用prop方法

$(":checked").prop('checked',true)   //设置
$(':checked').prop('checked')        //获取

4 .特殊属性操作

• val() val()方法用于设置和获取元素的表单的属性

$('#name').val('提交')
$('#name').val()          //获取表单元素的值

5. html()与text()方法

$('div').html()   //获取内容
$('div').html('<span>span中的内容</span>')

jQuery节点操作

1. 创建节点$(htmlStr)

$("<span>span元素</span>")

2 添加元素append、appendTo、prepend、prependTo、before、after

3.清空节点 empty() 清空元素的子节点 remove() 删除自身以及元素的子节点 clone(true):复制元素 true表示深度复制，元素的事件也会被复制

4. each() 给不同元素设置不同的操作