jQuery

使用：

1、链接外部的库

2、写入入口函数

3、逻辑功能

获取元素

$(function () {

console.log($('div'));

console.log($('#box'));

console.log($('.div'));

console.log($('div p'));

console.log($('#box>p'));

})

注意：

如果是js的方式获取到元素是 dom 对象 如果是使用jquery的方式获取到元素是 jquery对象 dom 对象不能使用jquery的方法 jquery对象不能使用 dom 对象的方法

dom 对象可以转换成 jquery对象jquery对象可以转换成 dom 对象 -- $('div')[0] / $('div').get(0)

添加样式

$('.div').css('background', 'blue')

$(box).css('background', 'blue')

层级选择器

子代选择器$('ul > li') 获取儿子不会获取孙子元素

后代选择器$('ul li') 获取子子孙苏

兄弟选择器$('p + ul') p元素紧紧挨着的ul元素

所有兄弟元素$('p~ul') p元素后面所有的ul兄弟元素

筛选选择器

$('li:first') 获取第一个元素

$('li:last') 获取最后一个元素

$('li:eq(index)') 获取当前索引号（下标）的元素

$('li:odd') 奇数 --按照下标

$('li:even') 偶数--按照下标

$('li:gt(2)') 索引大于2的元素不包含2下标

$('li:lt(2)') 索引小于2的元素不包含2下标

排他思想 选项卡案例

$('button').click(function () {

// $(this).css('background', 'red')

// $(this).siblings('button').css('background', '')

​

// 链式编程

$(this).css('background', 'red').siblings('button').css('background', '')

})

案例 下拉菜单

$('.nav>li').mouseover(function () {

$(this).children('ul').show()//显示

})

​

$('.nav>li').mouseout(function () {

$(this).children('ul').hide()//出现

})

属性过滤选择器

​

<ul>

<lititle="属性">多个里面筛选几个</li>

<lititle="就业">多个里面筛选几个</li>

<lititle="t属性">多个里面筛选几个</li>

<liclass="tbox">多个里面筛选几个</li>

<lititle="b">多个里面筛选几个</li>

<lititle="b就业">多个里面筛选几个</li>

</ul>

​

$('li[title]').css('background', 'red') // 得到所有的title属性

$('li[title=就业]').css('background', 'blue') // 得到所有的title属性 且属性值是 就业

$('li[title !=就业]').css('background', 'green') // 得到所有的title属性 且属性值不是 就业

$('li[title^=t]').css('background', 'orange') // 得到所有的title属性 以 t 开头

$('li[title$=业]').css('background', 'orange') // 得到所有的title属性 以 t 结尾

$('li[title*=b]').css('background', 'black') // 得到所有的title属性 且属性包含 b 的

​

表单选择器

​

console.log($(':input')); // 获取所有input的元素

console.log($(':text')); // 获取 type=text的input框

节点遍历

$('#box').children().css('background', 'red')//选择#box里面的所有元素

$('#box').children('span').css('background', 'blue')//选择#box里面的span标签

$('.title').next().css('background', 'green')//.title下面的一个

$('.title').prev().css('background', 'green')//.title上面的一个

find() filter() not()

$('ul').find('li').css('background', 'green')//找到li

$('li').filter('.title').css('background', 'green')//过滤.title

$('li').not('.title').css('background', 'green')//除了.title

属性操作

元素固有属性值 prop() --- 注意：除了可以操作普通属性 更适合用于操作 input 的属性

获取属性的方法：

元素.prop('属性')

​

​

​

​

<ahref="https://http:www.baidu.com"title="都挺好">苏大强</a>

<inputtype="text"checked>

<divindex="1"data-index="2">我是div</div>

<span>123</span>

​

console.log($('a').prop('href'));

设置属性：

元素.prop('属性', '属性值')

console.log($('a').prop('title', '我们的都挺好'));

$('input').change(function(){

console.log($(this).prop('checked'));

})

console.log($('div').prop('index'));

元素自定义属性值

attr()除了普通属性 更适合操作自定义属性 也可以获取到H5中自定义属性

attr()

获取属性:

元素.attr('属性') --类似getAttribute()

​

console.log($('div').attr('index'));

设置属性 修改属性

元素.attr('属性', '属性值') --类似setAttribute()

console.log($('div').attr('index', '123'));

console.log($('div').attr('data-index', '123'));