day47 jquery

原生的js对象（标签对象）与jQuery对象的相互转换

$() 查找的都是一个数组的形式（内部才是一个个的原生js对象）

原生的js对象如何转成jQuery对象，

$(原生js对象)

查找标签

基本筛选器

:first	//第一个
:last	//最后一个
:eq(index)	//索引等于index的那个元素
:even	//匹配索引索引值为偶数的元素，从0开始计数
:odd	//匹配索引值为奇数的元素，从0开始
:gt(index)	//匹配索引大于给定索引值的元素
:lt(index)	//匹配索引小于给定索引值的元素
:not(元素选择器)	//移除所有满足not条件的标签
:has(元素选择器)	//选取所有包含一个或者多个标签在其内的标签（指的是从后代元素找）

$('ul li:first')
$('ul li:last')
$('ul li:eq(1)')
$('ul li:even')
$('ul li:odd')
$('ul li:gt(3)')
$('ul li:lt(3)')
$('ul li:not(".c1")')
$('ul:has(".c1")')

属性选择器

[attribute]	
[attribute=value]
[attribute!=value]
obj[attribute]

$('[username]')
$('[username="jason"]')
$('span[username="jason"]')

表单筛选器

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

$('[type="text"]')
$('[type="password"]')
$(':text')  //指适用于表单  表单筛选器  省略了type
$(':password')
$(':file')
$(':button')
$(':checked'))	//不仅会找到input里checkbox的默认 还会找到select里option的默认 
<!--novalidate取消前端给你做的校验功能:详见 django forms组件-->

筛选器方法

下一个元素

$('#id').next() //下一个
$('#id').nextAll()	//下面所有
$('#id').nextUntil('#i2')	//下面...直到..为止

$('span')
var $panEle=$('span')[2]
$($panEle).next()
$($panEle).nextAll()
$($panEle).nextUntil('#d2')//不包含until里面的值

上一个元素（同一级别的）

$('#id').prev()	//上一个
$('#id').prevAll()	//上面所有
$('#id').prevUntil()	//上面...直到。。为止

父亲元素

$('#id').parent()	//父亲
$('#id').parents()	//查找当前元素的所有父辈元素
$('#id').parentsUntil()	//查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

儿子和兄弟元素

$('#id').children()	//儿子们
$('#id').siblings()	//兄弟们

查找 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

$('div').find('p')  //等价于 $('div p') 找的是后代

筛选 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配范围。用个逗号隔开多个表达式出有出

$('div').filter('c1')	//从结果集中过滤c1样式类的	等价于$('div.c1')

补充：

.first()	//获取匹配的第一个元素
.last()		//获取匹配的最后一个元素
.not()		//从匹配元素的集合中删除与指定表达式匹配的元素
.has()		//保留包含特定后代的元素，去掉那些不含有指定后代的元素
.eq()		//索引值等于指定值的元素

$('div span').first() 等价  $('div span:first')

操作标签

样式操作

样式类

addClass()	//添加指定的css类名
removeClass()	//移除指定的css类名
hasClass()		//判断样式存不存在
toggleClass()	//切换css类名，如果有就移除，没有就添加

$('div').removeClass('bg_red')
$('div').addClass('bg_red')
$('div').hasClass('bg_red')
$('div').toggleClass('bg_red')

css

css('color','red') 	//DOM操作：tag.style.color='red'

$("p").css("color", "red"); //将所有p标签的字体设置为红色

位置操作

offset()	//获取匹配严肃在当前窗口的相对偏移或设置元素位置
position()	//获取匹配元素相对父元素的偏移
scrollTop()		//获取匹配元素相对滚条顶部的偏移
srcollLeft()	//获取匹配元素相对滚动条左侧的偏移

尺寸

height()	//文本
width()
innerHeight()	//文本+内部
innerWidth()
outerHeight()	//文本+内部+边框
outerWidth()

文本操作

HTML代码

html()	//取得第一个匹配元素的html内容
html(val)	//设置所有匹配元素的Html内容

文本值

text()	//取得所有匹配元素的内容
text(val)	//设置所有匹配元素的内容

值

val()	//取得第一个匹配元素的当前值
val(val)	//设置所有匹配元素的值
val([val1,val2])	//设置多选的CheckBox，多选select的值

$('div').text()    //不加参数就是获取，加了参数就是赋值
$('div').html()
$('div').text('好痛')
$('div').html('<h1>好痛</h1>')
$('input').val()
$('input').val('哈哈哈')

属性操作

用于ID等或自定义属性：

attr(attrName)	//返回第一个匹配元素的属性值
attr(attrName,attrValue)	//为所有匹配元素设置一个属性值
attr({k:v,k:v})	//为所有匹配元素设置多个属性值
removeAttr()	//从每个匹配的元素中删除一个属性

用于CheckBox和radio

注意：我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

prop()	//获取属性
removeProp()	//移除属性

$('p').attr('id')
$('p').attr('username','jason')
$('p').attr({'password':123,'hobby':'study'})
$('p').removeAttr('hobby')
$('input').first().attr('checked','checked')
$('input').first().prop('checked','checked')
$('input').first().prop('checked',false)

总结：对于标签上能看得到的属性和自定义属性都用attr

对于返回布尔值比如CheckBox radio option是否选中都用prop

文档处理

添加到指定元素内部的后面

$(A).append(B)	//把B追加到A
$(A).appendTo(B)	//把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)	//把B前置到A
$(A).prependTo(B)	//把A前置到B

添加到指定元素外部的后面

$(A).after(B)	//把B放到A的后面
$(A).insertAfter(B)	//把A方法B后面

添加到指定元素外部的前面

$(A).before(B)	//把B放到A的前面
$(A).insertBefore(B)	//把A放到B的前面

移除和清空元素

remove()	//从DOM中删除所有匹配的元素
empty()		//删除匹配的元素集合所有的子节点

替换

replaceWith()
replaceAll()

克隆

clone() //默认克隆的没有事件  参数为true就可以了

事件

常用事件

click(function(){})
hover(function(){})
blur(function(){})
focus(function(){})
change(function(){})
keyup(function(){})

事件绑定

第一种：
$(选择器).事件名(function(){
    事件代码
})
第二种：最广
$(选择器).on('事件名'，function(){
    事件代码
})

阻止后续事件执行

return fslse;//常见阻止表单提交等
e.preventDefault()

阻止事件冒泡

e.stopPropagation()

页面载入

第一种：
$(document).ready(function(){
    代码
})
第二种：
$(function(){
    代码
})
麻烦死了 直接写在body最下面

事件委托

事件委托是通过事件冒泡原理，利用父标签去捕获子标签的事件

$('body').on('click','button',function () {
         alert(123)
     })

$('ul li:first')
$('div span:not('.c1')') 条件
$(div:has('.c1'))
$('[username]')
$('[usename="jason"]')
$('span[usename="jason"]')
<form action="" novalidate  entype></form>
novalidate 取消前端给你做的校验功能

$(':text')  指适用于表单  表单筛选器  省略了type

bug:$(':checked')会找到select checkbox的默认 
$('unout:checked')