jQuery知识点总结

JS的缺点：　　　　　　　　　　　　　　　　　　　　　　　　jQuery:

1.代码写起来麻烦，需要各种用for来进行遍历，嵌套　　　　　　　　　　1.隐式迭代，自动进行遍历

2.获取对象的方法麻烦　　　　　　　　　　　　　　　　　　　　　　　 2.获取对象方便

3.兼容性问题　　　　　　　　　　　　　　　　　　　　　　　　　　　 3.无兼容性问题

4.注册事件会被覆盖　　　　　　　　　　　　　　　　　　　　　　　　 4.注册事件不会被覆盖

-------------------------------------------------------------------------------------------------------------------

使用jQuery：

1.引入jQuery 　　<script src=" "></script>

2.入口函数

（1）$(document).ready(function(){

　　})

（2）$(function(){

　　})

3.与js入口函数对比

js：window.onload = function(){}

js与jQuery都会等待页面加载完成

但是

js会等待图片加载完成开始执行

jQuery不会

-------------------------------------------------------------------------------------------------------------------

jQuery对象和DOM对象

DOM对象 （用js方式获取的对象）

var a = document.getElementById("aaa");

 

jQuery对象（用jQuery方式获取的对象）

var $li = $("li");

 

jq对象是js对象的集合

js对象与jq对象的方法不能混用！！

 js->jq  可以用   $()   将DOM对象包裹 

 jq->js 取出jq对象的一个 如   $("li")[0]

-------------------------------------------------------------------------------------------------------------------

$实际上是一个函数，用参数来区分作用

1.$(function(){}) 入口函数

2.$(js对象) 把js对象转为jq对象

3.$("#btn") 用来获取对象

-------------------------------------------------------------------------------------------------------------------

选择器

基本选择器

$("div")

$("#id")

$(".className")

$("a,li,#id,.className") 并列

层级选择器

子代   $("ul>li")   儿子

后代   $("ul li")    儿子+孙子

过滤选择器（jQuery独有）

:first                   第一个

:last                   最后一个

:not("#aaa")       非id为aaa的所有

:even                 下标为偶数

:odd                   下标为奇数

:eq(1)                 下标为1

:gt(1)                  下标>1

:lt(1)                   下标<1

:focus                 有焦点的

:animated           正在执行动画的

表单对象属性

:enabled     可用的

:disabled     不可用的

:checked     选中的

:selected     选中的option

筛选选择器（方法）

.children("li")     子代

.find("li")            后代

.siblings(“li”)      兄弟，不包括自己

.parent()            父代

.eq(2)                下标为2 （下标从0开始）  

.next()                下一个兄弟

.prev()                上一个兄弟

.get(2)                下标为2  返回js对象

-------------------------------------------------------------------------------------------------------------------

jQuery操作CSS样式

1.$("li").css("backgroundColor","red");

2.$("li").css({backgroundColor,"pink";

　　　　　  color:"blue"

　　　　　　})

3.$("li").addClass("active");

4.$("li").css("color",function(){return "red"});

JS操作CSS样式

1.element.className += "active"   (需要考虑权重)

2.element.style.height = "50px"   (相当于行内)

3.element.setAttribute("style","height:50px")

4.element.serProperty("height","50px")

-------------------------------------------------------------------------------------------------------------------

jQuery操作Class样式

添加  addClass

删除  removeClass

判断  hasClass

切换  toggleClass

-------------------------------------------------------------------------------------------------------------------

jQuery操作属性

$("img").attr("alt"," ");

$("img").attr({

　　　　　　alt:" ";

　　　　　　title:" ";

　　　　　})

 

获取 $("img").attr("alt");

另：

prop方法用于获取/改变未定义的（要添加的）属性

-------------------------------------------------------------------------------------------------------------------

jQuery设定动画

1.显示/隐藏

show();无动画效果

show(1000/fast/normal/slow); 动画效果速度

show(1000,function(){ alert ( 123 ) } ) 动画完成后执行回调函数

 

-------------------------------------------------------------------------------------------------------------------

jQuery节点操作

增加：

1.父子关系

加到原本内容前面：$("div").prepend($("p"))　　　　　　$("p").prependTo($("div"))

　　　　　　　　　　父　　　　　　子　　　　　　　　　　子　　　　　　　　父

加到原本内容后面：$("div").append($("p"))　　　　　 　$("p").appendTo($("div"))

　　　　　　　　　　父　　　　　　子　　　　　　　　　　子　　　　　　　　父

2.兄弟关系

加到前面：$("div").before($("p"));

加到后面：$("div").after($("p"));

 

清空结点：

$("div").empty(); 会把事件一起清空

$("div").html("");不会清空事件，造成内存泄漏

 

删除当前结点：

$("div").remove();

 

复制当前结点：

$("div").clone(true); 复制结点+事件

$("div").clone(false); 仅复制结点

-------------------------------------------------------------------------------------------------------------------

jQuery的事件机制

简单事件绑定 -> bind -> delegate -> on事件绑定

1.简单事件：$("#btn").click(function(){})

　　缺点：一次只能注册一个事件

2.bind：

　　　(1)绑定一个事件

　　　　　　$("#btn").bind("click( mouseenter)",function(){}); 可以多种触发方式执行同一个function

　　　(2)绑定多个事件

　　　　　　$("#btn").bind( {click:function(){};}, {mouseenter:function(){};} ) 每个触发方式执行不同function

3.delegate：代理委托事件

　　　　　　$("div").delegate("p","click",function(){}); 给div注册委托事件（原理：冒泡）

　　　　　　优点：动态创建出的子元素也可以被绑定事件

　　　　　　缺点：只能注册委托事件

4.on注册事件

　　　　　　$("#btn").on("click",($("p"),) function(){});   ($("p"),)在注册委托事件时使用

　　　　　　注：委托事件会比简单事件优先执行。

 

移除事件：

　　　　　　$("#btn").off(); 移除所有事件

　　　　　　$("#btn").off("click"); 移除click触发的事件

-------------------------------------------------------------------------------------------------------------------

历时好几天终于给写完了

没想到有这么多

还是要经常复习才行。