程序博客网 > nginx alias 不起作用

jquery选择器使用 学习范例详解

来源：互联网 发布：nginx alias 不起作用 编辑：程序博客网 时间：2024/05/17 02:59

 

jq1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JueryTest</title>
  <script  type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
  <script type="text/javascript">
   $(function(){
    alert($("#testID").html());
    alert($("div").html());
    alert($("form input"));
    alert($("form>input"));
   });
   
   
   
  </script>
    </head>
    <body>
        <p id="testID">ddddd</p>
  <div>test</div>
  <div>test2</div>
  
  <form>
   <label>name:</label>
   <input name="name"/>
   <fieldset>
    <label>Newsletter:</label>
    <input name="newsletter"/>
   </fieldset>
  </form>
  <input name="name"/>
    </body>
</html>

 

jq2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery基本选择器</title>
  <script  type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
  <script>
   $(function(){
    //id选择器
    $("#btn2").click(function(){
     $("#div_1").css("background","#FFD97F");
    });
    
    //类选择器
    $("#btn3").click(function(){
     $(".myclass").css("background","#C7D0EB");
    });
    //*选择器用法
    $("#btn4").click(function(){
     $("*").css("background","#CA4B08");
     
    });
    //标签选择器用法
    $("#btn5").click(function(){
     $("div").css("background","red");
    });
    
    //群组标签选择器用法
    $("#btn6").click(function(){
     $("div,p").css("background","blue");
    });
    
   $("#btn1").click(function(){
    $("*").removeAttr("style");//删除元素中指定的属性
    
   }); 
   
   
   });
   
  </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1"  value="清除样式按钮"/>
   <input type="button" name="btn2"  id="btn2"  value="id选择器按钮"/>
    <input type="button" name="btn3"  id="btn3"  value="类选择器按钮"/>
     <input type="button" name="btn4"  id="btn4"  value="*选择器按钮"/>
      <input type="button" name="btn5"  id="btn5"  value="标签选择器按钮"/>
    <input type="button" name="btn6"  id="btn6"  value="群组标签选择器按钮"/>
   <div id="div_1">我是div——1，值是div_1</div>
   <div class="myclass">我是di，值为myclass</div>
   <p>dddddd</p>
    </body>
</html>

jq3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery层次选择器</title>
        <script  type="text/javascript" src="lib/jquery/jquery-1.3.2.js">
        </script>
        <script>
            $(function(){
           
                $("#btn1").click(function(){
                    $("*").removeAttr("style");//删除元素中指定的属性
                });
    
    $("#btn2").click(function(){
     $("body ul").css("background","yellow");//选择所有元素包括后代元素
    });
    
    $("#btn3").click(function(){
     //找到body下面的id为ul_1元素，再找id为ul_1下面的子元素ul
     $("body > #ul_1 > ul").css("background","#22674B");
    });
    
    $("#btn4").click(function(){
     //找到紧接着id为ul_1后面的ul元素
     $("#ul_1 + ul").css("background","#D95200");
    });
    
    $("#btn5").click(function(){
     //找到不是紧接着id为ul_1后面的ul元素
     $("#ul_1 ~ ul").css("background","#D95200");
    });
            });
           
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="清除样式按钮"/>
  <input type="button" id="btn2" value="${body ul}"/>
  <input type="button" id="btn3" value="${body > #ul_1 >ul}"/>
  <input type="button" id="btn4" value="${#ul_1+ul}"/>
  <input type="button" id="btn5" value="${#ul_1~ul}"/>
  
  <ul id="ul_1">
   
   id为ul_1的ul标签
   <ul>ul的孩子元素</ul>
  </ul>
  <ul id="ul_1">
   
   id为ul_1的ul标签
   <input type="button" value="呵呵"/>
  </ul>
  <input type="button" value="哼(ˉ(∞)ˉ)唧">
  <ul id="ul_2">
   id为ul_2的ul标签
  </ul>
    </body>
</html>

jq4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> 基本过滤器 </title>

        <script  type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#btn1").click(function() {
                    $("*").removeAttr("style");
                    //删除元素中指定的属性
                });

                $("#btn2").click(function() {
                    $("ul:first").css("background", "red");
                });
                $("#btn3").click(function() {
                    $("ul:last").css("background", "yellow");
                });

                $("#btn4").click(function() {
                    $("ul:not(#ul_1)").css("background", "green");
                });

                $("#btn5").click(function() {
                    $("ul:eq(2)").css("background", "black");
                });

                $("#btn6").click(function() {
                    $("ul:odd").css("background", "yellow");
                });

                $("#btn7").click(function() {
                    $("ul:even").css("background", "black");
                });
                $("#btn8").click(function() {
                    $("ul:gt(1)").css("background","red");
                });
                 $("#btn9").click(function() {
                    $("ul:lt(1)").css("background","yellow");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1"  value="清除样式按钮"/>
        <input type="button" name="btn2" id="btn2"  value="选取第一个ul"/>
        <input type="button" name="btn3" id="btn3"  value="选取最后一个ul"/>
        <input type="button" name="btn4" id="btn4"  value="选取id值不是ul_1的标签"/>
        <input type="button" name="btn5" id="btn5"  value="选取索引值是2的标签"/>
        <input type="button" name="btn6" id="btn6" value="选取索引值为奇数的标签" />
        <input type="button" name="btn7" id="btn7" value="选取索引为偶数的标签" />
        <input type="button" name="btn8" id="btn8" value="选取索引大于1的标签" />
        <input type="button" name="btn9" id="btn9" value="选取索引小于1的标签" />
        <ul id="ul_1">
            test1
        </ul>
        <ul id="ul_2">
            test2
        </ul>
        <ul id="ul_3">
            test3
        </ul>
    </body>
</html>

 

jq5.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> jquery选择器使用 </title>

        <script  type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#btn1").click(function() {
                    $("*").removeAttr("style");
                    //删除元素中指定的属性
                });

                $("#btn2").click(function() {
                    $("div:contains('你好')").css("background", "green");
                });

                $("#btn3").click(function() {
                    $("div:empty").css("background", "green");
                });
                $("#btn4").click(function() {
                    $("table:has(tr)").css("background", "black");
                });

                $("#btn5").click(function() {
                    $("div:parent").css("background", "black");
                });

                $("#btn6").click(function() {
                    $("table:parent").css("background", "yellow");
                });

                $("#btn7").click(function() {
                    //查找含有border属性的table标签元素
                    $("table:[border]").css("background", "red");
                });

                $("#btn8").click(function() {
                    //查找table有border属性，并且border属性的值为2
                    $("table[border=2]").css("background", "red");
                });
                $("#btn9").click(function() {
                    //查找table有border属性，并且border属性的值不为2
                    $("table[border!=2]").css("background", "red");
                });

                $("#btn10").click(function() {
                    //查找tr有title属性，并且title属性的值以张三开头的的tr标签元素
                    $("tr[title^=张三]").css("background", "red");
                });
                $("#btn11").click(function() {
                    //查找tr有title属性，并且title属性的值以张三结尾的的的tr标签元素
                    $("tr[title$=张三]").css("background", "red");
                });

                $("#btn12").click(function() {
                    //查找tr有title属性，并且title属性的值含有张三的tr标签元素
                    $("tr[title*=张三]").css("background", "red");
                });

                $("#btn13").click(function() {
                    //查找tr有title属性和clsss属性，并且title属性的值含有张三的tr标签元素
                    $("tr[title*=张三][class]").css("background", "red");
                });

                $("#btn14").click(function() {
                    //查找tr元素中td为偶数的td元素
                    //nth-child索引从1开始
                    $("tr td:nth-child(even)").css("background", "red");
                });

                $("#btn15").click(function() {
                    //查找tr元素中第一个td元素
                    $("tr td:first-child").css("background", "red");
                });

                $("#btn16").click(function() {
                    //查找tr元素中最后一个td元素
                    $("tr td:last-child").css("background", "red");
                });

                $("#btn17").click(function() {
                    //查找tr元素中唯一一个td元素
                    $("tr td:only-child").css("background", "red");
                });

                $("#bt1").click(function() {
                    $("#show").empty();
                    //清除div中的文本内容
                });

                $("#bt2").click(function() {
                    $("*").removeAttr("style");
                    //删除元素中指定的属性
                });

                $("#bt3").click(function() {
                    //查找表单中的密码框
                    $(":password").css("background", "green");
                });
                $("#bt4").click(function() {
                    //查找表单中的文本框
                    $(":text").css("background", "green");
                });

                $("#bt5").click(function() {
                    //查找表单中单选按钮的个数
                    var i = $(":radio").length;
                    //append主要为选中元素添加子元素
                    $("#show").append('单选按钮的个数' + i);
                });

                $("#bt6").click(function() {
                    //查找表单中复选按钮的个数
                    var i = $(":checkbox").length;
                    //append主要为选中元素添加子元素
                    $("#show").append('复选按钮的个数' + i);
                });

                $("#bt7").click(function() {
                    //查找表单中提交按钮
                    $(":submit").css("background", "green");

                });

                $("#bt8").click(function() {
                    //查找表单中重置按钮
                    $(":reset").css("background", "green");

                });

                $("#bt9").click(function() {
                    //查找表单中文件上传域
                    $(":file").css("background", "red");

                });

                $("#bt10").click(function() {
                    //使用表单中checked属性
                    //获取被选中的单选框和复选框
                    var i = $("input:checked").length;
                    $("#show").append('被选中的个数为' + i);
                });
               
                $("#bt11").click(function() {
                    //使用表单中selected属性
                    //获取下拉框被选中的名称
                    var i = $("select :selected").text();//text()：获取文本值
                    $("#show").append('下拉框被选中的文本名称为' + i);
                });

            });
        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1"  value="清除样式按钮"/>
        <input type="button" name="btn2" id="btn2"  value="div:contains('你好')"/>
        <input type="button" name="btn3" id="btn3" value="div:empty" />
        <input type="button" name="btn4" id="btn4" value="table:has(tr)" />
        <input type="button" name="btn5" id="btn5" value="div:parent 含有子元素的标签" />
        <input type="button" name="btn6" id="btn6" value="table:parent 含有子元素的标签" />
        <input type="button" id="btn7" name="btn7"  value="table[border]"/>
        <input type="button" name="btn8" id="btn8" value="table[border=2]" />
        <input type="button" name="btn9" id="btn9" value="table[border!=2]" />
        <input type="button" name="btn10" id="btn10" value="tr[title^=张三]" />
        <input type="button" name="btn11" id="btn11" value="tr[title$=张三]" />
        <input type="button" name="btn12" id="btn12" value="tr[title=张三]" />

        <input type="button"  name="btn13" id="btn13" value="tr[title*=张三][class]" />
        <input type="button"  name="btn14" id="btn14" value=" nth-child" />
        <input type="button"  name="btn15" id="btn15" value="first-child" />
        <input type="button"  name="btn16" id="btn16" value="last-child" />
        <input type="button"  name="btn17" id="btn17" value="only-child" />
        <div id="1">
            你好
        </div>
        <table border="2" width="100" bordercolor="#038fcd">
            <tr title="ddd张三">
                <td>第一列</td>
                <td>第一列2</td>
                <td>第一列3</td>
                <td>第一列4</td>
            </tr>

            <tr title="张三" class="myclass">
                <td>第一列1</td>
                <td>第一列1</td>
                <td>第一列1</td>
                <td>第一列1</td>
            </tr>
        </table>
        <table border="1" width="100" height="50" bordercolor="#ff0000">
            <tr>
                <td>第一列1</td>
                <td>第一列1</td>
                <td>第一列1</td>
                <td>第一列1</td>
            </tr>
        </table>
        <table border="1" width="100" height="50" bordercolor="#ff0000">
            <tr>
                <td>第一列1</td>

            </tr>
        </table>
        <div id="2">
            ddd
        </div>

        <input type="button" id="bt1" name="bt1" value="清除id中内容" />
        <input type="button" id="bt2" name="bt2" value="清除样式按钮" />
        <input type="button" id="bt3" name="bt3" value=":password" />
        <input type="button" id="bt4" name="bt4" value=":text" />
        <input type="button" id="bt5" name="bt5" value=":radio" />
        <input type="button" id="bt6" name="bt6" value=":checkbox" />
        <input type="button" id="bt7" name="bt7" value=":submit" />
        <input type="button" id="bt8" name="bt8" value=":reset" />
        <input type="button" id="bt9" name="bt9" value=":file" />
        <input type="button" id="bt10" name="bt10" value=":checked" />
        <input type="button" id="bt11" name="bt11" value=":selected" />
        <br />
        <form>
            学号:
            <input type="text" name="sno" id="sno"/>
            <br />
            姓名 :
            <input type="text" name="sname" id="sname"/>
            <br />
            密码:
            <input type="password" name="spass" id="spass"/>
            <br />
            性别:
            <input type="radio" name="ssex" id="ssex"/>

            男
            <input type="radio" name="ssex" id="ssexs"/>
            女
            <br />
            籍贯:
            <select name="sbirth" id="sbirth">
                <option  id="0" name="北京"> 北京 </option>
                <option id="3"> 西安 </option>
                <option id="4"> 四川 </option>
            </select>
            <br>

            爱好:
            <input type="checkbox" name="shobby" id="shobby"/>
            打男球
            <input type="checkbox" name="shobby2" id="shobby2"/>
            下棋
            <input type="checkbox" name="shobby2" id="shobby3"/>
            唱歌
            <br>
            上传
            <input type="file" name="supload" id="supload" />
            <br>
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form>
        <div id="show"></div>
    </body>
</html>

 

jq6.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> jquery选择器使用 </title>

        <script  type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#bt0").click(function() {
                    $("#show").empty()
                    //删除div中内容
                });

                $("#bt1").click(function() {
                    //查找li标签中属性title的值为java的
                    $("ul li[title='java']").css("background", "red");
                });

                $("#bt2").click(function() {
                    //查找li标签中属性title的值为java的
                    var a = $("ul li").attr("title");
                    //获取title属性
                    $("#show").append('属性值' + a);
                });

                $("#bt3").click(function() {
                    $("span").append("<b>我爱query 吗</b><br>")
                });

                $("#bt4").click(function() {
                    $("<b>你爱query 吗</b><br>").appendTo("span");
                });
               
                 $("#bt5").click(function() {
                    $("span").prepend("你爱jquertest");
                });
               
                 $("#bt6").click(function() {
                    $("QQ love jquery").prependTo("span");
                });
               
                 $("#bt7").click(function() {
                    $("span").before('<b>test</b>')
                });
               
                 $("#bt8").click(function() {
                    $("span").after('<b>tesdddt</b>')
                });
            });
        </script>
    </head>
    <body>
        <input type="button" name="bt0" id="bt0"  value="清除div中内容"/>
        <input type="button" name="bt1" id="bt1"  value="属性选中器"/>
        <input type="button" name="bt2" id="bt2"  value="attr"/>
        <input type="button" name="bt3" id="bt3"  value="append"/>
        <input type="button" name="bt4" id="bt4"  value="appendTo"/>
         <input type="button" name="bt5" id="bt5"  value="prepend"/>
          <input type="button" name="bt6" id="bt6"  value="prependTo"/>
           <input type="button" name="bt7" id="bt7"  value="before"/>
            <input type="button" name="bt8" id="bt8"  value="before"/>
        <p>
            <ul>

                <li title="java">
                    java
                </li>
                <li title="oracle">
                    oracle
                </li>
            </ul>
        </p>
        <div id="show"> </div>

        <span> 我爱jquery </span>
    </body>
</html>

 

jq7.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> jquery使用 </title>
        <style type="text/css">
            .divFrame {
                width: 260px;
                border: solid 1px #666;
                font-size: 10pt
            }
            .divTitle {
                background-color: #eee;
                padding: 5px
            }
            .divContent {
                padding: 8px;
                font-size: 9pt
            }
            .divTip {
                width: 244px;
                border: solid 1px #666;
                padding: 8px;
                font-size: 9pt;
                margin-top: 5px;
                display: none
            }
            .txtCss {
                border: solid 1px #ccc
            }
            .divBtn {
                padding-top: 5px
            }
            .divBtn.btnCss {
                border: solid 1px #535353;
                width: 60px
            }

            .divDefault {
                width: 26opx;
                font-size: 10px;
                padding: 5px
            }
            .divClick {
                width: 260px;
                border: solid 1px #666;
                font-size: 10px;
                background-color: #eee;
                padding: 5px
            }
            #tbStu tr th{background-color: red;color: #fff}
            #tbStu .trOdd{background-color:green}
        </style>
        <script  type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#btnSubmit").click(function() {
                    //获取文本值
                    var oTxtValue = $("#Text1").val();
                    //获取单选按钮值
                    var oRdoValue = $("#Radio1").is(':checked') ? "男" : "女";
                    //获取复选框按钮值
                    var onChkValue = $("#Checkbox1").is(':checked') ? "已婚" : "未婚";
                    //显示提示文本元素和内容
                    $("#divTip").css("display", "block").html(oTxtValue + "<br>" + oRdoValue + "<br>" + onChkValue);
                });

                //jquery控制css
                $(".divDefault").click(function() {
                    $(this).toggleClass('divClick').html("点击后的样式");
                });

             //实现隔行变色
             $("#tbStu tr:nth-child(even)").addClass("trOdd");
            
            });
        </script>
    </head>
    <body>
        <div class="divTitle">
            请输入如下信息
        </div>
        <div class="divContent">
            姓名：
            <input id="Text1" type="text" class="txtCss" />
            <br />
            性别:
            <input type="radio" id="Radio1" name="rdoSex"  value="男" />
            男
            <input type="radio" id="Radio2" name="rdoSex"  value="女" />
            女
            <br />
            婚否:
            <input  id="Checkbox1" type="checkbox" />
            <div class="divBtn">
                <input type="button" id="btnSubmit" value="提交" onclick="btnClick();" class="btnCss" />
            </div>

        </div>
        <div id="divTip" class="divTip"> </div>

        <div class="divDefault">
            点击前的样式
        </div>

        <table id="tbStu" cellpadding="0" cellspacing="0">
            <tr>
                <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
            </tr>
            <tr>
                <td>1</td><td>小米</td><td>男</td><td>230</td>
            </tr>
            <tr>
                <td>2</td><td>小高</td><td>女</td><td>4000</td>
            </tr>
            <tr>
                <td>3</td><td>小色</td><td>女</td><td>5000</td>
            </tr>

        </table>
    </body>
</html>

 

 

 

nginx alias 不起作用 nginx alias 不起作用
原创粉丝点击
热门IT博客
python脚本运行python脚本运行
淘宝页头淘宝页头
java资源库社区
求购信息搜索软件
程序员节活动策划
b站唱见用什么软件
淘宝羊群效应
斯维尔算量软件
呼叫中心软件系统
官居几品存档数据
帝国cms灵动标签大全
怎么清空淘宝收藏夹
javascript作用域链
php设计模式应用场景
软件测试自我介绍
js统计下载次数
颜值高却没对象 知乎
国服魔兽世界mac版
下载新软件
js图片上传裁剪插件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 高压注浆机怎么使用 高压灌浆机配件 灌浆泵 灰浆泵 灌浆膜 灌浆膜厂家 灌溉管材 农业灌溉管厂家 灌满堵住 灌满堵住h 攻尿在里面灌满 灌满萝莉宫腔 将军灌满精水 黑胡椒烤肠 烤肠批发一袋多少钱 猪肺 猪肺疫 猪肺能吃吗 炒猪肺 猪血清肺 猪肺做法 洋葱炒猪肺 清洗猪肺有窍门 孕妇可以吃猪肺吗 猪肺为什么不能吃 猪肺多少钱一斤 爆炒猪肺的家常做法 狗吃猪肺好不好 猪肺的做法大全家常 将一整瓶红酒灌入她体内 瓶装灌装机价格 瓶装自动灌装机 瓶装灌装机 瓶装水灌装机价格 液体瓶装灌装机 灌砂桶 灌砂法 灌篮高手之天才之路 灌篮之登峰造极 灌篮之我是妖孽 灌篮高手之神

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里