其他分享
首页 > 其他分享> > jQuery

jQuery

作者：互联网

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

1.隐藏元素

<!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>

3.

 

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