使用javascript开发过程中,有许多的缺点:
/*
* 1. 查找元素的方法多种多样,非常灵活
* 2. 拥有隐式迭代特性,因此不再需要手写for循环了。
* 3. 完全没有兼容性问题。
* 4. 实现动画非常简单,而且功能更加的强大。
* 5. 代码简单、粗暴。
* */
$(document).ready(function () {
$("#btn1").click(function () {
$("div").show(200);
});
$("#btn2").click(function () {
$("div").text("我是内容");
});
});
jQuery的官网 http://jquery.com/
jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library.
It makes things like HTML document traversal and manipulation,
event handling, animation, and Ajax
much simpler with an easy-to-use API that works across a multitude of browsers.
With a combination of versatility and extensibility,
jQuery has changed the way that millions of people write JavaScript.
js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。
(animate.js、common.js)
我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,
其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
官网下载地址:
http://jquery.com/download/
jQuery版本有很多,分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。
大版本分类:
关于压缩版和未压缩版:
使用jQuery的三个步骤:
关于jQuery的入口函数:
//第一种写法
$(document).ready(function() {
});
//第二种写法
$(function() {
});
jQuery入口函数与js入口函数的对比:
DOM对象转换成jQuery对象:【联想记忆:花钱】
var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象
jQuery对象转换成DOM对象:
var $li = $("li");
//第一种方法(推荐使用)
$li[0]
//第二种方法
$li.get(0)
名称 |
用法 |
描述 |
ID选择器 |
$(“#id”); |
获取指定ID的元素 |
类选择器 |
$(“.class”); |
获取同一类class的元素 |
标签选择器 |
$(“div”); |
获取同一类标签的所有元素 |
并集选择器 |
$(“div,p,li”); |
使用逗号分隔,只要符合条件之一就可。 |
交集选择器 |
$(“div.redClass”); |
获取class为redClass的div元素 |
总结:跟css的选择器用法一模一样。
名称 |
用法 |
描述 |
子代选择器 |
$(“ul>li”); |
使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 |
后代选择器 |
$(“ul li”); |
使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
总结:跟css的选择器用法一模一样。
名称 |
用法 |
描述 |
:eq(index) |
$(“li:eq(2)”).css(“color”, ”red”); |
获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd |
$(“li:odd”).css(“color”, ”red”); |
获取到的li元素中,选择索引号为奇数的元素 |
:even |
$(“li:even”).css(“color”, ”red”); |
获取到的li元素中,选择索引号为偶数的元素 |
总结:这类选择器都带冒号
名称 |
用法 |
描述 |
children(selector) |
$(“ul”).children(“li”) |
相当于$(“ul>li”),子类选择器 |
find(selector) |
$(“ul”).find(“li”); |
相当于$(“ul li”),后代选择器 |
siblings(selector) |
$(“#first”).siblings(“li”); |
查找兄弟节点,不包括自己本身。 |
parent() |
$(“#first”).parent(); |
查找父亲 |
eq(index) |
$(“li”).eq(2); |
相当于$(“li:eq(2)”),index从0开始 |
next() |
$(“li”).next() |
找下一个兄弟 |
prev() |
$(“li”).prev() |
找上一次兄弟 |
总结:筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。