jQuery

2022-04-18 12:03:37 阅读：191 来源： 互联网

jQuery是一个java script库，里面拥有很多实用且功能强大的方法。比原生的java script用起来更加简单。

1.隐藏元素

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>隐藏元素</title>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
              //document.ready函数表示在完全加载了DOM后才开始执行，为防止在加载DOM之前执行，可以写成$(function(){ });效果相同。
            $(document).ready(function(){
                //$("p.test").hide();//隐藏所有calss="test"的p元素
                //$("p").hide();//隐藏所有p元素
                //$("#tt").hide();//隐藏所有id等于tt的元素
            })
        </script>
        
    </head>
    <body>
       <p class = "test">你好，世界</p>
       <p>hello world</p>
       <a id = "aa">你好啊，我是a元素，id = aa</a>
       <a id = "tt">我是id= tt的a元素</a>
       
    </body>
</html>

2.选择器：jQuery 选择器允许您对 HTML 元素组或单个元素进行操作，基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
    
</script>
<script>
    $(function() {
        $("button").click(function() {//当button按钮被点击的时候执行函数。
            //$("*").hide();//选择所有元素
            //$(this).hide();//选择当前的html元素
            //$("p.y").hide();//选择class为y的p标签
            //$("p:first").hide();//选择第一个p标签
            //$("ul li:first").hide();//选择ul 标签中 第一个li标签元素。
            //$("ul li:first-child").hide();//选取每个 <ul> 元素的第一个 <li> 元素
            //$("p").hide();//选择所有p标签
            //$(".y").hide();//选择所有class等y的元素
            //$("#test").hide();//选择id等于test的元素，id是唯一的。
            //$("[href]").hide();//选取带有href属性的元素。
            $("a[target='_blank']").hide();//选取所有 target 属性值等于 "_blank" 的 <a> 元素,或者可将=换为!=。
            //$(":button").hide();//选取所有 type="button" 的 <input> 元素 和 <button> 元素
            //$("tr:even").hide();//选取偶数位置的 <tr> 元素
            //$("tr:odd").hide();//选取奇数位置的 <tr> 元素
        });
    });
</script>
</head>

<body>
    <p>第一个p元素</p>
    <p class="y">class y 的p元素</p>
    <p>纯p元素，最后一个p元素</p>
    <b class="y">class y 的b元素</b>
    <p>
        <abbr id="test">id 等于 test的 abbr元素，id是唯一的</abbr>
    </p>
    <p>
        <a href="http://xxx"> 拥有 href的a元素</a><br/>
        <a target ="_blank"> target属性为_blank的a元素</a>
    </p>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>号码</th>
        </tr>
        <tr>
            <td>王刚</td>
            <td>1</td>
        </tr>
        <tr>
            <td>孙俪</td>
            <td>2</td>
        </tr>
    </table>
    <ul>
        <li>li 1元素1</li>
        <li>li 1元素2</li>
        <li>li 1元素3</li>
    </ul>
    <ul>
        <li>li 2元素1</li>
        <li>li 2元素2</li>
        <li>li 2元素3</li>
    </ul>
    <button>点击测试</button>
</body>
</html>

标签：jQuery,hide,元素,li,test,id,隐藏
来源： https://www.cnblogs.com/li-yan-long/p/16159018.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery