jQuery的下载直接可以把官网上的源代码复制粘贴下来,然后保存到本地即可。

jQuery选择器

通过一个例子来说明jQuery的几种选择器的用法:

一个简单的没有任何意义的html代码如下:

测试代码1
#根据标签的id选择标签:
$("#i1")
#根据标签的class选择标签:
$(".c1")
#根据标签的标签名字选择标签:
$("span")
#选中所有的标签
$("*")
#组合选择器,选择所有的id为i1的标签和class为c1的标签
$("#i1, .c1")  #中间用逗号分隔。

层级标签---根据标签间关系来选择,示例如下:

#选择父标签下的子标签
$("body div") #选择body标签的子标签中的所有的div标签,包含子标签的子标签
#选择父标签下的子标签(只父子关系这一层)
$("body >div") #不会再选择,子标签div下的子标签。
#选择当前标签的下一个标签
$("input + div") #选择input标签的下一个标签,"+"后面的div可以省略
#选择当前标签的兄弟标签:
$("input ~ ")    #当前标签的兄弟标签,也就是同级标签。

一些位置参数的基本标签:

#匹配选中的第一个标签
$("div:first") #匹配选中div标签的第一个标签
#匹配选中的最后一个标签
$("div:last")
#根据索引匹配标签
$("div:eq(0)")  #选中的div标签中,索引为0的标签。
$("div:gt(1)")   #选中的div标签中,索引大于1的标签。
$("div:lt(1)")   #选中的div标签中,索引小于1的标签。

根据标签的属性选择:

#选中html中具有name属性的标签
$('[name]')
#根据属性的确定值来选择标签
$("[name='wxz']")
#选择指定标签中含有某属性的标签
$("div[name='wxz']")
#匹配所有的单行文本框
$(":text")

以上是jQuery选择器的一部分,更详细的jQuery介绍请参照,jQuery技术文档

一个jQuery选择器的小例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
    <form>
        <input type="button" value="全选" onclick="checkAll()">
        <input type="button" value="反选" onclick="reverse()">
        <input type="button" value="取消" onclick="cancelAll()">
    </form>
    <hr>
    <table border="1">
        <thead>
        <tr>
            <th>选项</th>
            <th>IP</th>
            <th>PORT</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>10.0.102.204</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>10.0.102.204</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>10.0.102.204</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>10.0.102.204</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script>
        function checkAll() {
            $(":checkbox").prop("checked", true);
        //    prop()函数有两个参数,如果只有一个参数则获取这个属性的值,如果有如上两个参数,则个这个属性设定值。
        }
        function cancelAll() {
            $(":checkbox").prop("checked", false);
        }
        function reverse() {

            $(":checkbox").each(function () {
                /* 第一种写法
                if(this.checked){
                    this.checked = false;
                }else {
                    this.checked = true;
                } */

                /* 第二种写法
                if($(this).prop("checked")){
                    $(this).prop("checked", false);
                }else {
                    $(this).prop("checked", true);
                } */
                // 三元运算符
                var v = $(this).prop("checked")?false:true;
                $(this).prop("checked",v);
            })

        }
    </script>
</body>
</html>
实例-1

相关文章: