jQuery选择器与属性操作详解-优快云博客

JQuery HelloWorld

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>第一个简单的jQuery程序</title>
    <style type="text/css">
        div{
            padding:8px 0px;
            font-size:12px;
            text-align:center;
            border:solid 1px #888;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function() {
                $("div").html("您好！");
            });
    </script>
</head>
<body>
    <div></div>
</body>
</html>

jQuery对象与DOM对象

普通处理，通过标准JavaScript处理：

var p = document.getElementById('imooc');
p.innerHTML = '您好！;
p.style.color = 'red';

通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象，再通过innerHTML与style属性处理文本与颜色。

jQuery的处理：

var $p = $('#imooc');
$p.html('您好！').css('color','red');

通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。

jQuery对象转化成DOM对象

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <div>元素一</div>
    <div>元素二</div>
    <div>元素三</div>

    <script type="text/javascript">
        var $div = $('div'); //jQuery对象
        var div = $div.get(0);
        div.style.color = 'red'; //操作dom对象的属性
    </script>

</body>

DOM对象转化成jQuery对象

<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

    <script type="text/javascript">

            var div = document.getElementsByTagName('div'); //dom对象

            //将dom节点div转化为$div的jquery对象
            var $div = $(div);

            var $first = $div.first(); //找到第一个div元素
            $first.css('color', 'red'); //给第一个元素设置颜色


    </script>

</body>

jQuery选择器之id选择器

$( "#id" )

id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

 <script type="text/javascript">
       //通过原生方法处理
        var div = document.getElementById('aaron');
        div.style.border = "3px solid blue";
    </script>

    <script type="text/javascript">
        //通过jQuery直接传入id
        //id的唯一，只选择到了第一个匹配的id为imooc的div节点
        $("#imooc").css("border", "3px solid red");
    </script>

jQuery选择器之类选择器

$( ".class" )

jQuery选择器之元素选择器

$( "element" )

var divs = document.getElementsByTagName('div');

divs是dom合集对象，通过循环给每一个合集中的<div>元素赋予新的boder样式

jQuery选择器之全选择器（*选择器）

在CSS中，经常会在第一行写下这样一段样式

* {padding: 0; margin: 0;}

通配符意味着给所有的元素设置默认的边距。jQuery中我们也可以通过传递选择器来选中文档页面中的元素

描述：

$( "*" )

抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递”*”同样可以获取到

jQuery选择器之层级选择器

这里写图片描述

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子选择器与后代选择器</h2>
    <div class="left">
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
    </div>
    <div class="right">
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
    </div>

    <script type="text/javascript">
        //子选择器
        //$('div > p') 选择所有div元素里面的子元素P
        $('div > p').css("border", "1px groove red");
    </script>

    <script type="text/javascript">
        //后代选择器
        //$('div  p') 选择所有div元素里面的p元素
        $('div p').css("border", "1px groove red");
    </script>


    <h2>相邻兄弟选择器与一般兄弟选择器</h2>
    <div class="bottom">
        <div>兄弟节点div, +~选择器不能向前选择</div>
        <span class="prev">选择器span元素</span>
        <div>span后第一个兄弟节点div</div>
        <div>兄弟节点div
            <div class="small">子元素div</div>
        </div>
        <span>兄弟节点span,不可选</span>
        <div>兄弟节点div</div>
    </div>

    <script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $(".prev + div").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
        //一般相邻选择器
        //选取prev后面的所有的div兄弟节点
        $(".prev ~ div").css("border", "3px groove blue");
    </script>

</body>

</html>

> （大于号）紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。
+ （加号） 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。
~ （波浪线）任意距离兄弟关系 如$("div + p")表示选择div同层的p节点。
(空格) 任意层父子关系 如$("div p")表示选择div下的p节点（不管中间隔多少层）。
,(逗号) 表示选择器组合，如$("div p, span p")表示div下p节点和span下p节点。

jQuery选择器之基本筛选选择器

很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素，为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头，通过一个列表，看看基本筛选器的描述：

这里写图片描述

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一个div
    $(".div:first").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //找到最后一个div
    $(".div:last").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //:even 选择所引值为偶数的元素，从 0 开始计数
    $(".div:even").css("border", "3px groove red");
    </script>

    <script type="text/javascript">
    //:odd 选择所引值为奇数的元素，从 0 开始计数
    $(".div:odd").css("border", "3px groove blue");
    </script>


    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //选择单个
    $(".aaron:eq(2)").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
    //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $(".aaron:gt(3)").css("border", "3px groove blue");
    </script>

     <script type="text/javascript">
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    $(".aaron:lt(2)").css("color", "#CD00CD");
    </script>

    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其他</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择所有元素去除不匹配给定的选择器的元素
        //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
        $("input:not(:checked)+p").css("background-color", "#CD00CD");
    </script>
</body>

</html>

jQuery选择器之内容筛选选择器

基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上

内容过滤器描述如下表：
这里写图片描述

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>内容筛选器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>

    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"contains"的元素节点
        //并且设置颜色
        $(".div:contains(':contains')").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"span"的元素节点
        //并且设置颜色
        $(".div:has(span)").css("color", "blue");
    </script>


    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //选择所有包含子元素或者文本的a元素
       //增加一个蓝色的边框
       $("a:parent").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
       //找到a元素下面的所有空节点(没有子元素)
       //增加一段文本与边框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>

</body>

</html>

jQuery选择器之可见性筛选选择器

元素有显示状态与隐藏状态，jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden

描述如下：
这里写图片描述

jQuery选择器之属性筛选选择器

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性，这样所有使用该属性而不管它的值，这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素，这就是属性选择器展示它们的威力的地方。

描述如下：
这里写图片描述

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>属性筛选选择器</h2>
    <h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
        </div>
        <div class="div" testattr="true" p2>
            <a>[att]</a>
        </div>
        <div class="div" testattr="true" name="-">
            <a>[att|=val]</a>
        </div>
        <div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
        </div>
    </div>

    <script type="text/javascript">
         //查找所有div中，属性name=p1的div元素
        $('div[name=p1]').css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性p2的div元素
        $('div[p2]').css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
       $('div[name|="-"]').css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
         $('div[name~="a"]').css("border", "3px groove #668B8B"); 
    </script>


    <h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
    <div class="left" testattr="true" >
        <div class="div" testattr="true"  name='imooc-aaorn'>
            <a>[att^=val]</a>
        </div>
        <div class="div" testattr="true"  name='aaorn-imooc'>
            <a>[att$=val]</a>
        </div>
        <div class="div" testattr="true"  name="attr-test-selector">
            <a>[att*=val]</a>
        </div>
        <div class="div" name="a b">
            <a>[att!=val]</a>
        </div>
    </div>


    <script type="text/javascript">
         //查找所有div中，属性name的值是用imooc开头的
         $('div[name^=imooc]').css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
         //查找所有div中，属性name的值是用imooc结尾的
         $('div[name$=imooc]').css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性name中的值包含一个test字符串的div元素
        $('div[name*="test"]').css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性testattr中的值没有包含"true"的div
        $('div[testattr!="true"]').css("border", "3px groove #668B8B"); 
    </script>


</body>

</html>

jQuery选择器之子元素筛选选择器

子元素筛选选择器不常使用，其筛选规则比起其它的选择器稍微要复杂点

子元素筛选选择器描述表：
这里写图片描述

jQuery选择器之表单元素选择器

无论是提交还是传递数据，表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器，从而能够极其方便地获取到某个类型的表单元素

表单选择器的具体方法描述：
这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style> 
        input{
            display: block;
            margin: 10px;
            padding:10px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子元素筛选选择器</h2>
    <h3>input、text、password、radio、checkbox</h3>
    <h3>submit、image、reset、button、file</h3>
    <div class="left first-div">
        <form>
            <input type="text" value="text类型"/>
            <input type="password" value="password"/>
            <input type="radio"/> 
            <input type="checkbox"/>
            <input type="submit" />
            <input type="image" />
            <input type="reset" />
            <input type="button" value="Button" />
            <input type="file" />
        </form>
    </div>

    <script type="text/javascript">
        //查找所有 input, textarea, select 和 button 元素
        //:input 选择器基本上选择所有表单控件
        $(':input').css("border", "1px groove red"); 
    </script>

    <script type="text/javascript">
        //匹配所有input元素中类型为text的input元素
        $('input:text').css("background", "#A2CD5A");
    </script>

    <script type="text/javascript">
        //匹配所有input元素中类型为password的input元素
       $('input:password').css("background", "yellow");
    </script>

    <script type="text/javascript">
        //匹配所有input元素中的单选按钮,并选中
        $('input:radio').attr('checked','true');
    </script>

    <script type="text/javascript">
        //匹配所有input元素中的复选按钮,并选中
        $('input:checkbox').attr('checked','true'); 
    </script>

    <script type="text/javascript">
        //匹配所有input元素中的提交的按钮,修改背景颜色
        $('input:submit').css("background", "#C6E2FF");
    </script>

    <script type="text/javascript">
        //匹配所有input元素中的图像类型的元素,修改背景颜色
        $('input:image').css("background", "#F4A460");
    </script>

    <script type="text/javascript">
        //匹配所有input元素中类型为按钮的元素
        $('input:button').css("background", "red");
    </script>

    <script type="text/javascript">
        //匹配所有input元素中类型为file的元素
        $('input:file').css("background", "#CD1076");
    </script>

</body>

</html>

jQuery选择器之表单对象属性筛选选择器

除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选

表单筛选选择器的描述：
这里写图片描述

注意事项：

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    input {
        display: block;
        margin: 10px;
        padding: 10px;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>子元素筛选选择器</h2>
    <h3>enabled、disabled</h3>
    <form>
        <input type="text" value="未设置disabled" />
        <input type="text" value="设置disabled" disabled="disabled" />
        <input type="text" value="未设置disabled" />
    </form>

    <script type="text/javascript">
        //查找所有input所有可用的（未被禁用的元素）input元素。
        $('input:enabled').css("border", "2px groove red");
    </script>

    <script type="text/javascript">
        //查找所有input所有不可用的（被禁用的元素）input元素。
        $('input:disabled').css("border", "2px groove blue");
    </script>

    <h3>checked、selected</h3>
    <form>
        <input type="checkbox" checked="checked">
        <input type="checkbox">
        <input type="radio" checked>       
        <input type="radio">

        <select name="garden" multiple="multiple">
            <option>imooc</option>
            <option selected="selected">慕课网</option>
            <option>aaron</option>
            <option selected="selected">博客园</option>
          </select>

    </form>

    <script type="text/javascript">
         //查找所有input所有勾选的元素(单选框,复选框)
         //移除input的checked属性
        $('input:checked').removeAttr('checked')
    </script>

    <script type="text/javascript">
         //查找所有option元素中,有selected属性被选中的选项
         //移除option的selected属性
        $('option:selected').removeAttr('selected')
    </script>

</body>

</html>

jQuery选择器之特殊选择器this

相信很多刚接触jQuery的人，很多都会对$(this)和this的区别模糊不清，那么这两者有什么区别呢？

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

下面例子中，imooc是一个对象，拥有name属性与getName方法,在getName中this指向了所属的对象imooc

var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。


    <p id="test1">点击测试：通过原生DOM处理</p>

    <p id="test2">点击测试：通过原生jQuery处理</p>

    <script type="text/javascript">
        var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接通过dom的方法改变颜色
            this.style.color = "red"; 
        },false);
    </script>

    <script type="text/javascript">
        $('#test2').click(function(){
            //通过包装成jQuery对象改变颜色
            $(this).css('color','blue');
        })
    </script>

jQuery的属性与样式之.attr()与.removeAttr()

每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。

操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题

jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()

attr()有4个表达式

    attr(传入属性名)：获取属性的值
    attr(属性名, 属性值)：设置属性的值
    attr(属性名,函数值)：设置属性的函数值
    attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

 <h2>.attr()与.removeAttr()</h2>
    <h3>.attr</h3>
    <form>
        <input type="text" value="设置value" />
        <input type="text" value="获取value"/>
        <input type="text" value="回调拼接value" />
        <input type="text" value="删除value" />
    </form>

    <script type="text/javascript">
        //找到第一个input，通过attr设置属性value的值
        $("input:first").attr('value','.attr( attributeName, value )')
    </script>

    <script type="text/javascript">
        //找到第二个input，通过attr获取属性value的值
        $("input:eq(1)").attr('value')
    </script>

    <script type="text/javascript">
        //找到第三个input，通过使用一个函数来设置属性
        //可以根据该元素上的其它属性值返回最终所需的属性值
        //例如，我们可以把新的值与现有的值联系在一起：
        $("input:eq(2)").attr('value',function(i, val){
            return '通过function设置' + val
        })
    </script>

    <script type="text/javascript">
        //找到第四个input，通过使用removeAttr删除属性
        $("input:eq(3)").removeAttr('value')
    </script>

jQuery的属性与样式之html()及.text()

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()

.html()方法

获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容，具体有3种用法：

.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString )  设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

.text()方法

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h3>.html()与.text()</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>  
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>

    <h4>显示通过html方法获取到的内容</h4>
    <p></p>

    <h4>显示通过text方法获取到的内容</h4>
    <p></p>


    <script type="text/javascript">
        //显示出html方法获取到的内容
        //.html()是整个html文档结构
        $('p:first').text( $(".first-div").html() ) 
    </script>


    <script type="text/javascript">
        //显示出text方法获取到的内容
        //.text()是文本内容的合集
        $('p:last').text( $(".first-div").text() ) 
    </script>


    <script type="text/javascript">
        //通过.text()方法替换文本内容
        $(".left a:first").text('替换第一个a元素的内容')
    </script>


    <script type="text/javascript">
        //通过.html()方法替换html结构
        $(".left div:first").html('整个div的子节点都被替换了')
    </script>


    <script type="text/javascript">
        //通过.text()的回调，获取原本的内容，修改，在重新赋值
        $(".left a:first").text(function(idnex,text){
            return '增加新的文本内容' + text
        })
    </script>



</body>

</html>

jQuery的属性与样式之.val()

jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。

http://www.imooc.com/code/8555

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    p {
        color: red;
        margin: 4px;
    }

    b {
        color: blue;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h3>.val()</h3>

    <select id="single">
        <option>慕课网</option>
        <option>博客园</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option selected="selected">imocc</option>
        <option>慕课网</option>
        <option selected="selected">博客园</option>
    </select>
    <input type="text" value="click a button" />
    <p></p>

    <script type="text/javascript">
        //单个select，返回第一个
        $("p").text( $("#single").val() )
    </script>

    <script type="text/javascript">
        //多个select被选择，返回["imocc", "博客园"]
        $("p").text( $("#multiple").val() ) 
    </script>


    <script type="text/javascript">
        //选择一个表单，修改value的值
        $("input[type='text']").val('修改表单的字段') 
    </script>


</body>

</html>

jQuery的属性与样式之样式操作.css()

通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果

设置：

 .css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式

注意事项：

浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样