个人学习jQuery笔记

 

1.$(“#div1”).text()是获取iddiv1的文本内容,也可以填充值

  $(“#div1”).html() 是获取id 为div1的HTML内容值 也可以填充值

2.$(“#div1”)是获取id为div1

 $(“div”)是获取div标签

 .val()是获取文本框的值

3. 遮罩效果关键是这个z-index:99; z-index:100;

$("#div1").css({ display: "block", height: $(document).height() });

                var yscroll = document.documentElement.scrollTop;

        document.documentElement.scrollTop = 0; 获取整个窗体

 4. 获取当前的元素用$(this) blur事件是失去焦点触发

 5.siblings()取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选expr的表达式进行筛选。

Expr用于筛选同辈元素的表达式

 6. next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

expr用于筛选的表达式

7jQuery中样式设置数字的时候不要加引号

8. :first获取第一个元素  :focus触发每一个匹配元素的focus事件。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。:last()获取最后个元素  :gt(index) 匹配所有大于给定索引值的元素  :lt(index) 匹配所有小于给定索引值的元素 。index 从 0 开始计数   :odd匹配所有索引值为奇数的元素,从 0 开始计数  :even匹配所有索引值为偶数的元素,从 0 开始计数

9. jQuery([selector,[context]]) 

$(function () {

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

            $("ul",$(this).css("background-color","red"))

            })

})

$( function(){

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

           $("ul").css("background-color","gray")

         });

       });

上面这两个很有区别哦

10 .each( function(index, Element) )

.each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。更重要的是,回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。

   $(function () {

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

                $("li").each(function (index,domp) {

                    alert(index + ": " + $(this).text());

                    alert($(domp).html()

                    )

                });

            });

           

        });

 

11. addClass(class|fn) 同一个元素上可以有多个class  JS三个等号"==="的含义= 赋值运算符

 == 等于 

=== 严格等于 
例: 
var a = 3; 
var b = "3"; 

a==b 返回 true 
a===b 返回 false 

因为a,b的类型不一样
===用来进行严格的比较判断

 

 

12返回值:jQueryremove([expr])

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。

expr用于筛选元素的jQuery表达式

13. parseInt() 函数可解析一个字符串,并返回一个整数。

14. $("#btnwait").attr("disabled", false); 不可用状态

 

15.replaceWith  和wrap

你 <br /> 好 <br />

$("br").replaceWith("<hr/>");

 

  $("div").wrap("<font color='red'></font>")

 

16 css  设置 .+名称是class 设置  #id名称是通过id设置   p{
} 就是对所有p元素的设置

 

17        $(“:”)  冒号很有用哦 可以查帮助文档 如下面的

$("input:checkbox").click(function () {

                var arr = new Array();

                $("input[type=checkbox]:checked").each(function (key, val) {

                    arr[key] = $(val).val();

                });

               alert( "供?选?择?" + arr.length + "项?" + arr.join(","))

            });

18 toggle([speed],[easing],[fn]) 用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

  var strc = "getusers.aspx"

        $.ajax({

            type: "GET",

            url: strc,

            data: "sortBy='" + sortByStr + "' &&paixu='" + paixu + "'",//用于传值的地方

            beforeSend: function (XMLHttpRequest) {

                $("#fdiv").html("<img style='margin:40px 0 0 10px;' src='http://www.fnetravel.com/images/022.gif'/>&nbsp;数ºy据Y加¨®载?中D...");

 

            },

            success: function (fanhuidata) {

                // Play with returned data in JSON format

                var x = fanhuidata.split("|")

                $("#fdiv").text("");

                for (var i = 0; i < x.length - 1; i++) {

 

                    var b = x[i].split(",");

                    $("#fdiv").append("<div id='" + "div" + (i + 1) + "' style='width :300px ;height:30px;'>" + b[0] + "----------" + b[1] + "--------" + b[2] + "</div>")

                }

                $("#fdiv  :odd").css("background-color", "gray")

            },

            error: function (xx) {

                alert(xx);

                alert("xxxxxx");

            }

        });

 

19 childNodes 问题

<div id="div1"><table><tr><td>   11111  </td></tr></table></div>

<script type="text/javascript" language="javascript">

        $(document).ready(function () {

            var notes = document.getElementById("div1").childNodes;

                alert(notes.length);

        });

  </script>

上面是对应的值是1 如果<table>前有一个空格就是2 后面</table> 有空格就是3

posted @ 2014-03-24 18:09  山水中华  阅读(273)  评论(0编辑  收藏  举报