jQuery使用总结

Posted wxzhe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery使用总结相关的知识,希望对你有一定的参考价值。

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

筛选器

选择器与筛选器的区别:选择器就是定位html文档中要选择的某一类标签,筛选器就是在定位的标签中选择需要的标签。

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <a>111</a>
        <a>222</a>
        <a id=‘i1‘>333</a>
        <a>444</a>
        <a >555</a>
        <a id=‘i2‘>666</a>
    </div>
    <script src="jquery.js"></script>
</body>
</html>
筛选器示例文档

筛选器的一些用法如下:

#当前标签的下一个标签:
$("#i1").next()  
#当前标签下面所有的标签:
$("#i1").nextAll()
#当前标签下一个标签直到“#i2”之间的标签
$("#i1").nextUntil("#i2")

#与当前标签下一个标签相对的是前一个标签:
$("#i1").prev()
$("#i1").prevAll()
$("#i1").prevUntil()

#当前标签的孩子标签:
$(".c1").children()
#当前标签的父标签
$(‘#i1‘).parent()     #仅查询一层,即当前标签的父标签
$(‘#i1‘).parents()    #依次向上查询,可以查询到html标签。
$(‘#i1‘).parentsUntil() #

#查询当前标签子标签中的标签:
$("div").find("span")
#查询当前标签的兄弟标签
$("#i1").siblings()

$("#i1").siblings().first()
$("#i1").siblings().last()

样式操作

样式操作主要有以下几个:

addClass    #添加样式

removeClass #移除样式

toggleClass   #样式若存在就删除,若不存在就添加

上面这三个操作是多种css样式构成的css组合的集合操作,若单独只想添加某标签的背景颜色,可以使用如下:

$(‘t1‘).css(‘样式名称‘, ‘样式值‘);

文本操作

$(..).text()           # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容,内容中的标签不会解析
                
$(..).html()           #获取文本内容
$(..).html("<a>1</a>")  #设置内容,但是可以解析
                
$(..).val()  # 获取input,text,等标签中输入的内容。
$(..).val(..) #设置对应标签的内容。

属性操作

# 专门用于做自定义属性
$(..).attr(‘n‘)  #标签上的属性,获取属性
$(..).attr(‘n‘,‘v‘) #给属性赋值
$(..).removeAttr(‘n‘)

<input type=‘checkbox‘ id=‘i1‘  />

# 专门用于chekbox,radio选中类的操作
$(..).prop(‘checked‘)
$(..).prop(‘checked‘, true)

index 获取索引位置

文档操作

append:追加到当前标签内容之后
prepend:插入到当前标签内容之前
before:插入到当前标签之前
after:追加到当前标签之后

remove:删除
empty:只是把标签的内容清空

clone:克隆

一些操作的小例子:

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>
        .header{
            background-color: #4c796a;
            color: red;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body style="height: 400px;width: 200px;border: 1px solid #dddddd">
    <div class="item">
        <div class="header">标题一</div>
        <div id="i1" class="content">内容一</div>
    </div>
    <div class="item">
        <div class="header">标题二</div>
        <div  class="content hide">内容二</div>
    </div>
    <div class="item">
        <div class="header">标题三</div>
        <div class="content hide">内容三</div>
    </div>

    <script>
        $(".header").click(function () {
            $(this).next().removeClass("hide");
            $(this).parent().siblings().find(".content").addClass("hide");
        })
    </script>
</body>
</html>
左侧菜单栏编辑

 根据不同的导航按钮,显示不同内容的实例:

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
        .menu-item{
            float: left;
            border-right: 1px;
            padding: 0 5px;
        }
        .active{
            background-color: brown;
        }
        .content{
            height: 100px;
            border: 1px dashed wheat;

        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="width: 700px; margin: 0 auto;">
        <div class="menu">
            <div class="menu-item active" a="1">菜单一</div>
            <div class="menu-item" a="2">菜单二</div>
            <div class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide" b="2">内容二</div>
            <div class="hide" b="3">内容三</div>

        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(".menu-item").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            var current_index = $(this).attr("a");
            // console.log(current_index);
            // 根据菜单的索引来对应内容的索引
            $(".content").children("[b=‘"+ current_index +"‘]").removeClass("hide").siblings().addClass("hide");
        })
    </script>
</body>
</html>
View Code

点赞操作:

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span></span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span></span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span></span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span></span>
        </div>
    </div>
    <div>
        <span>1</span>
        <span>2</span>
    </div>

    <script src="jquery.js"></script>
    <script>
        $(".item").click(function () {
            AddItem(this);
        });

        function AddItem(self) {
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;
            var tag = document.createElement("span");
            $(tag).text("+1");
            $(tag).css("color", "green");
            $(tag).css("position", "absolute");
            $(tag).css("fontSize", fontSize + "px");
            $(tag).css("top", top + px);
            $(tag).css("right", right + "px" );
            $(tag).css("opacity", opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css(fontSize,fontSize + "px");
                $(tag).css(right,right + "px");
                $(tag).css(top,top + px);
                $(tag).css(opacity,opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            }, 40);
        }

        
    </script>
</body>
</html>
点赞操作

动态添加删除操作:(待完善)

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .zhc{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 400px;
            background-color: #dddddd;
            margin-top: -200px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <table border="1">
        <thead>
        <tr>
            <th>主机名</th>
            <th>端口</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>172.16.100.129</td>
                <td>80</td>
                <td class="a1">
                    <a class="edit">编辑</a> | <a class="delete">删除</a>
                </td>
            </tr>
            <tr>
                <td>172.16.100.130</td>
                <td>81</td>
                <td class="a1">
                    <a class="edit">编辑</a> | <a class="delete">删除</a>
                </td>
            </tr>
            <tr>
                <td>172.16.100.131</td>
                <td>82</td>
                <td class="a1">
                    <a class="edit">编辑</a> | <a class="delete">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="button" onclick="addItem();" value="添加">
    <!--遮罩层-->
    <div class="zhc hide"></div>
    <div class="modal hide">
        <span style="color: #b73434">主机名</span>
        <input type="text" name="host">
        <br>
        <span style="color: #b73434">端口号</span>
        <input type="text" name="port">
        <br>
        <input  type="button" value="添加">
        <input type="button" value="取消">
    </div>
    <script src="jquery.js"></script>
    <script>
        function addItem(){
            $(".modal,.zhc").removeClass("hide");
        }

        $(".edit").click(function () {
            $(".modal,.zhc").removeClass("hide");
            var tds = $(this).parent().prevAll();
            var port = tds[0].innerText;
            var host = tds[1].innerText;
            console.log(host, port);

            $(".modal input[name=‘host‘]").val(host);
            $(".modal input[name=‘port‘]").val(port);
        });


        $(".modal input[value=‘添加‘]").click(function () {
            var host = $(".modal input[name=‘host‘]").val();
            var port = $(".modal input[name=‘port‘]").val();
            console.log(host, port);
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.innerHTML = host;
            var td2 = document.createElement("td");
            td2.innerHTML = port;
            var td3 = document.createElement("td");
            $(td3).addClass("a1");
            td3.innerHTML = <a class="edit">编辑</a> | <a class="delete">删除</a>;
            $(tr).append(td1);
            $(tr).append(td2);
            $(tr).append(td3);

            $("table").append(tr);

            $(".modal,.zhc").addClass("hide");
            $(".modal input[type=‘text‘]").val("");

        });

        $(".modal input[value=‘取消‘]").click(function () {
            $(".modal,.zhc").addClass("hide");
            $(".modal input[type=‘text‘]").val("");
        })

    </script>
</body>
</html>
View Code

 

以上是关于jQuery使用总结的主要内容,如果未能解决你的问题,请参考以下文章

26个jQuery代码片段使用技巧

常用的几个JQuery代码片段

几个有用的JavaScript/jQuery代码片段(转)

高效Web开发的10个jQuery代码片段

高效Web开发的10个jQuery代码片段

jQuery应用 代码片段