JQuery

Jquery

是一个JS的函数库，封装了JS常用的功能代码 写更少的代码实现更多的功能

$:顶级对象

使用步骤：

1、链接外部的库

2、写入入口函数

window.οnlοad=function(){}//结构 样式 图片 链接等等

$(function(){

//标签结构加载完成就可以

})

3、逻辑功能

获取元素

console.log($('div'));//标签

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

console.log($('.div'));//类名

console.log($('div p'));//后代

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

//JS方法获取的元素是dom对象 不能使用jquery的方法

//jquery的方法获取的元素是jquery对象 不能使用dom对象的方法

//dom对象可以转换成jquery对象-- $(div).css('属性名','属性值')

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

基础选择器：

id class 元素 并集(div,p,ul,li) 交集(li.current)

层级选择器

子代选择器：$('ul > li')

后代选择器: $('ul li')

兄弟选择器: $('p + ul')

所有兄弟元素: $('p ~ ul')

筛选选择器

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

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

$('li:eq(index)')//获取当前下标的元素

$('li:odd')//获取奇数 --下标

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

$('li:gt(2)')//获取下标大于2的元素

$('li:lt(2)')//获取下标小于2的元素

方法筛选

$('li').parent()//查找父级

$('ul').children('li')//想到与子代选择器

$('ul').find('li')//相当于后代选择器

$('.first').siblings('li')//查找所有兄弟节点 不包括自己

$('.first').nextAll()//查找后面所有同辈元素

$('.first').prevAll()//查找前面所有的同辈元素

属性过滤选择器

$('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 的