jQuery使用总结

时间：2018-08-23 23:06:38 阅读：227 评论：0 收藏：0 [点我收藏+]

标签：反选 gre code padding 保存 onclick 选中 round 复制粘贴

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使用总结

标签：反选 gre code padding 保存 onclick 选中 round 复制粘贴

原文地址：https://www.cnblogs.com/wxzhe/p/9519910.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行