jQuery初识

发布时间：2023-09-06 01:17责任编辑：白小东关键词：jQuery

jQuery是什么？

jQuery是一个兼容多浏览器的JavaScript库。

jQuery能极大地简化JavaScript编程，它的宗旨就是："Write less,do more."

jQuery包含以下内容：

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX

下载链接：jQuery官网

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$(“#i1”).html()的意思是：获取id值为i1的元素的HTML代码，其中html()是jQuery里的方法。

相当于JavaScript中的document.getElementById("i1").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery也不能使用jQuery里的方法。

jQuery与JavaScript在申明变量的区别：

1 var $variable = jQuery对象2 var variable = DOM对象3 $variabl[0] ????//jQuery对象转换成DOM对象

拿上面的例子举例，jQuery对象和DOM对象的使用：

1 $("#i1").html(); ???//jQuery对象可以使用jQuery的方法2 $("#i1")[0].innerHTML; ???//DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

查找标签>选择器

id选择器：

$("#id");

class选择器：

$(".className");

标签选择器：

$("tagName");

组合选择器：

$("#id,.className,tagName") ?

层级选择器：

$("#id a"); ???//查找id下方所有的a标签，中间的空格表示后代。$("#id > a"); ???//查找第一个a标签

基本选择器：

:first ???//第一个:eq(index) ???//索引等于index的那个元素:last ???//最后一个

属性选择器：

<input type="text"><input type="password"><input type="checkbox">$("input[type = ‘checkbox‘]"); ???//取到checkbox类型的input标签

筛选器

下一个元素：

1 $("#id").next(); ???//筛选出下一个元素2 $("#id").nextAll(); ???//筛选出下面所有的元素3 $("#id").nextUntil("#i2"); ???//筛选出下面所有的元素，找到ID为i2终止

上一个元素：

$("#id").prev(); ???//筛选出上一个元素$("#id").prevAll(); ???//筛选出上面所有的元素$("#id").prevUntil("#i2"); ???//筛选出下面所有的元素，找到id为i2终止

父亲元素：

1 $("#id").parent(); ???//parent() 方法返回被选元素的直接父元素。2 $("#id").parentsAll(); ???//parentsAll()返回被选元素的所有祖先元素3 $("#id").parentsUntil(); ???//parentsUntil() 方法返回介于 selector 与 stop 之间的所有祖先元素。

子元素和同级元素：

$("#id").children(); ???//所有子元素$("#id").siblings(); ???//所有同级元素

查找元素:

$("id").find()

操作>属性

用于自定义属性：

attr()removeAttr()

用于checkbox和radio

prop()removeProp()

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr(“checked”, “checked”)。

练习题：

1.找到本页面中id是i1的标签
$("#i1")
2.找到本页面中所有的h2标签

$("h2")
3.找到本页面中所有的input标签

$("input")
4.找到本页面所有样式类中有c1的标签

$(".c1")
5.找到本页面所有样式类中有btn-default的标签

$(".btn-default")
6.找到本页面所有样式类中有c1的标签和所有h2标签

$(".c1,h2")
7.找到本页面所有样式类中有c1的标签和id是p3的标签

$(".c1,#p3")
8.找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签

$(".c1,btn")
9.找到本页面中form标签中的所有input标签

$("form input")
10.找到本页面中label标签下的input标签子标签

$("label>input")
11.找到本页面中紧挨着label标签的input标签

$("label+input")
12.找到本页面中id为p2的标签后面所有和它同级的li标签

$("#p2~li")
13.找到id值为f1的标签下面的第一个input标签

$("#f1 input:first")
14.找到id值为my-checkbox的标签下面最后一个input标签

$("#my-checkbox input:last")
15找到id值为my-checkbox的标签下面没有被选中的那个input标签

$("#my-checkbox input:not(‘:checked‘)")
16.找到所有含有input标签的label标签
$("label:has(input)")

jQuery初识

原文地址：http://www.cnblogs.com/bingpan/p/7657673.html

jQuery初识

jQuery是什么？

jQuery对象

查找标签>选择器

筛选器

操作>属性

练习题：

知识推荐