使用:
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'));