jQuery初识

会有一股神秘感。 提交于 2020-01-01 03:48:52

jQuery初识

 

jQuery是什么?

jQuery是一个兼容多浏览器的JavaScript库。
jQuery能极大地简化JavaScript编程,它的宗旨就是:"Write less,do more."
jQuery包含以下内容:
  1. HTML元素选取
  2. HTML元素操作
  3. CSS操作
  4. HTML事件函数
  5. JavaScript特效和动画
  6. HTML DOM遍历和修改
  7. 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是什么?

jQuery是一个兼容多浏览器的JavaScript库。
jQuery能极大地简化JavaScript编程,它的宗旨就是:"Write less,do more."
jQuery包含以下内容:
  1. HTML元素选取
  2. HTML元素操作
  3. CSS操作
  4. HTML事件函数
  5. JavaScript特效和动画
  6. HTML DOM遍历和修改
  7. 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)")
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!