JQUERY 知识点的自我总结

一、名词释义

1 、js的入口函数：要等待文档树的加载完成，并且等待所有图片、文件都加载完成之后才开始执行。

2  、jquery入口函数会等待文档树的加载完成，并不会等待图片还有文件的加载

3 、js的入口函数：

  window.onload = function () {

           console.log("我是js的入口函数");

        };

4 、DOM对象：使用js的方法获取到的页面中的元素返回的就是DOM对象

5 、jquery对象：使用jquery的方法获取到页面中的元素，返回的就是jquery对象

6 、DOM对象只能调用DOM对象的属性和方法，不能调用jquery对象的属性和方法

7 、jquery对象不能调用dom对象的方法和属性

基本选择器：设置样式：.css（“”,””）;   css(name, value);

过滤选择器：$(“li:odd”).css(“name”,”value”);

$(“li:even”).css

$(“li:eq(index)”).css    index是变量的话要冒冒加加     或者 .eq（index）

查找的是所有后代元素，一般来说find这个参数是有必要

二、操作部分1

1、class操作： 添加类.addClass(“basic”);

移除类.removeClass(“basic”);

判断类.hasClass(“name”);

切换类.toggleClass(“name”);

2、jQuery动画显示与隐藏：.show(10000,function(){alert(“动画执行完了”);});    .hide()

callback:回调，动画执行完了，才开始执行

(改变的样式：width，height，opacity)

滑入滑出：使用方法和显示隐藏使用方法基本一样

slideDown  slideUp  slideToggle

（改变的样式：height）

淡入淡出：用法与滑入滑出用法一模一样

.fadeIn   .fadeOut  fadeToggle  .fadeTo(1000,0.5)

（淡入淡出修改的是opacity）

3、jQuery动画版下拉菜单：   $(this).children("ul").stop().slideDown();

$(this).children("ul").stop().slideUp();

4、jQuery自定义动画：.animate({“left”:”600px”,””:””},1000)

自定义动画 ：    animate(obj, speed, [easing], [callback])

easing参数：控制动画的执行速度

swing:摇摆（秋千）（默认）（先慢，再快，后慢）

linear:匀速效果

360开机动画：animate(obj,speed,function(){})

动画队列：每一个元素都有动画动画队列

5、 停止动画：

stop():停止当前动画

clearQueue:是否清除动画队列（true/false）

jumpToEnd:是否跳转到当前动画最终效果（true/false）

6、添加节点

append:添加到子级的最后面

prepend:添加到子级的最前面

after:添加到调用者的后面，作为兄弟元素

before:添加到调用者的前面，作为兄弟元素

城市选择案例： var $option = $("#src-city>option:selected");

$("#tar-city").append($option);

Html方法：$("div").html("<h1>我是标题</h1>");//设置内容

console.log($("div").html());//什么都不传，就是获取

7、表格生成案例：，用对象数组获取数据。再通过字符串的拼接，最后.html(str);

html():  html(htmlStr) :设置内容

html():获取内容

清空元素（清理门户）:empty()推荐

html("")

删除元素（自杀）:remove()

8、克隆元素：

var $p = $("p").clone();
$p.html("我改变了内容");
$("div").append($p);

clone() :深度复制  放在事件上面则可以触发事件

放在事件下面不可以触发事件，要触发必须加 clone(true)

clone(true):事件也会复制上

9、 属性操作（jquery操作DOM）：属性操作用attr()方法      用法跟css方法一样

设置单个属性：attr(name, value)

设置多个属性：attr(obj)

获取属性：attr(“name”) :注意：

移除属性：removeAttr(name):移除属性

三、操作部分2与事件部分

1、prop（“ ”,true/false）方法：disabled/selected/checked 布尔类型的值用prop放法

2、表格全选案例：1获取头prop（“checked"）是否选中，设置身的是否选中

2通过比较 allLength 与checkedLength（ $("#j_tb input:checked").length）        是否相等，来设置头是否选中

3、操作value值： val(value):设置值          (文本框text)

val():获取值

4、操作内容： html(value):设置内容，能识别html标签

html():获取内荣，能获取到标签

text(value):设置内容，会转义html标签（带标签）

text():获取内容，丢弃html标签

5、操作宽度和高度（number）：width(value):设置宽度 .css("height"))：获取的会有单位px

width():获取宽度

height(value):设置高度

height():获取高度

6、操作位置：

　 offset():相对文档

offset({top:20,left:0}):设置位置，注意如果没有定位，会加上position:relative

offset():获取{top:20,left:0}    css（{“”:”” ,””:””}）相对有定位的设置：子绝父相

　　position()：相对有定位的父元素

只能获取，不能设置

7、 操作滚动： $(window).scroll(function () {};

scrollTop(value):设置

scrollTop():获取卷去的垂直距离              number

scrollLeft(value)：设置卷去的水平距离

scrollLeft()：获取卷去的水平距离

8、on方式注册事件(★★★★★)

给自己绑定事件：$("div").on("click", function(){})

注册代理事件：$("div").on("click", "p", function(){}) （添加的标签也可以有事件）

如果一个元素上有多个事件，首先会处理委托事件，然后处理本身的事件

9、解绑事件：

off():解绑所有的事件，包括代理事件

off("click"):解绑指定的事件

off("click", "**");解绑代理事件

10、触发：

click()：会

trigger("click"):会

triggerHandler("click")：不会触发默认行为

11、按键变色案例：$(document).keydown事件 然后 var keyCode = e.keyCode; 然后通过.css()               设置背景色

12、事件对象

Event.data           data参数不能传字符串,应该传对象

$("div").on("click", {"name":"zs", age:18}, function (e) {

                 alert("哈哈,我有" + e.data.name);  })

});

event.keyCode

event.stopPropagation()  阻止事件冒泡

event.preventDefault()   阻止浏览器默认行为

return false：既能阻止事件冒泡，还能阻止浏览器的默认行为。

13、五角评分案例：①li注册mouseenter事件：当前元素实心，前面为实心、后面为空心

②ul注册mouseleave事件：所有li为空心

找到添加active类的li，设置实心，前面也为实心

③li注册click事件：当前li添加active类，其它兄弟元素移除该类

14、显示迭代:

for()手动迭代

each(function(index,element){})

15、 多库共存：

$.noConflict()

四、链式编程

1、链式编程：1. 只有设置性的操作才能链式下去。（return this）

2. 获取性操作不能链式下去(因为要返回具体指) width() number     css("backgroundColr") string

3. 使用筛选选择器的时候要慎用，会修改jquery对象里面的DOM对象。

如何解决：

重新写

end()

2、jQuery.Color插件的使用：颜色渐变

3、jQuery.lazyload插件的使用：页面，滑到才加载图片等出来

4、如何制作插件：

$.fn.changeGreen=function(){this.css("backgroundColor", "green");}

5、jquery-ui.js的使用：新闻模块