【前端】jQuery常用基础知识点总结

jQuery概念：

入口函数：

jQuery选择器：

样式操作：

属性操作：

特殊动画：

事件：

事件冒泡：

事件委托：

jQuery中的DOM操作：

jQuery概念：

JQuery: JavaScript Query; 这是js的一个函数库。(完全由js封装写成的一个js文件)

优点: 简单易用，链式编程隐式迭代。

缺点: 方法冗余。

链式编程：实际就是执行完某一个函数后，返回它本身，然后继续调用

隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

入口函数：

原生js：

window.onload = function(){}

jQuery中：

$(function(){alert('有了这个方法，就可以获取下面的标签了，写法dollar符+括号+在括号中写function')
})

$(document).ready(function(){})

$(window).ready(function(){})

JQuery对象就是通过$()获取到页面标签。

$()获取的对象，里面有JQuery自己封装好的方法，原生js没有。

JQuery想要操作标签，底层还是要调用原生js自己的方法。

jQuery选择器：

1.普通获取方法：

标签：标签直接写$('标签名')

id:id值前面加#，$('#id值')

类：类前加点,$('.类名')

层级：空格，$('#box1 li p')

2.比较特殊的选择器

name:如果一个li标签的name属性=demo，$('li[name=demo]')

has:如果一个li标签中有一个p标签，$(li).has('p')

eq:通过索引获取，$('li').eq(标签对应的索引值，从0开始)

($('#li3').prev());//选择id是li3的元素前面紧挨的同辈元素

($('#li3').prevAll());

($('#li3').next());//选择id是li3的元素后面紧挨的同辈元素

($('#li3').nextAll());

($('#li3').siblings());//选择id是li3的元素的同级元素（兄弟们，不包括自己）

($('#li3').parent());//选择id是li3的元素的父元素

($('#li3').children());

($('#ul1').find('.li4'));//选择id是ul1的元素内的class等于.li4的元素（后代标签，子子孙孙）

($('#li3').index());// 元素在父盒子中，所有子元素排列对应的索引值

样式操作：

①style-->css()

一个参数: 获取属性

$('div').css('width')

两个参数：设置属性

$('div').css('width', '350px')

通过一个字典形式的参数：进行设置

var set = {'width':666, 'height':600, 'background':'gold'}

$('div').css(set)

②通过操作class类名，来达到操作样式的目的，如下：

<div class="box div bbb"></div>

$('div').addClass('aaa') // 添加类(类及类的样式，这里的aaa可以在style中通过类名，设置属性)

$('div').removeClass('box') // 删除类

$('div').toggleClass('lili') // 事件触发，无变有有变无（循环变化）

可以联系选项卡案例，点击谁就给谁添加xx类，siblings其它去掉xx类。

属性操作：

1.普通属性：attr(); id/title/src/href/name...

将input的name属性设置为‘setset’

$('input').attr('name', 'setset')

2.表单属性：prop(); selcted/checked/disabled

$('option').eq(1).prop('selected', true) //将索引为1的option设置为选中，false为不选中

3.特殊属性innerHTML/className/style/value...

原生js	jQuery语法
innerHTML	html()
className	addClass() removeClass() toggleClass()
style	css()
value	val()

animate参数：

参数一：要改变的样式属性值，写成字典的形式

参数二：动画持续的时间，单位为毫秒，一般不写单位

参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动

参数四：动画回调函数，动画完成后执行的匿名函数

$('.class1').animate(obj, 2000, 'swing', function(){// 回掉函数才是真正的执行完毕自定义函数后，在执行的逻辑。alert('程序执行完毕才执行的我')})

特殊动画：

1.show()/hide()/toggle()显示隐藏，参数为（毫秒值，回调函数）

$('div').hide(1000,)

$('div').show(1000,function(){

alert('show ok')

})

切换

$('div').toggle(1000,)

2.滑入滑出

$('div').slideUp(1000)

$('div').slideDown(1000)

$('div').slideToggle(1000)

3.淡入淡出

$('div').fadeOut(1000)

$('div').fadeIn(1000)

$('div').fadeToggle(1000)

半透明程度：必须传递时间

// $('div').fadeTo(2000,0.3)

事件：

click() 鼠标单击

mouseover() 鼠标进入（进入子元素也触发）

mouseout() 鼠标离开（离开子元素也触发）

mouseenter() 鼠标进入（进入子元素不触发）

mouseleave() 鼠标离开（离开子元素不触发）

hover() 同时为mouseenter和mouseleave事件指定处理函数

ready() DOM加载完成

submit() 用户递交表单

*取消浏览器默认行为：

return false;

event.preventDefault()

表单校验中的控制器思想：设置几个全局变量，默认是false，如果通过正则改为true，在校验时设置一个变量：为几个控制器的与条件，判断是否提交

var bool1 = false;

var bool2 = false;

var bool3 = false;

var bool4 = false;

var bool5 = false;

var flag = bool1 && bool2 && bool5;if (flag == false){// 没有通过，取消提交// return false;event.preventDefault();}

事件冒泡：

事件是可以传播的，子元素的事件被触发，父系元素的同类事件也会被触发。

阻止冒泡：return false;或event.stopPropagation();

事件委托：

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

如：让ul中新创建出来的li全都具有click属性

方法一：delegate

$('ul').delegate('li', 'click', function(){alert(555)})

方法二：on

$('ul').on('click', 'li',function(){alert(666)})

jQuery中的DOM操作：

1.创建

方法一：

var $newLi = $('<li>')$newLi.html('i am new li')console.log($newLi)

方法二：

// 使用多属性和标签嵌套

var $newLi = $('<li class="aaa bbb" name="ccc" title="ddd">i am new li...</li>')

2.添加

$('ul').append($newLi)或：

$newLi.appendTo($("ul"))

子元素添加：向父标签最前面添加元素，prepend() / prependTo(

$('ul').prepend($newLi)

兄弟元素添加：before()/insertBefore()：互换位置,添加到之前

$('#box').before($newLi)

兄弟元素添加，after() /insertAfter():添加到兄弟元素之后

$('#box').after($newLi)

删除：remove()

$('#box').remove()

拓展：clone()，举例：

<body>

<p>This is a paragraph.</p>

</body>

// 复制每个 p 元素，然后追加到 body 元素

$("body").append($("p").clone());

replaceWith()

用指定的 HTML 内容或元素替换被选元素。