jQuery引入、jQuery选择器以及属性

一、jQuery的引入

1、什么是jQuery？
jQuery是一个轻量级的JavaScript库。
2、jQuery的优点
（1）拥有CSS1-CSS3所有的选择器；
（2）简化了dom操作；
（3）优化了事件机制。
3、jQuery的引入

<script src="URL"></script>

其中，URL地址为jQuery库的地址。

二、jQuery选择器

1、基本选择器
基本选择器：#id，element，class，*
（1）id选择器：

<div id="mydiv1">id1</div>
<div id="mydiv2">id2</div>
<script src=" "></script>
<script>
$("#mydiv1");
</script>

结果：

<div id="mydiv1">id1</div>

（2）element选择器：

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<script src=" "></script>
<script>
$("div");
</script>

结果：

<div>DIV1</div>，<div>DIV2</div>

（3）class选择器：

<div class="mydiv1">id1</div>
<div class="mydiv2">id2</div>
<script src=" "></script>
<script>
$(".mydiv1");
</script>

结果：

<div class="mydiv1">id1</div>

（4）*选择器

<div>div</div>
<span>span</span>
<p>p</p>
<script src=" "></script>
<script>
$("*");
</script>

结果：

<div>div</div>，<span>span</span>，<p>p</p>

（5）多个选择器：中间用，隔开

<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn" id="anniu1">按钮</button>
<button class="btn" id="anniu2">按钮</button>
<script src=" "></script>
<script>
$("#anniu1,#anniu2");
</script>

2、parent child
匹配父元素下的所有子元素。

<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<div></div>
<div>

</div>
<div>123</div>
<script src=" "></script>
<script>
$("ul li")；//ul下所有的li,共7个li
$("ul.menu>li");//menu的子集li，共4个li
$("ul.menu>li:nth-child(1)+li");//menu的子集li中第一个li标签之后紧跟的li
$("ul.menu>li:nth-child(1)~li");//menu的子集li中第一个li标签之后所有的子集li，共3个
$("ul.menu>li:first");//menu的子集li中第一个li
$("ul.menu>li:first-child");//menu的子集li中第一个li
$("ul li:contains(2)");//匹配ul下所有li标签中包含2 的元素。
$("ul.menu:has(.child)");//匹配含有.child选择器的元素，即ul.menu
$("div:parent");//匹配的元素必须有子元素或者内容，这里是2个，因为第一个div没有内容
</script>

3、按照索引值来匹配元素

<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src=" "></script>
<script>
$("ul.menu>li:even")//索引为偶数的li
$("ul.menu>li:odd")//索引为奇数的li
$(".menu>li:eq(3)")//根据索引匹配，参数为索引值。
$(".menu>li:lt(2)")//匹配所有小于给定索引值的元素，参数为索引值
$(".menu>li:gt(2)")//匹配所有大于给定索引值的元素，参数为索引值
</script>

4、header :匹配h1, h2之类的标题元素

<ul class="menu">
    <li>1</li>
    <li class="child">2
        <ul>
            <li>21</li>
            <li>22</li>
            <li>你好</li>
        </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<h1>1111</h1>
<h2>1111</h2>
<h3>1111</h3>
<h4>1111</h4>
<script src=" "></script>
<script>
$("body :header")；
</script>

5、focus：匹配获得焦点的元素

$(" ").focus(); //默认获得焦点
$("body :focus")；

6、root：选择文档的根元素。

$(":root")； //html

7、hidden和visible
hidden：匹配所有不可见元素，或者type为hidden的元素；
visible：匹配所有可见元素。

三、jQuery属性

1、attr属性；
attr属性：设置或者返回被选元素的属性值。

<input type="text" id="ipt" value="123"/>

<script>

    console.log($("#ipt").attr("value"));//123
    $("#ipt").attr("value","456");  //设置值
    $("#ipt").attr("value",function(index,val){
        console.log((index, val));
        return val * val ;
    });

    console.log($("#info").attr("value"));
    $("#info").removeAttr ("value");

    
</script>

2、removeAttr属性；
removeAttr属性：从匹配的元素中删除一个属性。

<input type="text" id="info" value="1" class="ipt1"/>

<script>
    console.log($("#info").attr("value"));
    $("#info").removeAttr ("value");

</script>

3、prop属性；
prop属性：获取在匹配的元素集中的第一个元素的属性值。

<input type="text" id="info" value="1" class="ipt1"/>
    <script>
    console.log($(".ipt1").prop("value"));   //1
    $(".ipt1").prop("value","abc");
    
    $(".ipt1").prop("value",function (index,val){
        console.log(index,val);
        return val+"m";
    });
</script>

4、removeProp属性；
removeProp属性：删除由.prop()方法设置的属性。

<input type="text" id="info" value="1" class="ipt1"/>
<script>
    console.log($(".ipt1").prop("value"));   //1
    $(".ipt1").prop("value","abc");
    
    $(".ipt1").prop("value",function (index,val){
        console.log(index,val);
        return val+"m";
    });
    $(".ipt1").removeProp("value");
    console.log($(".ipt1").prop("value"));//undefined
    </script>

5、addClass属性；
addClass属性：匹配的元素添加指定的类名。多个类名时，中间用空格隔开。

<div  class="block">  </div>
$(".block").addClass("box ");
$(".block").addClass("box text");

$(".block").addClass(function (index,elec){
        return "data";

6、removeClasss属性；
removeClasss属性：从匹配的元素中删除类，删除多个类名时用空格隔开

$(".block").removeClass("data");

//或者：
$(".block").removeClass(function (index,elec){
        return "data";
    });
    
//删除匹配元素的所有类
$(" ").removeClass();

7、toggleClass属性；
toggleClass属性：当添加的类已经存在时则删除，不存在时则添加。

$(".block").toggleClass("div1");

$(".block").toggleClass(function (index,elec){
        return "div1";
    },false);

8、html属性；
html属性：获取或者设置元素的内容值。

<div class="content"></div>
<script>
 $(".content").html("<span>123</span>");
 
$(".content").html(function (index,val){
        return "不知道"
    });
</script>

9、text属性；
text属性：获取或者设置元素的文本值

<div class="content"></div>
<script>
 $(".content").text("<span>123</span>");
 
$(".content").text(function (index,val){
        return "text"
    });
</script>

10、val属性；
val属性：获取匹配元素的当前值。
获取文本框的值：$("input").val();
设置值：$("input").val("设置的值");
回调函数设置：

$(" input").val(function (index,val){ 
        return "值";
    });