（25）HTML5-初识jQuery

来源：互联网发布：荆州网络电视江汉风编辑：程序博客网时间：2024/05/22 08:45

在jQuery的语句中，将由“选取”和“控制”两部分组成。

从这段语句已经可以看出jQuery的几项特色。首先以$符号作为声明jQuery的识别语句，其次是批次操作，通过选取指令可以一次性的选择HTML文件中的某个标签名称，接下来则可以直接运用jQuery库提供的控制指令，这里直接使用“addClass”函数便能做到为所有的标签加上class属性，不需要再自己设计循环来加入，省去许多麻烦。

在语句的前面加上$符号即代表声明jQuery对象，但其实$符号是jQuery的缩写，因此有带$符号的地方也可以用“jQuery”字符串取代，例如：

$("div").addClass("special");jQuery("div").addClass("special");

但是既然能够使用$符号简写，又何必输入一长串的英文呢？其实有的时候在某些情况，可能$符号已经被其他javascript Library所使用，例如一套知名的prototype也有$符号开头的函数名称。在这种情况下就会造成混肴，但是如果你还不想输入一长串英文，jQuery还提供了自定义符号的语句，例如想使用$jq作为新的jQuery声明简写，即声明一个变量$jq来接受jQuery的返回值，就可以设置新的声明符号，避免与其它$符号开头的函数冲突。

var $jq=jQuery.noConflict();$jq("div").addClass("special");

jQuery选取元素的指令与CSS选择器语句一样，其概念也是可以一次选取文件中同名的标签进行控制，这是因为jQuery引入了CSS选择器引擎，而且已经支持到CSS3版本了，因此在运用jQuery的选取指令时很容易就能融会贯通。

<html> <head>     <meta charset="utf-8"/>     <style>     </style>     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>       <script >            </script> </head> <body>    $("div");//Tag选取    $("#body");//id选取    $(".example");//class选取    $("div#body");//Tag结合id选取    $("div.example p");//Tag结合Class选取    <div id="body">        <h1>Header</h1>        <div class="example">            <p>...</p>        </div>    </div> </body></html>

属性选择器【】

<html> <head>     <meta charset="utf-8"/>     <style>     </style>     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>       <script >            </script> </head> <body>    $("input[name]")//通过中括号【】对某个属性进行选取。例如可选取包含name的input标签    <div id="body">        <h1>Header</h1>        <div class="example">            <input>            <input name="box">        </div>    </div> </body></html>

下层选取（>）

使用大于符号（>），可进行标签的下层选取。例如以下例子，可选取<div>标签下的<div>标签。

<html> <head>     <meta charset="utf-8"/>     <style>     </style>     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>       <script >            </script> </head> <body>    $("div>div");    <div id="body">        <h1>Header</h1>        <div class="example">            <input>            <input name="box">        </div>    </div> </body></html>

上层选取（has）

使用has（）指令则与下层选取恰好相反，可进行标签的上层选取。例如以下例子，可选取含有<div>标签的上层<div>标签。

<html> <head>     <meta charset="utf-8"/>     <style>     </style>     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>       <script >            </script> </head> <body>    $("div:has(div)");    <div id="body">        <h1>Header</h1>        <div class="example">            <input>            <input name="box">        </div>    </div> </body></html>

还可以通过“first”指令选取第一个找到的标签元素，例子如下，可选取到第一个搜索的<div>标签。

<html> <head>     <meta charset="utf-8"/>     <style>     </style>     <script src="https://code.jquery.com/jquery-2.1.0.js"></script>       <script >            </script> </head> <body>    $("div:first");    <div id="body">        <h1>Header</h1>        <div class="example">            <input>            <input name="box">        </div>    </div> </body></html>

0 0