jq是一个第三方的库文件
是其他团队 把js一些繁琐的操作封装成了一个个的方法 放到一个单独的js文件里面
然后把源代码开发出来 我们拿过来直接引入即可使用
jq的特点
隐式迭代
链式编程
jq的入口函数:
$(function(){
})功能和window.onload类似
jq的基本使用
jq是通过$('选择器')选择指定的元素
返回的是伪数组
console.log($('#box'));
$('ul>li').html('设置内容')//隐式迭代
jq的过滤选择器的使用
:even 匹配索引值为偶数的元素
:odd 匹配索引值为奇数的元素
:first 匹配第一个元素
:last 匹配最后一个
:gt(索引值) 找到比当前索引值还大的所有元素
:lt(索引值) 找到比当前索引值还小的所有元素
:eq(索引值) 找到指定索引值的元素
jq的筛选选择器
JQ的筛选选择器:
相当于原生JS的节点访问关系
获取父节点:
原生JS的属性名: 节点对象.parentNode
JQ的:
JQ对象.parent()
获取子节点:
原生JS的:
节点对象.children
节点对象.childNodes
JQ的
JQ对象.children([选择器]) []表示当前参数选择器 可传可不传
获取所有子节点 或者 按照参数选择器获取子节点
JQ对象.find(选择器) 选择器必传
获取选择器选择的后代元素
获取兄弟节点:
原生JS的:
节点对象.previousElementSibling
节点对象.nextElementSibling
JQ的:
JQ对象.prev() 获取上一个兄弟
JQ对象.next() 获取下一个兄弟
JQ对象.prevAll() 前面所有兄弟
JQ对象.nextAll() 后面所有兄弟
JQ对象.siblings([选择器]) 获取所有兄弟 参数可选
不传表示获取所有兄弟
传选择器表示获取指定选择器的兄弟
获取指定元素
JQ对象.first() 在选择器关联的一堆元素中找第一个
JQ对象.last() 在选择器关联的一堆元素中找第最后一个
JQ对象.eq(索引值) 在选择器关联的一堆元素中找到指定索引值的元素
jq对象和js对象的相互转换
JQ对象转换成原生JS对象
JQ对象.get(索引)
或者
JQ对象[索引]
原生JS对象转换成 JQ对象
$(原生JS对象)
jq的css方法
JQ的CSS方法操作样式
1. 增加单个样式
JQ对象.css("键","值")
2. 增加多个样式
JQ对象.css({
css属性名和css属性值的集合
})
3.修改样式 (跟增加样式一样)
4. 获取样式的值
JQ对象.css("css属性名")
外链,内嵌,行内样式的值都可以获取
css方法操作的样式都是行内样式
jq操作class的方法
增加
JQ对象.addClass("类名1 类名2 ...")
删除
JQ对象.removeClass("类名1 类名2 ...")
判断是否拥有指定class
JQ对象.hasClass("类名")
切换class
JQ对象.toggleClass("类名1 类名2 ...")