juqery学习笔记（一）

jquery在书写了多个$(function(){})入口函数后，后者不会覆盖前者

原生js的window.οnlοad=function(){}最后一个会覆盖前者

当jQuery中的$与其他框架冲突时，可以使用jQuery.noConflict()将$释放，以后就使用jQuery来代替原有的$

$() jQuery的核心函数，（）中可以接收元素

1、接收一个函数=> $(function(){})

2、接收一个字符串选择器=>$(’.box1’)

3、接收一个字符串代码 let $p=$(‘

我是段落

’)

4、接收一个dom元素，将其转化为jquery元素let $p=$§

方法分两类

静态方法：定义在构造函数中的方法

实例方法：定义在构造函数实例中的方法

$.each(arr,function(index,value){})

jQuery的each方法可以用来遍历伪数组

$.map(arr.function(index,value))

map静态方法也可以用来遍历伪数组

$.map可以在回调函数中通过return对原数组进行操作，将return后的值传入数组中

let result=$.trim(str)：返回一个值，该值为str去除空格后的值

判断符号

$.isarry

$.isfunction

$.iswindow

$(‘div:empty’):选中的div中没有子元素和文本的

$(‘div:parent’):选中的div中有子元素或者文本的

$(div:contains(“我是123”)):找到包含指定文本内容的指定元素

$(div:has(‘span’)):找到包含指定子元素的指定元素

属性节点是doom元素上的attribute上的内容

可以使用setAttribute和getAttribute

$(‘选择器’).attr(‘name’),获取jquery对象数组中第一个对象的name值

$(‘选择器’).removeAttr(‘name title’)删除所有jQuery对象的name和title属性

$(‘选择器’).prop(‘name’)获取对象的属性，用法与attr类似

$(‘选择器’).removeProp(‘name title’)

prop也可以直接用来获取属性节点，当属性节点中含有check，select和disable时，如果需要返回布尔类型的值，那么需要使用prop，否则一般使用attr来获取属性节点

给对象添加class属性

$(‘选择器’).addClass()

$(‘选择器’).removeClass()

$(‘选择器’).toggleClass()

$(‘选择器’).html()与原生innerhtml一致

$(‘选择器’).text()

$(‘选择器’).val()

$(‘选择器’).css()修改、添加样式

可以使用json(对象的形式)进行批量设置

$(‘选择器’).css({

width:100px,

heigh:100px,

backgroundcolor:black

})

$(‘选择器’).width（）

$(‘选择器’).height（）

$(‘选择器’).offset().left

$(‘选择器’).position().left position只能查询不能修改

在函数中用来取消冒泡和默认行为

event.stopPropagation()

event.preventDefault()/return false

使用trigger和triggerHandler可以自动触发函数

$(’.box1’).trigger(‘click’)

$(’.box1’).triggerHandler(‘click’)

两者之间的不同

trigger会触发事件的冒泡以及默认行为，

triggerHandler不会触发事件冒泡和默认行为

自定义事件

1、定义事件时候必须使用$(‘选择器’).on(‘自定义事件’,function(){})

2、事件必须通过trigger/triggerHandler来触发

自定义事件拓展（事件命名空间）

1、事件是通过on来绑定的

2、通过trigger来触发事件

eg:

$(’.box1’).on(‘click1’,function(){alert(‘click1’)})

$(’.box1’).on(‘click2’,function(){alert(‘click2’)})

当一个元素同时绑定了两个相同的响应函数就可以使用自定义事件来确定需要触发的事件

$(’.box1’).trigger(‘click1’)

事件的委托（delegate）

使用（‘ul’）.delegate(‘li’,‘click’,function(){})方法可以将事件委托给父元素ul，这样即使有新增的子元素li也会触发函数

$(‘选择器’).mouseenter/mouseleave不会因为移入子元素产生冒泡而影响父元素的行为（与原生的onmouseover/onmouseout做对比）

mouseenter和mouseleave可以使用hover()来整合

$(‘选择器’).hover(function(){},function(){})内部可以接收两个函数，当移入的时候触发第一个函数，移出的时候触发第二个函数