你必须知道的JQuery

Jquery样式操作

< html xmlns ="http://www.w3.org/1999/xhtml">
< head>
    <title > JQuery样式操作</ title >
    <style type="text/css">
        #div1 {color : Red;}
    </style >
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script >
    <script type="text/javascript">
        $( function () {
            var $divs = $("div" );
            //1.为css传一个参数，是获得 指定的 样式 值
            //var col = $divs.css("color");//即使是在类样式中定义color 仍然可以得到red结果  不同于js
            //alert(col);
            //2.设置 一个 样式 的值
            //$divs.css("color", "blue");
            //3.一次设置多个样式的值  传入json格式
            //$divs.css({ "color": "#ff6600","fontSize":"88px" });
            //var $divs2 = $divs.css("color", "blue").css("fontSize", "88px");
            //$divs2.slideUp(5000);//因为Jquery会返回修改的对象 所以可以实现链式编程
            //4.设置 元素的 value属性值
            //$("#txtName").val("哈哈哈哈哈");
            //alert($("#txtName").val());
            //5.使用 text()方法 设置 文本(innerText)
            //$("#div2").text("<div>王小丫，是男的？</div>");
            // var $waoxiaoya = $("#waoxiaoya");//Jqurey中的迭代 如果Jquery对象数组$waoxiaoya长度为空的话 自然就不会执行.html方法了
            //if ($waoxiaoya.length > 0) {
            //    $$waoxiaoya.html("哈哈哈哈哈，你丫不存在！");
            //}
        })
    </script >
</ head>
< body>
    <div id="div1"> 123123 </div >
    <div id="div2"> 123123 </div >
    <input type="text" id="txtName" />
</ body>
</ html>

JQuery操作兄弟元素

< html xmlns ="http://www.w3.org/1999/xhtml">
< head>
    <title > JQuery Dom操作</ title >
    <style type="text/css">
        #div1 {color : Red;}
    </style >
    <script src="js/jquery-1.5.1.min.js" type="text/javascript"></ script >
    <script type="text/javascript">
        $( function () {
            var $divs = $("div" );
            //使用attr()方法读取或者设置元素的属性
            //$divs.eq(0).attr({ "title": "{id:11}", "name": "哈哈哈" }); //json键值对格式 一次赋多值
            //$divs.eq(1).attr("title", "2222222"); //eq(0)拿索引  $divs.eq(1)拿到的是一个dom元素 又放在一个新的Jquery对象中 所以能调用attr
            //alert($divs.attr("name"));//一个参数的话就是取值  如果$divs是多值数组 默认返回第一个name属性值
            //移除属性
            //$divs.removeAttr("name");
            //alert($divs.attr("name"));
            //2.获得紧挨着的一个Jquery对象
            var $nextNode = $("#div1" ).next( "input"); //.next()如果没有参数 则返回下一个Jquery对象 不论任何类型 如果下一紧挨对象不是input类型 那么返回undefined
            //alert($nextNode.id);//undefined 因为$nextNode是Jquery对象 如果想拿id需通过$nextNode.attr("id")
            //$.map($nextNode, function (item) {//再次强调：循环是直接拿到Jquery数组中的dom元素 所以可以直接点出id 不同以上
            //    alert(item.id);
            //});
            //3.获得后面的所有的兄弟元素(Jquery对象)
            //var $nextNode = $("#div1").nextAll();//也可以指定id选择器"#txtName2"  或者元素选择器"input" 无参数则获得所有的
            //$.map($nextNode, function (item) {
            //    alert(item.id);
            //});
            //4.获得前面的所有的兄弟元素(Jquery对象)
            //var $nextNode = $("#div1").prevAll();//prevAll=》nextAll prev=》next
            //$.map($nextNode, function (item) {
            //    alert(item.id);
            //});
            //5.获得所有的同辈兄弟元素(Jquery对象) 相当于取prevAll 和 nextAll所有值
            var $nextNode = $("#div1" ).siblings( "div") //可以有参数对类型进行限制 也可以为空(取得所有)
            $.map($nextNode, function (item) {
                alert(item.id); //div4 div2
            });
        })
    </script >
</ head>
< body>
    <input type="text" id="Text2" />
    <div id="div4"> 123123 </div >
    <input type="text" id="Text1" />
    <div id="div1"> 123123 </div >
    <input type="text" id="txtName" />
    <input type="text" id="txtName2" />
    <div id="div2"> 123123
        < div id ="div3">123123 </ div>
    </div >
</ body>
</ html>