黑马程序员技术交流社区

标题: jQuery学习分享 [打印本页]

---

作者: 谢天成老师    时间: 2016-12-18 18:17
标题: jQuery学习分享

jQuery学习分享

1. jQuery描述？

       jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。Js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里面来就可以了。

2.  $(document).ready(function(){});这个函数会在浏览器加载完页面之后，尽快执行；$(function(){})这种入口函数也是可以的。 所有的JQuery函数用有个$开始表示，All jQuery functions start with a $；jQuery选择器通常选择HTML元素，然后做一些元素。

3. 在使用JQuery之前，要引入JQuery库，在这样的背景下，你可以使用它们在编辑器中的animate.css图书馆，下面是通过“type”属性操作元素：

4. 例如： $("button").addClass("animated bounce");     //选择button标签元素，调用animated库中的CSS，使其跳动起来；

5. 4.JQuery也可以通过$(".Classname").addClass("   ");    来操作同一类的元素标签，做同样的动作；例如：$(".well").addClass("animated shake");

6 .层级选择器（重点）、基本过滤选择器

符号(名称)	说明	用法
层级选择器
空格	后代选择器	$(“#j_wrap li”).css(“color”, “red”); 选择id为j_wrap的元素的所有后代元素li
>	子代选择器	$(“#j_wrap > ul > li”).css(“color”, “red”); 选择id为j_wrap的元素的所有子元素ul的所有子元素li
基本过滤选择器
:eq(index)	选择匹配到的元素中索引号为index的一个元素，index从0开始		$(“li:eq(2)”).css(“color”, ”red”); 选择li元素中索引号为2的一个元素
:odd	选择匹配到的元素中索引号为奇数的所有元素，index从0开始		$(“li:odd”).css(“color”, “red”); 选择li元素中索引号为奇数的所有元素
:even	选择匹配到的元素中索引号为偶数的所有元素，index从0开始		$(“li:odd”).css(“color”, “red”); 选择li元素中索引号为偶数的所有元素

筛选选择器（方法）（重点）

符号(名称)	说明	用法
find(selector)	查找指定元素的所有后代元素（子子孙孙）	$(“#j_wrap”).find(“li”).css(“color”, “red”); 选择id为j_wrap的所有后代元素li
children()	查找指定元素的直接子元素（亲儿子元素）	$(“#j_wrap”).children(“ul”).css(“color”, “red”); 选择id为j_wrap的所有子代元素ul
siblings()	查找所有兄弟元素（不包括自己）	$(“#j_liItem”).siblings().css(“color”, “red”); 选择id为j_liItem的所有兄弟元素
parent()	查找父元素（亲的）	$(“#j_liItem”).parent(“ul”).css(“color”, “red”); 选择id为j_liItem的父元素
eq(index)	查找指定元素的第index个元素，index是索引号，从0开始	$(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个
index()	获取指定元素的索引号（从0开始的）	var index = $(this).index();

7. 5.JQuery也可以通过$("#IDname").addClass("   ");    来操作一个ID名字的元素标签，做出动作；例如： $("#target3").addClass("fadeOut");

8. 我们也可以在页面加载后，执行移除Class的动作，出现动画效果，通过函数removeClass（“”）；例如： $("button").removeClass("btn-default");

9.Query还提供给我们，css（）函数用了改变一个元素的css样式，在页面加载后，产生动画效果；例如：$("#target1").css("color","red");

10. JQuery还允许我们通过函数，改变非CSS属性的HTML标签的属性，函数.prop()。prop()允许您调整元素的性质$("#target1").prop("disabled",true);

11. JQuery允许使用函数.html()，这个函数可以添加HTML标签；例如：$("#target4").html("<em>#target4</em>");     //这样就在ID=target4的元素上，改变了他的text的内容以及属性

12. JQuery库的remove（）函数可以，移除一个HTML标签的所有内容，包括标签本身：例如：$("#target4").remove();

13.判断有没有类样式：

hasClass(calssName) 判断指定元素是否包含类 className

$(selector).hasClass(“liItem”);

此时，会返回true或false

切换类样式：

toggleClass(className) 为指定元素切换类 className，该元素有类则移除，没有指定类则添加。

$(selector).toggleClass(“liItem”);

注意点：

                操作类样式的时候，所有的类名，都不带点（.）

         经验：

                1 操作的样式非常少，那么可以通过.css()这个 方法来操作

                2 操作的样式很多，那么要通过使用类的方式来操作

                3 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。类比CSS书写位置（把css从html中分离出来）

前面内容特色总结：简约、“粗暴”、干净利落、直截了当

14 jQuery动画是什么？

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

欢迎大家一起来学习！一起学习大前端！

   说到心得，在用的每天都见得才是最熟悉。熟悉了才会更好的为己所用。jQuery作为一个给我们前端开发快速开发的一个框架是我们学员必须大量练习的。孰能生巧。当然我们也不能因此忘记了Js，因为你去看很多大型互联网网站（腾讯），就没有Jq包，因为毕竟比原生JS慢一个数量级。我们很多时候要兼顾开发效率和性能两者的关系，如果只是写一两行JS代码就不用一味地使用JQ，特别注意不要大量的获取元素，并且尽可能的使用链式写法（上文也有提及到）来减轻性能负担，让JQ迸发出它的强大之处。

---

作者: hutujin    时间: 2016-12-18 23:21
学习了，谢谢分享，顶一下

---

作者: 方传奇    时间: 2016-12-29 19:41
收藏了哦，感谢分享

---

作者: 浮世散人    时间: 2016-12-31 00:45
这个确实不错呢

---

作者: 方传奇    时间: 2017-1-1 23:54
好帖，感谢分享

---

作者: 方传奇    时间: 2017-1-2 18:39
好帖，谢谢分享

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2