day05.jQuery

  1. 总体知识梳理:

2.概述:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--导入js-->

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

    </head>

    <body>

        <input type="text" id="ids" value="xq" />

        

        <script>

            //jQuery是关键字

            //固定格式:jQuery("选择器")--jQuery对象

            //jQuery--简写$

            /*var val = jQuery("#ids").val();*/

            var val2 = $("#ids").val();

            alert(val2);

        </script>

    </body>

</html>

 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--导入js-->

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

        

    </head>

    <body>

        <input type="text" id="ids" value="xq" />

        

        <script>

            //DOM对象和jQuery对象的转换

            //dom转换为jQuery----$(dom对象)

            var domDiv = document.getElementById("ids");

            //alert($(domDiv).val());

 

            //jQuery对象转换为dom对象

            var jDiv = $("#ids");

            /*var dodiv = jDiv[0];*/

            var dodiv = jDiv.get(0);

            alert(dodiv.value);

            

        </script>

    </body>

</html>

 

3.页面加载

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

        <script>

            //js加载 :js的页面加载方法只能写一个,多写只执行最后一个

            window.onload= function (){

                alert("js1");

            }

            window.onload= function(){

                alert("js2");

            }

            

            //jQuery加载: jQuery页面加载方法可加载多个

            //jQuery加载优先级比js,所以先加载jQuery然后才加载js

            //加载结果:jQuery1-->jQuery2-->js2

            $(function(){

                alert("jQuery1");

            })

            

            $(function(){

                alert("jQuery2");

            })

        </script>

    </head>

    <body>

    </body>

</html>

 

 

4.基本选择器

代码:

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--导入js-->

        <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>

        <!--导入css文件-->

        <link rel="stylesheet" href="../../css/style.css" />

    </head>

 

    <body>

        <h3>基本选择器.</h3>

 

        <!-- 测试的元素 -->

        <div class="one" id="one">

            idone,classonediv

            <div class="mini">classmini</div>

        </div>

 

        <div class="one" id="two" title="test">

            idtwo,classone,titletestdiv.

            <div class="mini" title="other">classmini,titleother</div>

            <div class="mini" title="test">classmini,titletest</div>

        </div>

 

        <div class="one">

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini"></div>

        </div>

 

        <div class="one">

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini" title="tesst">classmini,titletesst</div>

        </div>

 

        <div style="display:none;" class="none">styledisplay"none"div</div>

 

        <div class="hide">class"hide"div</div>

 

        <div>

            包含inputtype"hidden"div<input type="hidden" size="8" />

        </div>

        <span>

span标签

         </span>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

 

        <button onclick="fn1()">选择idone的元素</button>

        <button onclick="fn2()">选择classmini的元素</button>

        <button onclick="fn3()">选择元素名为div的元素</button>

        <button onclick="fn4()">选择所有的元素</button>

        <button onclick="fn5()">选择元素名为spanidtwo的元素</button>

        

        <script>

            //选择idone的元素

            function fn1(){

                $("#one").css("background","aqua");

            }

            //选择classmini的元素

            function fn2(){

                $(".mini").css("background","aqua");

            }

            //选择元素名为div的元素

            function fn3(){

                $("div").css("background","aqua");

            }

            //选择所有的元素

            function fn4(){

                $("*").css("background","aqua");

            }

            //选择元素名为spanidtwo的元素

            function fn5(){

                $("span,#two").css("background","aqua");

            }

        </script>

    </body>

 

</html>

 

 

5.层级选择器

代码:

<!DOCTYPE html>

<html>

 

    <head>

        <title>层次选择器</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

        <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>

        

        <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

 

    <body>

 

        <h3>层次选择器.</h3>

 

        <!-- 测试的元素 -->

        <div class="one" id="one">

            idone,classonediv

            <div class="mini">classmini</div>

        </div>

 

        <div class="one" id="two" title="test">

            idtwo,classone,titletestdiv.

            <div class="mini" title="other">classmini,titleother</div>

            <div class="mini" title="test">classmini,titletest</div>

        </div>

 

        <div class="one">

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini"></div>

        </div>

 

        <div class="one">

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini">classmini</div>

            <div class="mini" title="tesst">classmini,titletesst</div>

        </div>

 

        <div style="display:none;" class="none">styledisplay"none"div</div>

 

        <div class="hide">class"hide"div</div>

 

        <div>

            包含inputtype"hidden"div<input type="hidden" size="8" />

        </div>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

 

        <button onclick="fn1()">选择body内所有的div元素</button>

        <button onclick="fn2()">选择body的子元素div</button>

        <button onclick="fn3()">选择idone的下一个(兄弟)div元素</button>

        <button onclick="fn4()">选择idtwo的元素后面的所有div元素</button>

        <script>

            //选择body内所有的div元素

            function fn1() {

                $("body div").css("background","aqua");

            }

            //选择body的子元素div

            function fn2() {

                $("body>div").css("background","aqua");

            }

            //选择idone的下一个div元素

            function fn3() {

                $("#one+div").css("background","aqua");

            }

            //选择idtwo的元素后面的所有div元素

            function fn4() {

                $("#two~div").css("background","aqua");

            }

        </script>

    </body>

 

</html>

 

 

6.过滤选择器

局部代码:

基本过滤选择器:

<script>

            //选择第一个div元素

            function fun1() {

                $("div:first").css("background","#8A2BE2");

            }

            //选择最后一个div

            function fun2() {

                $("div:last").css("background","#8A2BE2");

            }

            //选择class不为one的元素的所有div元素$("dom:not(.one)")

            function fun3() {

                $("div:not(.one)").css("background","#8A2BE2");

                

            }

 

            //"选择索引值为偶数
div元素. even:偶数 odd:奇数"

            function fun4() {

                $("div:even").css("background","#8A2BE2");

            }

 

            //选择索引值奇数元素

            function fun5() {

                $("div:odd").css("background","#8A2BE2");

            }

            //选择索引值等于3div元素."

            function fun6() {

                $("div:eq(3)").css("background","#8A2BE2");

            }

            //选择索引值大于3div元素.

            function fun7() {

                $("div:gt(3)").css("background","#8A2BE2");

            }

            //选择索引值小于3div元素.

            function fun8() {

                $("div:lt(3)").css("background","#8A2BE2");

            }

            //选择标题元素

            function fun9() {

                $(":header").css("background","#8A2BE2");

            }

            //匹配动画

            function fun10() {

                $(":animated").css("background","#8A2BE2");

            }

        </script>

内容过滤选择器:

<script>

     //选择含有文本"di"div元素 $("tagName:contains('di')")

     function fn1(){

         $("div:contains('di')").css("background","#8A2BE2");

     }

     //div元素 $("tagName:empty")

     function fn2(){

         $("div:empty").css("background","#8A2BE2");

     }

     //选择包含classmini元素的div元素$("tagName:has(.mini)")

     function fn3(){

         $("div:has(.mini)").css("background","#8A2BE2");

     }

     //不为空的div元素$("tagName:parent")

     function fn4(){

         $("div:parent").css("background","#8A2BE2");

     }

    </script>

 

可见性过滤选择器:

<script>

     //选择所有的可见的div元素,设置样式

     function fn1(){

             $("div:visible").css("background","aliceblue");

     }

    
 

     //2.选中不可见的div元素用show();

     function fn2(){

             $("div:hiden").show(2000).css("background","aliceblue");

         
 

     }    

    </script>

 

属性过滤选择器:

<script>

        //选取含有属性titlediv元素.$("tagName[title]");

         function fn1(){    

             $("div[title]").css("background","antiquewhite");

         }

         //选取属性title值等于testdiv元素。$("tagName[title='test']")

         function fn2(){

             $("div[title=test]").css("background","antiquewhite");

         }

         //选取属性title值不等于testdiv元素!=

         function fn3(){    

             $("div[title!=test]").css("background","antiquewhite");

         }

         //选取属性title值以te开始的div元素^=

         function fn4(){    

             $("div[title^=te]").css("background","antiquewhite");

         }

         //选取属性title值以est结束的div元素$=

         function fn5(){    

             $("div[title$=est]").css("background","antiquewhite");

         }

         //选取属性title值包含esdiv元素 *=

         function fn6(){    

             $("div[title*=es]").css("background","antiquewhite");

         }

         //组合属性选择器,首先选取有属性iddiv元素,然后在选择属性中title
含有es的元素$("tagName[id][title*='es']")

         function fn7(){    

             $("div[id][title*=es]").css("background","antiquewhite");

         }

    </script>

子元素过滤选择器:

<script>

        //选取classonediv下的第2个元素div.one :nth-child(2);

        function fn1(){

            $("div.one :nth-child(2)").css("background","chartreuse");

        }

        //选取classonediv下的第1个元素

        function fn2(){

            $("div.one :first-child").css("background","chartreuse");

        }

        //选取classonediv下的最后一个元素

        function fn3(){

            $("div.one :last-child").css("background","chartreuse");

        }

        //选取classonediv仅有的一个元素

        function fn4(){

            $("div.one :only-child").css("background","chartreuse");

            //注意:每个one后有空格,若没有空格显示错误
原因可能是后边的是子类元素要加空格

        }

    </script>

表单过滤选择器:

 

<!DOCTYPE html>

<html>

<head>

<title>表单.html</title>

    
 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

<script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

    $(function(){

        // text框和password框,添加失去焦点事件

        /*$("input").blur(

            function(){

                alert("sss");

            }

        )*/

        

        $(":text").blur(

            function(){

            alert("用户名框失去焦点");

        })

        

        $(":password").blur(

            function(){

            alert("密码框失去焦点");

        })

    });

</script>

</head>

<body>

    <form action="chenggong.html" method="post" id="myform">

        用户名 <input type="text" name="username" /><br/>

        密码 <input type="password" name="password" /><br/>

    </form>

</body>

</html>

表单对象属性:

 

<!DOCTYPE html>

 

<html>

 

<head>

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

<title>表单对象属性过滤选择器</title>

 

<!-- 引入jQuery -->

 

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

 

<link rel="stylesheet" type="text/css" href="./css/style.css" />

   
 

</head>

 

<body>

 

可用元素:<input name="add" value="可用文本框"/> <br/>

 

不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>

   
 

<button id="btn1" onclick="fn1()">获得可用属性的标签</button>

 

<button id="btn2" onclick="fn2()"> 获得不可用属性标签</button>

 

<script>

 

//获得可用的input标签(dom:enabled)

 

function fn1(){

   
 

$("input:enabled").css("background","red");

 

}

 

//获得不可用的input标签

 

function fn2(){

   
 

$("input:disabled").css("background","red");

 

}

 

</script>

 

</body>

 

</html>

   

 

 

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

   
 

<!-- 引入jQuery -->

 

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

 

<link rel="stylesheet" type="text/css" href="./css/style.css" />

   
 

<script type="text/javascript">

 

$(function(){

 

//获取多选框选中的个数

 

$("#btn1").click(function(){

   
 

var len = $("input[name='newsletter']:checked").length;

 

alert(len)

   
 

});

 

//获取下拉框选中的内容

 

$("#btn2").click(function(){

 

//lenth:长度 size() 长度。

   
 

/*var len1 = $(":selected").size();

 

alert(len1);*/

 

//jQUery自己的循环 each循环

   
 

/*

 

each循环 :对数组对象进行循环,

 

每一个对象循环到的时候 都会调用一次function方法。

 

* */

   
 

/*$(":selected").each(function(){

   
 

//this 代表循环到的当前对象 但是他是一个dom对象

 

alert( $(this).val());

 

})

 

*/

   
 

$(":selected").each(function(n,obj){

 

// n:相当于循环次数 ,从0开始

 

//obj:相当于this 当前对象 dom对象 $(obj)

 

alert(n);

 

alert($(obj).val());

   
 

})

   
 

});

 

})

 

</script>

   
 

</head>

 

<body>

 

<button id="btn1">获取多选框选中的个数.</button>

 

<button id="btn2">获取下拉框选中的内容.</button>

   
 

<br /><br />

 

多选框:<br/>

 

<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1

 

<input type="checkbox" name="newsletter" value="test2" />test2

 

<input type="checkbox" name="newsletter" value="test3" />test3

 

<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4

 

<input type="checkbox" name="newsletter" value="test5" />test5

 

<div id="checkboxDivId"></div>

   
 

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

 

下拉列表:<br/>

 

<select name="test" multiple="multiple" style="height:100px">

 

<option>浙江</option>

 

<option selected="selected">湖南</option>

 

<option>北京</option>

 

<option selected="selected">天津</option>

 

<option>广州</option>

 

<option>湖北</option>

 

</select>

 

</body>

 

</html>

   

 

7.效果:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--导入js-->

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

    </head>

    <body>

        <div id="ids" style="width: 200px; height: 200px; background-color: #568432;"></div>

        

        <input type="button" value="显示" onclick="fun1()"/>

        <input type="button" value="隐藏" onclick="fun2()"/>

        <input type="button" value="切换" onclick="fun3()"/>

        

        <input type="button" value="透明度" onclick="fun4()"/>

    </body>

    <script>

        function fun1(){

            //获得jQuery对象

            $("#ids").show(3000);//显示,参数毫秒

        }

        

        function fun2(){

            $("#ids").hide(3000);//隐藏

            

        }

        function fun3(){

            $("#ids").toggle(2000);//切换

        }

        

        function fun4(){

            $("#ids").fadeTo(2000,0.25);

        }

    </script>

</html>

 

 

8.操作:

代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .textClass{

                background-color: blueviolet;

            }

        </style>

        <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>

        <script>

            $(function (){

                //1.属性操作

                //我们给富贵(name="username")input标签添加一个title属性,属性值为富贵

                //attr():给标签添加属性

                $("#username").attr("title","富贵");

                //removeAttr():移除属性

                $("#uname").removeAttr("disabled");

                

                //2.样式操作

                //点击按钮的时候(先给绑定事件),(name="uname")input标签进行样式操作

                $("#buttonTd").click(function(){

                    /*//移除属性

                    $("#uname").removeClass("textClass");

                    //添加属性

                    $("#uname").addClass("textClass");*/

                    //切换属性

                    $("#uname").toggleClass("textClass");

                })

                

                //文本操作:

                //html(); 向开始标签和结束标签中间插入内容

                $("div").html("<a href=''>最近好吗?</a>");

                var val= $("div").html();

                alert(val);//打印结果为:<a href=''>最近好吗?</a>

                //text(): 类似于html但其操作的内容是文本

                var val1 = $("div").text();

                alert(val1);//打印结果为:最近好吗?

                $("div").text("<a href=''>你是谁?</a>");

                var val1 = $("div").text();

                alert(val1);//打印结果为:<a href=''>你是谁?</a>

            })

        </script>

    </head>

    <body>

        <form action="">

            <table border="1">

                <tr id="tr1">

                    <td><lable>姓名</lable></td>

                    <td><input type="text" id="username" value="富贵" name="username"/></td>

                </tr>

                

                <tr>

                    <td><lable>用户名</lable></td>

                    <td>

                        <input type="text" name="uname" id="uname" class="textClass" disabled="disabled" />

                    </td>

                </tr>

                

                <tr>

                    <td><span>密码</span></td>

                    <td>

                        <input type="password" name="password" />

                    </td>

                </tr>

                

                <tr>

                    <td></td>

                    <td>

                        <button id="buttonTd" type="button">普通按钮</button>

                    </td>

                </tr>

            </table>

        </form>

        

        <h3>公告信息</h3>

        <div style="width: 200px;">

            <a>未满18慎进</a>

        </div>

    </body>

</html>

 

小温

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: