jQuery初识

Posted 2020-10-10 一路向北

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)")