<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript" src='./jquery.min.js'></script>
**使用jquery就引用jquery**
通常用$代替，当然也可以写成jQuery，不过没有$方便。
1选择器
$('tag')获取所有的标签名
$('.class')获取所有的class类名
$('.id')获取id是什么的，只能获取一个
$('tag tag1')获取tag下边的所有tag1
$('tag>tag1')获取tag的子元素中的tag1
$('tag>tag1:nth-child(n)')获取tag的子元素中的tag1第几个
$('tag1:nuh-child(odd)')获取tag1的奇数个
$('tag1:nth-child(even)')获取tag1的偶数个
$('tag>tag1:last-child')获取tag下边的tag1的最后一个
$('tag>tag1.class')获取tag下tag1类名为class的标签
$('tag1:first') tag1的第一个
$(tag1：last) tag1的最后一个
$('tag1:eq(n)') tag1中的索引的第n个
$('tag1:odd') tag1元素中索引为奇数的
$('tag1:even') tag1元素中索引为偶数的
**2筛选器：**
first()第一个
$('tag').first() 获取tag下的第一个
last()最后一个
$('tag').last() 获取tag下的最后一个
eq(n) 索引为n的
$('tag').eq(n) 获取tag中索引为n 的那个
next()元素的下一个兄弟元素
$('tag').next() 获取tag的下一个兄弟
nextAll()所有的兄弟元素
$('tag').nextAll()获取tag的下个所有的兄弟元素
nextUntil(选择器)
$('tag').nextUntil(.class) 获取tag的下所有的兄弟元素，直到class名
prev() 元素的上一个兄弟元素
$('tag').prev() 获取tag的上一个元素
prevAll() 上边所有的兄弟元素
$('tag').prevAll() 获取上边的所有兄弟元素
prevUntil(#id) 上边所有兄弟元素，直到id为止
$('tag').prevUntil('#id') 获取tag 下边的所有兄弟元素，直到id为止
parent() 父元素
$('tag').parent() 获取tag的父元素
parents() 所有的祖先元素，到html为止
$('tag').parents() 获取tag的所有祖先元素
parentsUntil(选择器) 所有的祖先元素，直到body
$('tag').parentsUntil('body') 获取所有的祖先元素，直到body
children()所有的子元素
$('tag').children() tag下边的所有子元素
siblings() 除了自己以外的所有兄弟元素
$('tag').siblings() 获取除了tag的所用兄弟元素
index()索引下标的位置
$('tag').index() 获取tag 的索引下标位置
find(选择器)查找元素
$('tag').find('.class') 查找tag 中的 .class
**3操作文本**
原生js 操作是innerHTML
innerTEXT
value
jquery操作是
html()
text()
val() --用于input框
三者之间传参数情况下都是可改变能获取到的元素
不同的是不传参数的时候text可以获取全部的，html和val只能获取第一个
$('tag').html()
$('tag').html('参数')
$('tag').txet()
$('tag').text('参数')
$('tag').val()
$('tag').val('参数')
**4操作类名**
addClass() 添加类名
removeClass() 移除类名
toggleClass() 切换类名
hasClass() 判断有没有类名
一般用在点击事件里面
$('.tag').click(function(){
$('tag').addClass('box')
})
**5操作css样式 可以传对象也可以单独设置**
$('tag').css({
width:100,
hright:100,
float:'left'
})
<!-- 链式编程写法 -->
$('tag').css('width',200).css('height',200)
**6jquery操作元素属性的方法**
attr() 添加属性 removeAttr() 删除属性
当传一个参数的时候是读取属性名('number') ，传递两个参数的时候是设置(id,box)
prop()添加属性 removeProp()删除属性
但是不能删除原生的属性 id class style 只能删除prop设置的
当传一个参数的时候是读取属性名('number') ，传递两个参数的时候是设置(id,box)
data() remmoveData()
当传一个参数的时候是读取属性名('number') ，传递两个参数的时候是设置(id,box)
es5标准的自定义属性：data-id
**7绑定事件**
on()方法
on('事件类型',事件处理函数)
--元素所有集合内所有的元素绑定一个事件
$('li').on('click',function(){
console.log(‘点击了li’)
})
on('事件类型'，'事件委托'，'事件处理函数')
--把事件委托位置的事件,委托给前面的集合
$('ul').on('click','li',function(){
console.log('事件委托')
})
on('事件类型','复杂数据类型','事件处理函数')
--给每一个元素绑定事件，复杂数据类型是触发事件的时候传递的参数
$('li').on('click',{name:'jack',age:12},function(e){
console.log('li的点击事件，都可以得到点击的对象'+e)
})
on('事件类型','事件委托','任意数据类型','事件处理函数')
--第三个参数，是触发事件的时候，可以传递进去的数据
$('ul').on('click','li','key',function(e){
console.log(e+)
})
on(对象)
--给一个元素绑定多个事件
one()方法，是专门用来绑定一个只能执行一次的方法
$('div').one('click',function(){
console.log("one只能执行一次")
})
off() 方法是专门用来解绑一个元素的事件的 on one 的都可以解绑
两种方法；off('事件类型')：给该事件类型的所有事件处理函数解绑；
off('事件类型'，'事件处理函数')：解绑指定事件处理函数
function handlerA(){
console.log('处理函数handlerA')
}
<!-- 点击了ul的触发事件 -->
$('ul').on('click',handlerA)
$('ul').one('click',handlerB)
<!-- off移除事件 -->
$('ul').off('click',handlerA)
trigger()专门用来触发事件且不用点击直接触发的
$('ul').trigger('click')
hover() 事件 移入移出的时候都会被触发 且hover不传参
$('ul').hover(
function(){console.log('移入移出都会被触发')}
)
</body>
<!--用jquery写tab选项卡
css样式自己调整。div ul>li ol>li
思路：1获取的ul下的所有li 的点击事件
$('ul>li').click(function(){
$(this).addClass('active') 2 点击的li添加类名 ，其他兄弟没有类名
.siblings().removeClass('active')
3 获得ol下边的所有li
$('ol>li')
.removeClass('active')先移除他们的类名
.eq($(this).index()) 找到第几个，和点击的li索引对应
.addClass('active') 添加类名
})
-->
