jQuery查询

最新推荐文章于 2022-12-22 13:51:44 发布

weixin_30781631

最新推荐文章于 2022-12-22 13:51:44 发布

阅读量63

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/liuxiaojuan/archive/2012/05/16/2503898.html

版权

练习代码：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    div
    {
         height:100px;
         width:100px;
         border:1px solid red;
    }
    #d1
    {
         height :300px;
         width:300px;
         border:1px solid blue;       
    }
    .d1-1
    {
         height:200px;
         width:200px;   
         border:1px solid blue; 
    }
    li
    {
     border:1px solid pink;    
     }
     
    </style>

    <script language="javascript" type="text/javascript" src="jquery-1.4.1.js">
    </script>
    <script language="javascript" type="text/javascript">



        function Button1_onclick() {

          //  var u = document.getElementById("u1");
          // u.innerHTML = "";//清空

          // var u = document.getElementById("d1");
           // u.innerHTML = "<a href='#'>大家好</a>";//innerhtml显示的是一个文本为大家好的超链接

            //var u = document.getElementById("d1");
           //u.innerText = "<a href='#'>大家好</a>";//innerhtml显示的是一个文本为"<a href='#'>大家好</a>

              //标签选择器查询
            //var $dc = $("div");
            //$dc.css("backgroundColor","pink");

            //$dc[1].style.backgroundColor = "red";//把jquery转换成了js

            //var b= document.getElementById("d2");
            //var $b = $(b);
            //$b.css("backgroundColor","gray"); //把js转换成了jquery

                 
             //id选择器查询
           //var $dc = $("#d1");
            // $dc.css("backgroundColor","yellow");

            //类选择器查询
           //var $dc = $(".c3");
          //$dc.css("backgroundColor","blue");

            //查找标签里是li的又一个标签li里的信息
            //var $dc = $("li li");//也可以这样清楚的写一下 var $dc=$("ul li li");
            // $dc.css("backgroundColor", "pink");

             //给类是.d1-1这个边框改变颜色
            //var $dc = $(".d1-1");
           // $dc.css("borderColor","black");

            //表示给id=d1的直接子元素中的div改变边框颜色
            //var $dc = $("#d1>div");
            //$dc.css("borderColor", "black");

            
            //表示给紧跟id=d1的元素并且标签为div
            //var $dc = $("#d1+div");
            //$dc.css("borderColor", "black");

            //表示给id=d1的兄弟元素并且标签为div的边框改变颜色
            //var $dc = $("#d1~div"); 
           // $dc.css("borderColor", "black");


            //除了id=d2的边框，其余的都变黑
            //var $dc = $("div:not(#d2)").css("borderColor", "black");

                 
            //even表示偶数元素的边框变成黑色
            //var $dc=$("div:even").css("borderColor", "black");
 
            //eq表示等于3的边框变成黑色
            //var $dc = $("div:eq(3)").css("borderColor", "black");

            //表示div有文本内容为含有a3的字符串的边框变黑
            //var $dc = $("div:contains(a3)").css("borderColor", "black");

            //表示div不包含任何内容的div元素
            // var $dc = $("div:empty").css("borderColor", "black");

            //表示在标签为tr里的用input元素的改变背景颜色
           // var $dc = $("tr:has(input)").css("backgroundColor", "pink");


            //表示选取有属性的aa的div元素
            //var $dc = $("div[aa]").css("borderColor", "black");
            
            //
            //var $dc = $("li:nth-child(3n-1)").css("borderColor", "black");

            //删除
            var $dc = $("li li");
            $dc.remove();
            
            
        }

    </script>
</head>
<body>
<div id="d1" aa="a1">a1aa
  <div class="d1-1"></div>
  <div class="d1-1-1"></div>
</div>
<div id="d2" aa="a1">a2aa</div>
<div id="d3" class="c3" aa="a1">a3aa</div>
<ul id="u1">
    <li>
        湖北
        <ul>
            <li>武汉</li>
            <li>荆州</li>
            <li>监利</li>
        </ul>
    </li>
    <li>
        新疆
        <ul>
            <li>乌鲁木齐</li>
            <li>吐鲁番</li>
            <li>伊犁</li>
        </ul>
            </li>
</ul>
    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" /><br/>
    
   <table>
    <tr>
        <td>
            <input id="Checkbox1" type="checkbox" /><td>湖北</td>
        </td>
    </tr>
    <tr>
        <td>
            <input id="Checkbox2" type="checkbox" /><td>湖南</td>
        </td>
    </tr>
    <tr>
        <td>
            <input id="Checkbox3" type="checkbox" /><td>河北</td>
        </td>
    </tr>
    <tr>
        <td>
            <input id="Checkbox4" type="checkbox" /><td>新疆</td>
        </td>
    </tr>
    <tr>
        <td>
          zhuzhuzuhuzh<td>afagafgadgh</td>
        </td>
    </tr>
   </table>
</body>
</html>

转载于:https://www.cnblogs.com/liuxiaojuan/archive/2012/05/16/2503898.html

weixin_30781631

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery查询

练习代码：View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >...
复制链接

扫一扫

jQuery查询

“相关推荐”对你有帮助么？