java学习【web基础-jQuery入门】

来源:互联网 发布:限制p2p网络连接数 编辑:程序博客网 时间:2024/06/16 04:45

一:
jQuery的引入:就是一个是js类库,对常用的方法和对象进行封装,方便我们使用.

1.我们之前DOM编程:var obj = Document.getElementById(id); 此处获取的obj是什么对象---dom对象2.我们如果想使用Jquery中里面已经封装好的一些方法和属性的的话,首先获取变迁的jQuery对象,然后通过里面封装的一些方法和属性对jQuery对象进行操作

例如:

以前通过js获取对象的时候var obj=document.getElementById("id"); -- 获取的obj是一个dom对象funtion getId(id){    return document.getElementById("id");}$("选择器")===>获取元素  -- 获取的是标签元素对应的jQuery对象

二:
2.0 jquery和html的整合
jquery是单独的js文件
通过script标签的src属性导入即可

2.1 获取一个jquery对象
$(“选择器”) 或者 jQuery(“选择器”)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><script src="../js/jquery-1.11.0.min.js"></script><body>    <input type="text" id="username" value="jack"/></body><script>    //1.使用原生js代码获取我们上面的input标签    var username = document.getElementById("username");    //alert(username.value);    //2.使用jQuery的方式获取我们上面的input标签对象,注意,此时我们获取的是jQuery对象    //var $jQuery =  $("选择器");    var $username = $("#username");    //alert($username.val());//调用jQuery对象的val()方法获取value属性值    //3.使用另一种方式获取jQuery对象    var $username2 = jQuery("#username");    alert($username2.val());</script></html>

2.2 dom对象和jquery对象之间的转换

dom对象===>jquery对象       $(dom对象)jquery对象===>dom对象    方式1:        jquery对象[index]    方式2:        jquery对象.get(index)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head>    <script src="../js/jquery-1.11.0.min.js"></script><body>    <input type="text" id="username" value="jack"/></body><script>    //dom-->>jQuery对象,转换方式$(dom对象)    var username = document.getElementById("username");    var $username = $(username);    //alert($username.val());    //jQury对象--->>dom对象    //方式1: jQuery对象.get(index);    var username2 = $username.get(0);    //alert(username2.value);    //jQury对象--->>dom对象    //方式2: jQuery对象[index]    var username3 = $username[0];    alert(username3.value);</script></html>

2.3 页面加载:
js:
window.onload=function(){}//在一个页面中只能使用一次

jquery 在一个页面中可以使用多次    方式1:        $(function(){...})    方式2:        $(document).ready(function(){});
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../js/jquery-1.11.0.min.js"></script>    <script type="text/javascript">        //使用原生的js,当页面加载完毕之后,我执行一些操作        //在整个html页面加载成功之后,我弹出一句话,"页面加载成功啦"/*      window.onload=function(){            //这里面的代码所有都是在html页面加载成功之后才执行的            //alert("页面加载成功了");            //给一个标签施加事件的另一种方式(派发事件)            //格式:dom对象.事件名称=fucntion(){....}            /*var bt1 = document.getElementById("bt1");            bt1.onclick=function(){                alert("我被点击了");            }*/            /*alert("今天天气真热");        }        */        //页面加载成功的事件,        //原生的js代码,当页面加载成功之后,整个页面只能写一个window.onload,因为即便写的多了,也不执行/*      window.onload=function(){            alert("中午真的很困,能不能给个躺椅");        }*/        //使用jQuery中的代码,实现页面加载成功的事件        //方式1:        $(function(){            //这里面的所有的代码都是当整个html页面家在成功之后才执行的            //alert("天气凉快");        })        //第二个页面家在成功之后要执行的事件        //注意:当我们使用jQuery中的方式执行页面加载成功之后的事件的时候,可以执行多个        $(function(){            //alert("恭喜你获得一个空调扇");        })        //使用jQuery方式执行页面加载成功之后的事件        //方式2:        $(document).ready(function(){            //页面加载成功之后要执行的代码            alert("方式2执行成功");                   })        </script>    </head>    <body>    <input type="button" id="bt1" value="按钮"/>      </body></html>

2.4 派发事件:

    $("选择器").click(function(){...});等价于 原生js中    dom对象.onclick=function(){....}掌握事件:    focus    blur    change    click
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script src="../js/jquery-1.11.0.min.js"></script>        <script type="text/javascript">            //需求:给下面的button派发一个事件,单击事件            $(function(){                //页面加载成功                //jQury对象.事件(function(){...})                $("#bId").click(function(){                    alert("我被点击了")                })            })        </script>    </head>    <body>        <input type="button" id="bId" value="点击查看" />    </body></html>
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>常见事件</title>        <style type="text/css">            #e02{                border: 1px solid #000000;                height: 200px;                width: 200px;            }        </style>        <script src="../js/jquery-1.11.0.min.js"></script>        <script type="text/javascript">            $(function(){             //需求:给e01加上失去焦点和获取焦点事件,键盘按下和键盘弹起的事件                $("#e01").blur(function(){                    $("#textMsg").html("失去焦点");                }).focus(function(){                    $("#textMsg").html("获取焦点");                }).keydown(function(){                    $("#textMsg").html("键盘被按下");                }).keyup(function(){                    $("#textMsg").html("键盘弹起");                })            //需求:给e02加上鼠标移入和移除的事件,            $("#e02").mouseover(function(){                $("#divMsg").html("鼠标移入了");            }).mouseout(function(){                $("#divMsg").html("鼠标移出了");            })            //需求:给e03加上单击和双双击的事件            $("#e03").click(function(){                $("#buttonMsg").html("我被单击了");            }).dblclick(function(){                $("#buttonMsg").html("我被双击了");            })            })        </script>    </head>    <body>        <input id="e01" type="text" /><span id="textMsg"></span> <br/>        <hr/>        <div id="e02" ></div><span id="divMsg"></span> <br/>        <hr/>        <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>    </body></html>

2.5 jquery中效果:

隐藏或展示    show(毫秒数)     hide(毫秒数)滑入或滑出    slideDown(毫秒数):向下滑入    slideUp(毫秒数):向上滑出淡入或淡出    fadeIn(int):淡入    fadeOut(int):淡出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>    <style type="text/css">        div{            border:1px solid #000;            width:100px;            height:100px;        }    </style>    <!-- 导入js库 ,注意:使用src属性之后,标签体中不能写入内容-->    <script src="../js/jquery-1.11.0.min.js"></script>    <script type="text/javascript">        $(document).ready(function(){            //给b1加上一个单击事件            //<input type="button" id="b1" value="显示/隐藏 b1Div" />            $("#b1").click(function(){                //获取id="b1Div",jQuery对象                //show(毫秒数):通过多少时间显示                //hide(毫秒数):通过多少时间隐藏                //toggle(毫秒数):如果隐藏则显示,如果显示则隐藏                //$("#b1Div").hide(2000);                $("#b1Div").toggle(2000);            })            //<input type="button" id="b2" value="滑出/滑入b2Div"/>            $("#b2").click(function(){                //slideDown(毫秒数):通过多少时间从上到下划入                //slideUp(毫秒数):通过多少时间,从下往上划出                //slideToggle(毫秒数):如果划入则划出,如果划出则划入                $("#b2Div").slideToggle(3000);            })            //<input type="button" id="b3" value="淡出/淡入b3Div" />            $("#b3").click(function(){                //fadeIn(毫秒数):通过多少时间单入                //fadeOut(毫秒数):通过多少时间淡出                //fadeToggle(毫秒数):如果淡入则淡出如果淡出则淡入                //$("#b3Div").fadeOut(2000);                $("#b3Div").fadeToggle(2000);            })        });    </script></head><body>    <input type="button" id="b1" value="显示/隐藏 b1Div" />    <div id="b1Div"></div> <br/>    <input type="button" id="b2" value="滑出/滑入b2Div"/>    <div id="b2Div"></div> <br/>    <input type="button" id="b3" value="淡出/淡入b3Div" />    <div id="b3Div"></div></body></html>

三:
jQuery:
案例-弹出广告
技术:
定时器
jQuery

案例-步骤分析

1.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();2.编写展示广告方法     获取div,然后调用效果方法    设置另一个定时器 隐藏3.编写隐藏广告的方法    获取div,然后调用效果方法

四:
选择器总结:

4.1 基本选择器★    $("#id值")  $(".class值")  $("标签名")      了解:$("*")    理解:获取多个选择器 用逗号隔开        $("#id值,.class值")
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>01-基本选择器.html</title> <!--   引入jQuery -->  <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" />  <script type="text/javascript">/*  <input type="button" value="选择 id为 one 的元素." id="btn1"/>    <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>  <input type="button" value="选择 所有的元素." id="btn4"/>  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>*/    //当页面加载成功之后派发时间    //<input type="button" value="选择 id为 one 的元素." id="btn1"/>     $(function(){    //当页面加载成功之后派发时间    //<input type="button" value="选择 id为 one 的元素." id="btn1"/>         $("#btn1").click(function(){            $("#one").css("background-color","red")        })    //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>    $("#btn2").click(function(){        $(".mini").css("background-color","green");    })    //input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>    $("#btn3").click(function(){        $("div").css("background-color","green");    })    //<input type="button" value="选择 所有的元素." id="btn4"/>    $("#btn4").click(function(){        $("*").css("background-color","green");    })    //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>    $("#btn5").click(function(){        $("span,#two").    css("background-color","green");    })    }) </script></head><body>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /> <h3>基本选择器.</h3> <!-- 控制按钮 -->  <input type="button" value="选择 id为 one 的元素." id="btn1"/>    <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>  <input type="button" value="选择 所有的元素." id="btn4"/>  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>  <br /><br />   <!-- 测试的元素 -->  <div class="one" id="one" > id为one,class为one的di      <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >     id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>  <div class="hide">class为"hide"的div</div>  <div>  包含input的type为"hidden"的div<input type="hidden" size="8"/>  </div>  <span id="mover">正在执行动画的span元素.</span></body></html>
4.2 层次选择器 ★    a b:a的所有b后代    a>b:a的所有b孩子(不包括孙子)    a+b:a的下一个兄弟(大兄弟)    a~b:a的所有弟弟们
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>02-层次选择器.html</title> <!--   引入jQuery -->  <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" />  <script type="text/javascript">    //当页面加载成功之后,我们需要给每一个按钮派发事件    $(function(){  //<input type="button" value="选择 body内的所有div元素." id="btn1"/>    $("#btn1").click(function(){        //a b:a的所有b后代        $("body div").css("background-color","red");    })  //<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>  //a>b:a的所有b孩子(不包括孙子)  $("#btn2").click(function(){    $("body>div").css("background-color","red");  })  //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>  //a+b:a的下一个兄弟(大兄弟)  $("#btn3").click(function(){    $("#one+div").css("background-color","red");  })  //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>  //a~b:a的所有弟弟们    $("#btn4").click(function(){        $("#two~div").css("background-color","red");      })    }) </script></head><body>  <h3>层次选择器.</h3>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />  <input type="button" value="选择 body内的所有div元素." id="btn1"/>  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>  <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>  <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>  <br />  <br />   <!-- 测试的元素 -->  <div class="one" id="one" > id为one,class为one的div      <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >     id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>  <div class="hide">class为"hide"的div</div>  <div>  包含input的type为"hidden"的div<input type="hidden" size="8"/>  </div>  <span id="mover">正在执行动画的span元素.</span></body></html>
4.3 基本过滤选择器:★    :frist 第一个    :last 最后一个    :odd  索引奇数    :even 索引偶数    :eq(index) 指定索引    :gt(index) >索引大于哪一个值    :lt(index) <索引小于哪一个值
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>03-基本过滤选择器.html</title> <!--   引入jQuery -->  <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" />  <script type="text/javascript">    $(function(){  //<input type="button" value="选择第一个div元素." id="btn1"/>  $("#btn1").click(function(){    $("div:first").css("background-color","red");  })  //<input type="button" value="选择最后一个div元素." id="btn2"/>   $("#btn2").click(function(){    $("div:last").css("background-color","red");  })  //<input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>  $("#btn3").click(function(){    $("div:even").css("background-color","red");  })  //<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>   $("#btn4").click(function(){    $("div:odd").css("background-color","red");  })  //<input type="button" value="选择索引值等于3的div元素." id="btn5"/>  $("#btn5").click(function(){    $("div:eq(3)").css("background-color","red");  })  //<input type="button" value="选择索引值大于3的div元素." id="btn6"/>  $("#btn6").click(function(){    $("div:gt(3)").css("background-color","red");  })    }); </script></head><body>  <h3>基本过滤选择器.</h3>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />  <input type="button" value="选择第一个div元素." id="btn1"/>  <input type="button" value="选择最后一个div元素." id="btn2"/>  <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>  <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>  <input type="button" value="选择索引值等于3的div元素." id="btn5"/>  <input type="button" value="选择索引值大于3的div元素." id="btn6"/><br /><br />   <!-- 测试的元素 -->  <div class="one" id="one" > id为one,class为one的div      <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >     id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>  <div class="hide">class为"hide"的div</div>  <div>  包含input的type为"hidden"的div<input type="hidden" size="8"/>  </div>  <span id="mover">正在执行动画的span元素.</span></body></html>
4.4 内容过滤:    :has("选择器"):包含指定选择器的元素
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>04-内容过滤选择器.html</title> <!--   引入jQuery -->  <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" />  <script type="text/javascript">    $(function(){        //<input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/>        $("#btn1").click(function(){            //:has("选择器"):包含指定选择器的元素            $("div:has('.mini')").css("background-color","red");        })    }); </script></head><body>  <h3>内容过滤选择器.</h3>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />  <input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/><br /><br />   <!-- 测试的元素 -->  <div class="one" id="one" > id为one,class为one的div      <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >     id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>  <div class="hide">class为"hide"的div</div>  <div>  包含input的type为"hidden"的div<input type="hidden" size="8"/>  </div>  <span id="mover">正在执行动画的span元素.</span></body></html>
4.5 可见过滤:    :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none    :visible 
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>05-可见性过滤选择器.html</title> <!--   引入jQuery -->  <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" />  <script type="text/javascript">    $(function(){  //<input type="button" value=" 选取所有可见的div元素"  id="b1"/>  $("#b1").click(function(){    //:visible     $("div:visible").css("background-color","red");  })  //<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>    $("#b2").click(function(){        //:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none        $("div:hidden").css("background-color","red").show(1000);    })    }); </script></head><body>  <h3>可见性过滤选择器.</h3>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>  <br/><br/>  <input type="button" value=" 选取所有可见的div元素"  id="b1"/>  <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>  <br /><br />  <div class="one" id="one" > id为one,class为one的div      <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >     id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>  <div class="hide">class为"hide"的div</div></body></html>
4.6 属性过滤器:★    [属性名]    [属性名="值"]
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>06-属性选择器.html</title> <!--   引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" />  <script type="text/javascript">    $(function(){  //<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>  $("#btn1").click(function(){    $("[title]").css("background-color","red");  })  //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>  $("#btn2").click(function(){    $("[title='test']").css("background-color","red");  })    }); </script><body>  <button id="reset">手动重置页面元素</button>  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>      <h3> 属性选择器.</h3>  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>    <br /><br />   <div class="one" id="one" > id为one,class为one的div      <div class="mini">class为mini</div>  </div>    <div class="one"  id="two" title="test" >     id为two,class为one,title为test的div.      <div class="mini"  title="other">class为mini,title为other</div>      <div class="mini"  title="test">class为mini,title为test</div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"></div>  </div>  <div class="one">      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini">class为mini</div>      <div class="mini"  title="tesst">class为mini,title为tesst</div>  </div>  <div style="display:none;"  class="none">style的display为"none"的div</div>  <div class="hide">class为"hide"的div</div>  <div>  包含input的type为"hidden"的div<input type="hidden" size="8"/>  </div></body></html>
4.7 表单过滤:    :input  所有的表单子标签  input select textarea button    input   仅仅获取input标签
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>09-表单选择器.html</title> <!--   引入jQuery --> <script src="../js/jquery-1.11.0.min.js"></script> <script src="../js/assist.js"></script> <link rel="stylesheet" type="text/css" href="../css/style.css" />  <script type="text/javascript">    $(function(){        //1.获取form标签中的所有的子标签        //alert($("#form1 :input").size());        //这种获取方式,不仅可以获取到form标签中的input标签,还可以获取到其中的button,textarea        //2.仅仅获取input标签        alert($("#form1 input").size());    }); </script></head><body>  <input type="button" value="选取所有的表单子元素" id="btn1"/><br />  <form id="form1" action="#">    <input type="button" value="Button"/><br/>    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>    <input type="file" /><br/>    <input type="hidden" /><br/>    <input type="image" src="1.jpg"/><br/>    <input type="password" /><br/>    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>    <input type="reset" /><br/>    <input type="submit" value="提交"/><br/>    <input type="text" /><br/>    <select><option>Option</option></select><br/>    <textarea rows="5" cols="20"></textarea><br/>    <button>Button</button><br/>  </form>  <div></div></body></html>