78-81

服务端 2019-10-25 23:00:34 阅读次数: 0

jQuery和Dom关系以及jQuery版本

http://jquery.cuishifeng.cn/index.html
jQuery学习参考网址

jQuery封装了Dom、Bom、JavaScript，可以快速的使用其相关功能和扩展

jQuery版本：

  • 版本1系列
  • 版本2系列
  • 版本3系列
    推荐使用版本1，对老版本(IE8以下)浏览器兼容性更好，且版本1的jQuery功能在高版本中也是适用的。 高版本的jQuery在老版本浏览器中不适用。
    版本1中最高的版本是1.12

http://code.jquery.com/jquery/
jQuery下载地址

enter description here

上图：下载后的jQuery文件要放入目录中，然后引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        jQuery("#i1");
        $("#i1");
    </script>
</body>
</html>

代码说明：

jQuery("#i1") 用来jQuery关联i1这个标签； $("#i1")是一样的，可以用$符号来代替jquery。

enter description here

上图：
使用jQuery和document.getElementById都可以关联i1这个标签；
分别称为jQuery对象和document对象；
jQuery和document各自有相似的功能，也有不同的功能；
jQuery与document可以相互转换，转换后可以使用对方不同的功能。

enter description here

上图：
jQuery关联使用$('#i1')[0]就转换成document对象了。

enter description here

上图：
将document转成jQuery对象。

jQuery选择器

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i1">123</div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("#i1");   <!--选择了id为i1的标签-->
    </script>
</body>
</html>

class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div class="c1">123</div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $(".c1");   <!--选择了class为c1的标签-->
    </script>
</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div class="c1">
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("a");  <!--选择了所有a标签-->
    </script>
</body>
</html>

组合标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>
    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("a,.c2,#i10"); <!--选择了所有的a标签和所有的c2标签和所有i10标签-->
    </script>
    </script>
</body>
</html>

enter description here

上图：可以看到有4个a标签

enter description here

上图：a标签和c2标签的组合

enter description here

上图：三个组合选择

层级选择器

  • 多层选择
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("#i10 a");    <!--选择#i10下面所有层级的a标签-->
    </script>
</body>
</html>

代码说明：

选择了#i10下的3个a标签

enter description here

  • 子层选择
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $("#i10>a");    <!--只选择#i10下一层的a标签，不会选择更深层-->
    </script>
</body>
</html>

first

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

<script>
    $('li:first');  <!--获取匹配的第一个元素，也就是list item 1-->
</script>

其他基本选择器

enter description here

  • eq
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a>a</a>
        <a>b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $('#10 a:eq(0)')    <!--选择#10下的所有a标签的下标为第0个a标签-->
    </script>
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a name="123">a</a>
        <a name="456">b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $('#10 a:eq(0)')
    </script>
</body>
</html>

enter description here

表单对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <input type="text" disabled>    <!--disabled为不可编辑-->

    <div id="i10" class="c1">
        <div>
            <a>abcdefg</a>
        </div>
        <a name="123">a</a>
        <a name="456">b</a>
    </div>
    <div class="c2">
        <a>c</a>
        <a>d</a>
    </div>

    <script src="jquery-1.12.4.js"></script>    <!--引入jQuery-->
    <script>
        $(':disabled')  <!--选择不可编辑的标签-->
    </script>
</body>
</html>

enter description here

上图：因为disabled输入框是不可编辑的

多选反选取消

全选、取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">      <!--设置表格-->
        <thead>     <!--表头-->
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb"> <!--表内容-->
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        <!--调用全选函数-->
        function checkAll() {
            $('#tb :checkbox').prop('checked',true)；  <!--关联#tb标签下的所有checkbox标签，使用prop来对多选框进行编辑，checked为true就全选-->
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false)；   <!--false全部取消选择-->
        }

    </script>
</body>
</html>

enter description here

enter description here

上2图：点击全选和取消都可以生效。

反选

  • dom与jQuery对象区分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            <!--使用each会循环每一个元素-->
            $('#tb :checkbox').each(function () {
                console.log(this);  <!--this代表循环的每一个元素内容-->
            })
        }
    </script>
</body>
</html>

enter description here

上图：点击反选，会将每个元素（this）打印出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            // k表示下标
            $('#tb :checkbox').each(function (k) {
                console.log(k,this);
            })
        }
    </script>
</body>
</html>

enter description here

上图：将每个CheckBox的下标给打印出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {
                // console.log(this);
                console.log($(this));   //this在这里默认是dom对象，需要将其转成jQuery对象后才能使用jQuery相关功能。
            })
        }
    </script>
</body>
</html>

enter description here

上图：成功转换后，可以看到jQuery对象都被[]给括起来的。

  • 使用dom方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {

                //使用dom方法
                //checked默认等于true
                if(this.checked){
                    this.checked =false;    //如果等于true就改成false
                }
                else {
                    this.checked = true;    //如果等于false就改成true
                }
            })
        }
    </script>
</body>
</html>

enter description here

enter description here

上2图：选中其中两个，然后点击反选，起到了反选效果。

  • 使用jQuery方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {

                //通过jQuery方法
                //如果this等于true
                if($(this).prop('checked')){
                    $(this).prop('checked',false)   //就将this改为false
                }else {
                    $(this).prop('checked',true)    //否则this改为true
                }

            })
        }
    </script>
</body>
</html>

代码说明：

如果是一个选项$(this).prop('checked')就表示对checked进行了选择，如果是$(this).prop('checked',false)就表示对checked进行赋值。

enter description here

enter description here

上2图：使用jQuery方法，做出反选效果。

  • jQuery三元运算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancleAll();">

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $('#tb :checkbox').each(function (k) {
                // 三元运算格式
                //$(this).prop('checked')：表示如果checked等于true，就将false赋值给v，否则就将true赋值给v

                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);  //将checked赋值成v
            })
        }
    </script>
</body>
</html>

enter description here

enter description here

上2图：使用jQuery三元运算的方式做出反选效果。

猜你喜欢

转载自blog.51cto.com/daimalaobing/2445616
81
81!
78
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022