JQuery学习笔记(一)

根据JQuery权威指南进行学习JQuery，记录学习的内容，方便复习

Jquery访问Dom对象

通过JS代码访问DOM对象和获取或设置其内容值

var tDiv = document.getElementById("divTmp"); //获取DOM对象var oDiv = document.getElementById("divOut"); //获取DOM对象var cDiv = tDiv.innerHTML ; //获取DOM对象中的内容ODiv.innerHTML = cDiv;       //设置DOM对象中的内容   

通过JQuery访问和获取JQuery对象值

var tDiv = $("#divTmp") ;  //获取JQuery对象var oDiv = $("#divOut") ;  //获取JQuery对象var cDiv = tDiv.html();       //获取JQuery对象中的内容oDiv.html(cDiv);                //设置JQuery对象中的内容

获取单选按钮的选择值：

var oRdoValue = $("#Radio1").is(":checked") ? "男" : "女";

性别:<input id="Radio1" type="radio" name="rdoSex" value="男"/>男        <input id="Radio2" type="radio" name="rdoSex" value="女"/>女<br/>

在JQuery中，获取显示值用text(),真实值用:val();

<select id="sel">    <option value="00">请选择</option>    <option value="01">aaaa</option></select><script> $("#sel option").text(); //得到值是显示值——请选择、aaa $("#sel option").val(); //得到的是真实值——00,01</script>

一、JQuery操作DOM对象

属性对象

1、.attr()属性

    a、获取元素的属性

        attr(name)：name表示属性的名称，获取匹配的元素集合中第一个属性值，返回类型：String

<img src="xx.jsp" title="图片" alt="">var srcV = $("img").attr("src");  //img标签src的属性值var titleV = $("img").attr("title"); //title的属性值

 b、设置元素的属性值(修改属性值)

         ①、attr(key,value):key是属性名称，value是属性值。也可以同时设置多个属性值，attr({key0:value2,key1:value1})，设置一个或多个属性匹配的元素集合，

                返回类型：JQuery对象
eg：单属性设置

<img id="greatphoto" src="../imges/spring.jpg" alt="Spring"/><script>    $("#greatphoto").attr("src","../imges/shouq.png");</script>

         ②、.attr(map):一个map的属性值的设置

eg：多属性设置：

<img id="greatphoto" src="../imges/spring.jpg" alt=" 1 Spring"/>$("#greatphoto").attr({"src":"../imges/1.jpg", "alt":"QQ截图"});

       ③、.attr(attributeName,function(index,attr)):attributeName要设置的属性名称。function(index,attr)用函数的返回值来设置，这是当前元素。接收参数的设置和旧

                   的属性值中的元素的索引位置。

<img title="hat.gif"/><script>$("img").attr("src", function() {           return "/images/" + this.title;         }); <div>Zero-th <span></span></div><div>First <span></span></div><div>Second <span></span></div><button>点击</button><img src="../../imges/spring.jpg" alt="spring" width="100"><script>    $("div").attr("id", function (index) {   //这里只用了一个参数，就是当前对象的索引(第一参数是必须的)        return "div-id" + (++index);    })            .each(function () {                $("span", this).html("(ID = '<b>" + this.id + "</b>')");            });    $("button").click(function () {        var w = $("img").attr({"width":function (n, w) {        //这里设置了两个参数，如果只有一个参数，那么这个参数必须是索引值，                                                                //索引值是必须的，要么索引值一个参数，要么两个参数(索引值，旧的属性值)            return w - 10;        },        "alt":function(i,alt){                                  //这里的第一个参数是：索引值，第二个参数是旧的属性值            return alt+"1111";        }});        $("img").after("<span><b>" + $("img").attr("width") ,$("img").attr("alt")+ "</b></span>");    });</script>

 2、removeAttr()属性

            removeAttr(attributeName)：attributeName要删除的元素名。 删除匹配元素集合的每个元素的属性，返回类型：JQuery对象。在1.7版本中，可以用空格

            隔开多个属性名。

<img src="../../imges/spring.jpg" alt="spring" width="100" height="200">$("img").removeAttr("height");             //移除height属性$("img").removeAttr("height width");       //移除height、width属性(JQuery 1.7版本的功能)

3、html()属性和text()属性

html():获得匹配的元素集合中的第一个元素的HTML内容，返回类型：String。

html(htmlString)：设置匹配的元素集合中每一个元素的HTML内容，返回类型：JQuery。1.4以后的版本有html(function(index,oldhtml))。

注：在XML文档中html()方法不可以使用

<p>    <b>Click</b> to change the <span id="tag">html</span></p><p>    to a <span id="text">text</span> node.</p><p>    This    <button name="nada">button</button>    does nothing.</p><script>    $("p").click(function () {        var htmlStr = $(this).html();               //获取匹配的元素集中第一个元素的html内容        $(this).text(htmlStr);        $(this).html("<b>替换过的html</b>");       //设置匹配元素的html内容        $(this).html(function (index, t) {         //接受函数返回的html内容来设置匹配元素的内容            return t + "<b>appendString</b>+index";        });    });</script>

text():获取匹配元素的内容，将所匹配元素的内容合并并且作为String字符串返回。返回类型：String。该方法不是在form中的<input>和scripts中使用。如果要设置和获取<input>的值，应使用.val()方法。得到script元素的值，应使用.html()方法

text(textString)：将匹配的每一个元素的内容设置成textString。返回类型：JQuery。1.4版本后，有text(function(index,text))

注：text()方法不仅可以在html文档中使用，还可以在XML文档中使用

4、val()属性

val()：获取匹配元素集合中的第一个元素的当前值，返回类型：String、Number、Array。这个方法主要用于获取表单元素的值。在<select multiple="multiple">元素的val()方法返回一个数组

<select id="single">    <option>Single</option>    <option>Single2</option></select><select id="multiple" multiple="multiple">    <option selected="selected">Multiple</option>    <option>Multiple2</option>    <option selected="selected">Multiple3</option></select>输入框:<input type="text" value="some text" /><div></div><script>    function display() {        var single = $("#single").val();    //获取id="single"元素的值        var mul = $("#multiple").val();    //获取id="multiple"元素的值(真实值，html是显示值)        console.info(typeof mul);//        $("p").html("<b>single:</b>" + single + "  <b>multiple:</b>" + mul);        $("p").text("single: " + single + " multiple:" + mul);    }    $("select").change(display);  //当select元素发生变化的时候，调用display()方法    display();                      //初始化页面的时候就调用这个方法，显示出默认的是选中的值    $("input").keyup(function(){        //键盘按下事件        var value = $(this).val();        var textVal = $(this).text();      //在form表单中，不宜用text()来获得实际值        console.info("textVal:"+textVal);        $("div").text(value+" ------- "+textVal);    });</script>

.val(value)：设置匹配元素集合中每个元素的值。value是要设置的值。.val(function(index,value))是1.4版本新添加的，index是索引，value是原来的值。这两种形式的方法常用来设置表单字段的值。返回类型：JQuery

<select id="single">    <option>Single</option>    <option>Single2</option></select><select id="multiple" multiple="multiple">    <option selected="selected">Multiple</option>    <option>Multiple2</option>    <option selected="selected">Multiple3</option></select><br/><input type="checkbox" name="checkboxname" value="check1"/>check1<input type="checkbox" name="checkboxname" value="check2"/>check2<input type="checkbox" name="checkboxname" value="check3"/>check3<input type="radio" name="r" value="radio1"/>radio1<input type="radio" name="r" value="radio2"/>radio2<script type="text/javascript">    $("#single").val("Single2");    $("#multiple").val(["Multiple2", "Multiple3"]);    $("input").val(["check2", "check2", "radio2"]);</script>

5、addClass属性

.addClass()：为匹配的元素添加指定的class，有addClass(className)和addClass(function(index，currentClass))(1.4以后)两种形式。只是在原来的class后面追加指定的class，并没有移除原来的class。添加多个class的时候，class之间用空格隔开

6、removeClass属性

.removeClass()：移除匹配的一个、多个或者所有的元素

7、toggleClass属性

.toggleClass()：添加或删除一个或多个类中的每个元素的元素集合，根据class的存在或者class的值来切换参数。返回类型:JQuery

.toggleClass(className):从1.0版本就开始存在。className：一个或者多个class的名字(多个用空格分开)对匹配的元素集合进行切换

.toggleClass(className,switch)：是从1.3版本开始存在的。switch：用boolean值来决定这个class是添加class还是删除class

.toggleClass([switch])：从1.4版本开始存在的。

.toggleClass(function(index,class,switch)[,switch])：从1.4版本开始。function(index,class,switch):这个函数返回一个class名字，用来切换匹配属性的元素集合。index是索引的位置，class是原来的class值，switch是开关参数。

在toggleClass(className)版本中，如果匹配的class已经存在指定的值，则选择删除，如果不存，则添加

<!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">    <style type="text/css">        p {            margin: 4px;            font-size: 16px;            cursor: pointer;        }        .selected {            color: #0000ff;        }        .highlight {            background: yellow;        }        .wrap > div {            float: left;            width: 100px;            margin: 1em 1em 0 0;            padding = left: 3px;            border: 1px solid #abc;        }        div.a {            background-color: aqua;        }        div.b {            background-color: burlywood;        }        div.c {            background-color: cornsilk;        }    </style>    <script src="../../script/jquery.js"></script></head><body><p>Hello<span> clickNum:0</span></p><p>and<span> clickNum:0</span></p><p class="selected">Goodbye<span> clickNum:0</span></p><div class="buttons">    <button>toggle</button>    <button class="a">toggle a</button>    <button class="a b">toggle a b</button>    <button class="a b c">toggle a b c</button>    <a href="#">reset</a></div><div class="wrap">    <div></div>    <div class="b"></div>    <div class="a b"></div>    <div class="a c"></div></div><script>    $(function () {//        $("p:last").click(function () {////            $(this).toggleClass("highlight", false);//        });        /**         * 当第三次点击p段落的时候，高量次段落，第一次后移除高亮         * @type {Number}         */        $("p").each(function () {            var count = 0;            $(this).click(function () {                count++;                $(this).find("span").text(" clickNum:" + count);                $(this).toggleClass("highlight", count % 3 == 0);            });        });        var divs = $("div.wrap").children();        var showText = function () {            divs.each(function () {                $(this).append("<div>" + (this.className || 'none') + " </div>");            });            //注释掉的是api上的//            divs.append(function(){//                return "<div>"+(this.className || "none")+"</div>"//            });        }        showText();        $("button").bind("click", function () {            var tc = this.className || undefined;            divs.toggleClass(tc);            showText();        });    })</script></body></html>