你必须知道的JQuery

nnwq

浏览: 203525 次

最近访客更多访客>>

wangyy

Miracleztqh

UP-GIS

ycy12ycy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Dom与JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title ></title>
    <style type="text/css">
        .myDiv
        {
            border: 1px solid black;
            padding: 10px ;
            width: 500px ;
            height: 80px ;
        }
    </style >
    <script src="Js/jquery-1.5.1.js" type="text/javascript"></ script>
    <script type="text/javascript">
        //以下两段内容四次显示结果顺序为：
        //a结果：jquery null ===> (图片未出来)b结果：ready嘿嘿嘿 ===>(图片出来之后)c结果：onload嘿嘿嘿====>c中的jquery:onload中的jquery嘿嘿嘿
        //dom方式  为Window对象的onload事件 设置了一个匿名方法
        //c、这个匿名方法 是在页面所有的资源加载完毕后 才被调用
        window.onload = function () {
            //1、dom方式  返回的是dom节点对象
            var div = document.getElementById("imgAfter" );
            alert( "onload" + div.innerHTML);
            //2、Jquery方式  返回的是jquery对象
            alert( "onload中的jquery" + $("#imgAfter" ).html());
        }
        //a、直接写在Script标签中的js代码最先 被浏览器执行 Body还未加载完成  所以显示null
        //alert("onload中的jquery" + $("#imgAfter").html());
        //b、Jquery的ready方法，是当dom树 完全生成后才执行   body中的图片还没有出来就会显示
        //3、Jquery注册事件函数一定要知道格式
        $(document).ready( function () {
            $( "#imgAfter").html("嘿嘿黑" );//jquery中的Id选择器
            alert( "ready" + $("#imgAfter" ).html());
        });
        //4、以上jqery事件注册代码可简写为
        $( function () {
            $( "#imgAfter").html("嘿嘿黑" ); //html()无参即读取 有参即设置
            alert( "ready" + $("#imgAfter" ).html());
        });

        $( function () {
            //5、将dom元素转换成为jqeury对象 就可以使用jquery方法了
            var div = document.getElementById("div" );
            var $div = $(div); //核心 Jquery类型变量一般加$前缀
            $div.html( "123被修改了" );
            //6将jquery对象转换成为dom元素  两种方式1索引  2get()
            var div = document.getElementById("div" );
            var $div = $(div);
            var divret = $div.get(0); //$div[0];从jquery对象中 获得指定下标的dom元素
            alert(divret.innerHTML);
            //7 get()获取dom元素   解释jquery对象结构 详见图示
            var $divs = $("div" ); //jquery中的标签选择器  获得页面上所有的div  并且将他们添加到了jquery对象的dom数组中
            alert($divs.get(1).innerHTML); //这里是非常重要的 get返回的是数组对象即dom元素 而不是jquery对象   将jquery对象里的第二个dom对象读取出来
            alert( "直接写在js中的jquery" + $("#imgAfter").html());

            //8基本选择器------------------------------------
            //8.1 id选择器
            var $div = $("#div" );
            //8.2 元素选择器
            var $divs = $("div" );
            //8.3 类选择器
            var $divCls = $(".myDiv" );
            for (var i = 0; i < $divCls.length; i++) {//这种循环用的很少 因为Jquery本身提供了
                $divCls.get(i).style.backgroundColor = "gray";
            }
            //8.4 "*"选择器  返回页面所有元素  用于结合上下文搜索
            var $all = $("*" );
            alert($all.length); //19个元素
            //8.5多条件选择器
            var $Any = $("input,span" ); //注意用逗号分隔
            alert($Any.length); //长度为4
            //9层次选择器---------------------------------------
            //9.1 后代选择器 得到id为FatherDiv中的子div及其子div中的所有div
            var $GSonDiv = $("#FatherDiv div" );//中间用空格区分开
            for (var i = 0; i < $GSonDiv.length; i++) {
                alert($GSonDiv.get(i).id); //son1  son2  grandSon都会得到
            }
            //9.2 子代选择器 只取直属子元素
            var $SonDiv = $("#FatherDiv > div" );
            for (var i = 0; i < $SonDiv.length; i++) {
                alert($SonDiv.get(i).id); //son1  son2
            }
            //9.3后面的兄弟选择器  必须是紧接着 否则什么都取不到
            var $AfterDiv = $("span + div" );//匹配所有紧接在span后的next元素 next必须是div
            for (var i = 0; i < $AfterDiv.length; i++) {
                alert($AfterDiv.get(i).id); //span标记之后紧跟的div id  结果FatherDiv
            }
            var $AfterDiv = $("span + *" );
            for (var i = 0; i < $AfterDiv.length; i++) {
                alert($AfterDiv.get(i).id); //span标记之后紧跟元素 id  *号意味不限制紧跟的元素类型 结果FatherDiv
            }
            //9.4匹配元素时候的所有同级元素
            var $ssElements = $("#FatherDiv ~ div" );
            for (var i = 0; i < $ssElements.length; i++) {
                alert($ssElements.get(i).id); //AfterDiv AfterDiv2
            }
            //9简单事件
            $( "#btn").click(function () {
                $( "div").html("我们都是div" );
            });
            $( "#btn").click();//这里就是事件的调用 所以页面刚加载就会触发这个事件
       });
    </script >
</head>
<body>
    <div id="div">
        <input type="button" value="按钮1" id="btn" />
        123
    </div >
    <!--<img src="images/照片123.JPG" />-->
    <div id="imgAfter">
        哈哈哈
        <input type="button" value="按钮2" />
    </div >
    <span >我是span</ span>
    <div id="FatherDiv">
        <div id="son1" class="myDiv">
            类选择器1
            <input type="button" value="按钮3" />
        </div>
        <div id="son2" class="myDiv">
            还是类选择器 他们有class属性
            <div id="grandSon">
                孙子级的div
            </div>
        </div>
    </div >
    <div id="AfterDiv"> 紧接着的兄弟元素 </div>
    <div id="AfterDiv2"> 紧接着的兄弟元素2 不会取到 </div>
</body>
</html>