JQuery筛选器方法

1.下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

2.上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

3.父亲元素

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

4.儿子和兄弟元素

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

5.练习展示

    
    
    


111
222
div
    444
    
div>p
        div>p>span
    
    333

555
666

1.查找下面的同级标签第一个
$divEle.next()
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
2.查找下面同级标签以下所有标签
$divEle.nextAll()
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]
3.查找下面同级别标签第一个直到.p2为止(不包含最后一个)
$divEle.nextUntil('.p2')
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]

...

JQuery操作标签

1.操作类js与jq的对比

js原生版本														
classList.add()										
classList.remove()								
classList.contains()							
classList.toggle()								


jQuery版本
addClass()			: 添加元素
removeClass()		: 移出某个类属性	
hasClass()			: 验证是否包含某个类属性
toggleClass()		: 有则删除无则添加 

2.操作标签样式(链式操作)

.css('样式名','样式值')		style.样式名 = '样式值'

执行链式操作

$('p').first().css('color','green').next().css('color','blue')

'原理解析：'
1.jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
2.jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

链式操作在python中的本质

1.python代码实现链式操作本质

class MyClass(object):
    def func1(self):
        print('func1')
        // 必须要返回对象
        return self

    def func2(self):
        print('func2')
        return self
obj = MyClass()
obj.func1().func2()

2.jQuery链式操作的本质
对象在调用一个方法之后，对象还会返回回来，然后在调用其他方法，以此循环 jQuery本质。

3.位置操作

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

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
实际操纵练习

右侧滚动条距离顶部的长度
$(window).scrollTop()
7142.22216796875

$(window).scrollTop()
9920

$(window).scrollTop()
11475.5556640625

加了参数就是设置(回到顶部)
$(window).scrollTop(0)  
n.fn.init [Window]

$(window).scrollTop(500)
n.fn.init [Window]

4.尺寸操作

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

操作目标

p {
/*上 右 下 左*/
margin: 1px 2px 3px 4px;
padding: 4px 3px 2px 1px;
}

尺寸操作练习

1.文本高度
$('p').height() 
21

2.文本宽度
$('p').width()  
697

3.文本+padding 内高
$('p').innerHeight()  
27

4.文本+padding 内宽
$('p').innerWidth()   
702

5.文本+padding+border 边框(未设值)
$('p').outerHeight()  
27

6.文本+padding+border 边框(未设值)
$('p').outerWidth()   
702

5.文本操作

1.操作标签内部文本

js版本										
innerText	 : 操作文本											
innerHTML	 : 操作文件与标签 

jQuery版本
text()		: 括号内不加参数就是获取加了就是设置(只能操作文本内容)
html()		: 括号内不加参数就是获取加了就是设置(能操作文本与标签)
val()		：取得第一个匹配元素的当前值
val(val)	：设置所有匹配元素的值
val([val1, val2])：设置多选的checkbox、多选select的值

JQuery获取标签

$('div').text()
'要有所期待n    444n    div>pn        div>p>spann    n    333n'

$('div').html()
'要有所期待n    444n    
div>pn        div>p>spann    
n    333n'

text设置文本

$('div').text('我们都是Jason的大宝贝')
jQuery.fn.init [div#d2, prevObject: jQuery.fn.init(1)]

HTML设置文本

$('div').html('今天最开心的时刻就是转头的那一刻')
w.fn.init [div, prevObject: w.fn.init(1)]

$('div').text('
你们都是我的大宝贝
')
w.fn.init [div, prevObject: w.fn.init(1)]

$('div').html('
我一天天的比你们都紧张
')
w.fn.init [div, prevObject: w.fn.init(1)]

注意:jQuery与js文本规律相同

6.属性操作

js版本	
setAttribute()
getAttribute()											
removeAttribute()										

jQuery版本	
attr(name,value)	 : 设置属性(两个参数设置)
attr(name)			: 获取属性(一个参数获取)
removeAttr(name)	 : 移出属性

实操练习

使用变量接收p标签
let $pELe = $('p')
undefined

获取id属性值
$pELe.attr('id')
'd1'

获取class属性值为空(标签内没有calss属性)
$pELe.attr('class')
undefined

创建名为class的类属性值为c1
$pELe.attr('class','c1')
jQuery.fn.init(2) [p#d1.c1, p#d2.c1, prevObject: jQuery.fn.init(1)]0: p#d1.c11: p#d2.c1length: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

修改id属性
$pELe.attr('id','newd1')
jQuery.fn.init(2) [p#newd1.c1, p#newd1.c1, prevObject: jQuery.fn.init(1)]0: p#newd1.c11: p#newd1.c1length: 2prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

移出属性
$pELe.removeAttr('password')
jQuery.fn.init(2) [p#newd1.c1, p#newd1.c1, prevObject: jQuery.fn.init(1)]

获取p标签数据 
$('p')[0]

checkbox使用attr查询用户选择情况
针对选择按钮，checkbox radio option这些需要用户选择的，你在操作它的属性的时候，就不要使用attr。

1.查询id为d3的checked的选择情况           
$('#d3').attr('checked')  # 无效
"checked"
2.查询id为d2的checked的选择情况           
$('#d2').attr('checked')  # 无效
undefined
$('#d2').attr('checked')  # 无效
undefined
$('#d4').attr('checked')  # 无效
undefined
$('#d3').attr('checked')  # 无效
"checked"
3.给id为d3的checked并设置选择
$('#d3').attr('checked','checked')  # 无效
w.fn.init [input#d3]

对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop

专门针对选择按钮的参数解决以上无效问题
prop独有作用:
        用户选择	 :  True
        用户未选择    :  False

解决checkbox使用attr查询用户选择时(无效问题)

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")

    
    
    


d2
d3
d4

1.查询id为d2的选项是否选择
$('#d2').prop('checked')
false

2.查询id为d3查询的选项是否选择
$('#d3').prop('checked')
true

3.查询id为d4查询的选项是否选择
$('#d4').prop('checked')
false

4.prop设置值
$('#d3').prop('checked',true)
k.fn.init [input#d3]

5.prop取消值
$('#d4').prop('checked',false)
k.fn.init [input#d4]

prop和attr的属性

attr全称attribute(属性)
prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

总结一句话就是说，attr只能判断一些固定的死的，不能去判断动态的东西，像checked就属于动态的它不能够判断。prop就是专门的去做一些动态的判断例如：checked、redio、option。

7.文档处理

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

$(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()// 删除匹配的元素集合中所有的子节点。

克隆，了解知识（clone（））

事件

JQuery绑定事件

JS绑定事件
	标签对象.on事件名 = function(){事件代码}
   		btnEle.onclick = function(){alert(123)}
jQuery绑定事件
	方式1
        jQuery对象.事件名(function(){事件代码})
            $btnEle.click(function(){alter(123)})
	方式2
    	  jQuery对象.on('事件名',function(){事件代码})
        	  $btnEle.on('click',function(){alter(123)})
 	"""
 	有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
 	"""

常用事件

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

克隆事件

默认情况下只会克隆它的标签，不会克隆它的点击事件，所以只能第一个点击进行克隆，而后面克隆出来的不能进行点击克隆。但是如果想要更完美的克隆就是原封不动的全部克隆出来，就在clone()的括号里设置true

    
    
    
    


哇咔咔！

keydown和keyup事件组合

    
    
    





  

  

    
#
    
姓名
    
操作
  
  
  

  

    

    
Egon
    

      
        上线
        下线
        停职
      
    
  
  

    

    
Alex
    

      
        上线
        下线
        停职
      
    
  
  

    

    
Yuan
    

      
        上线
        下线
        停职
      
    
  
  

    

    
EvaJ
    

      
        上线
        下线
        停职
      
    
  
  

    

    
Gold
    

      
        上线
        下线
        停职
      
    
  
  

hover事件

    
    
    
    


哇咔咔！
压在我头上是吧

监听事件

阻止后续事件执行

能够触发form表单提交数据动作的标签有两个
	 
  	 
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
	我们也可以让标签之前的事件不执行
    	return false

$(':submit').click(function (e){
            alert('一定要细心 千万不要慌!!!')
            // return false  方式1
            e.preventDefault()方式2
        })

    
    
    
    



    username: 

点我

冒泡事件
涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行

    
    
    
    


div
    
div>p
        div>p>span
    

事件委托

"""
创建标签的两种方式
	JS
		document.createElement()
	jQuery
		$('')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('委托事件啦')
        })

将div标签里的所有点击事件都委托给button标签执行

上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)