目录
01 jquery概述
jq是一个第三方的库文件
是其他团队 把js一些繁琐的操作封装成了一个个的方法 放到一个单独的js文件里面
然后把源代码开发出来 我们拿过来直接引入即可使用
js代码:
<button>点我显示</button>
<ul id="box">
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
</ul>
<script>
var btn=document.querySelector('button')
var box=document.querySelector('#box')
btn.onclick=function(){
box.style.display='block'
}
</script>
jq代码:
<button>点我显示</button>
<ul id="box">
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
<li>十年生死两茫茫，喜羊羊，灰太狼。1</li>
</ul>
<script src="./jquery.js"></script>
<script>
$('button').click(function(){
$('ul').show(3000)
})
</script>02 jq的特点和基本操作
1.特点:
1.隐式迭代 (系统自己悄悄的遍历 然后把要设置的内容设置上)
2.链式编程
jq的入口函数:
$(function(){
}) 功能和window.onload类似
2. jq的基本操作:
jq是通过$('选择器') 选择指定的元素
返回的是伪数组
$('ul>li').html('设置内容') //隐式迭代
03 jq的过滤选择器
jq过滤选择器的使用
:even 匹配索引值为偶数的元素
:odd 匹配索引值为奇数的元素
:first 匹配第一个元素
:last 匹配最后一个元素
:gt(索引值) 找到比当前索引值还大的所有元素
:lt(索引值) 找到比当前索引值还小的所有元素
:eq(索引值) 找到指定索引值的元素
04 jq的筛选选择器
jq的筛选选择器: 相当于原生js的节点访问关系
获取父节点:
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对象.Sibling([选择器]) 获取所有兄弟 参数可传
不传表示获取所有兄弟
传选择器表示获取指定选择器的兄弟
获取指定元素:
jq对象.first() 在选择器关联的一堆元素中找第一个
jq对象.last() 在选择器关联的一堆元素中找最后一个
jq对象.eq(索引值) 在选择器关联的一堆元素中找到指定索引值的元素
05 jq对象和js对象的相互转化
jq对象和js对象的相互转换:
jq对象转换成原生js对象
jq对象.get(索引值)
或者
jq对象[索引值]
原生js对象转换成jq对象
$(原生js对象)
06 jq的css方法
jq的css方法操作样式
1.增加单个样式
jq对象.css("键","值")
2.增加多个对象
jq对象.css({
css属性名和css属性值的集合
})
3.修改样式 (跟增加样式一样)
4. 获取样式的值
jq对象.css("css属性名")
外链,内嵌,行内样式的值都可以获取
css方法操作的样式都是行内样式
07 jq的class方法
jq增加class的方式
增加 : JQ对象.addClass("类名1 类名2 ...")
删除 : JQ对象.removeClass("类名1 类名2 ...")
判断是否拥有指定class:
jq对象.hasClass('类名')
切换class:
jq对象.toggleClass("类名1 类名2 ...")
