JQuery笔记Ⅲ--渐进篇

JQuery--渐进篇

鸣谢：张子秋博客 、baidu 、 google、wiki

动态创建元素

1)使用html创建元素

    

var select = document.createElement("select");
select.options[0] = new Option("加载项1", "value1");
select.options[1] = new Option("加载项2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);

这里我们使用了：

1.createElement

2.appendChild

2)使用jQuery创建元素

    $('<p></p>')
       .html('Hey World!')
        .css('background', 'yellow')
        .appendTo("body");

3)添加元素到对象

//jQuery 使用动态创建的$(document).ready(function)方法
    $(document).ready(
        function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>"; });

    //jQuery 使用$(function)方法
$(function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; });

使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改DOM的函数使用此方法调用. 另外还要注意document.createElement和innerHTML的区别. 如果可以请尽量使用document.createElement和$("<div/>")的形式创建对象.

 

jQuery管理

1)过滤

名称	说明	举例
eq( index )	获取第N个元素	获取匹配的第二个元素: $("p").eq(1)
filter( expr )	筛选出与指定表达式匹配的元素集合。	保留带有select类的元素: $("p").filter(".selected")
filter( fn )	筛选出与指定函数返回值匹配的元素集合这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除，否则就会保留。	保留子元素中不含有ol的元素: $("div").filter(function(index) {   return $("ol", this).size() == 0; });
is( expr )  注意: 这个函数返回的不是jQuery包装集而是Boolean值	用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。	由于input元素的父元素是一个表单元素，所以返回true: $("input[type='checkbox']").parent().is("form")
map( callback )	将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立	把form中的每个input元素的值建立一个列表: $("p").append( $("input").map(function(){   return $(this).val(); }).get().join(", ") );
not( expr )	删除与指定表达式匹配的元素	从p元素中删除带有 select 的ID的元素: $("p").not( $("#selected")[0] )
slice( start, end )	选取一个匹配的子集	选择第一个p元素: $("p").slice(0, 1);

 

2)查找

窗体顶端

名称	说明	举例
add( expr )	把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。	动态生成一个元素并添加至匹配的元素中: $("p").add("<span>Again</span>")
children( [expr] )	取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。 可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。	查找DIV中的每个子元素: $("div").children()
closest( [expr] )	取得与表达式匹配的最新的父元素	为事件源最近的父类li对象更换样式: $(document).bind("click", function (e) {   $(e.target).closest("li").toggleClass("hilight"); });
contents( )	查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容	查找所有文本节点并加粗: $("p").contents().not("[nodeType=1]").wrap("<b/>");
find( expr )	搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。	从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同: $("p").find("span")
next( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。	找到每个段落的后面紧邻的同辈元素: $("p").next()
nextAll( [expr] )	查找当前元素之后所有的同辈元素。 可以用表达式过滤	给第一个div之后的所有元素加个类: $("div:first").nextAll().addClass("after");
offsetParent( )	返回第一个有定位的父类(比如(relative或absolute)).
parent( [expr] )	取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。	查找每个段落的父元素: $("p").parent()
parents( [expr] )	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。	找到每个span元素的所有祖先元素: $("span").parents()
prev( [expr] )	取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。	找到每个段落紧邻的前一个同辈元素: $("p").prev()
prevAll( [expr] )	查找当前元素之前所有的同辈元素 可以用表达式过滤。	给最后一个之前的所有div加上一个类: $("div:last").prevAll().addClass("before");
siblings( [expr] )	取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。	找到每个div的所有同辈元素: $("div").siblings()

 

3)链接

窗体顶端

名称	说明	举例
andSelf( )	加入先前所选的加入当前元素中 对于筛选或查找后的元素，要加入先前所选元素时将会很有用。	选取所有div以及内部的p，并加上border类: $("div").find("p").andSelf().addClass("border");
end( )	回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。 如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。这包括在 Traversing 中任何返回一个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not',  'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。	选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素: $("p").find("span").end()

 

jQuery常用函数

     //$('#myBtn').bind('click',function(){ return false; })可用来指定任一JavaScript事件并为其附上一个行为

    //$(document).ready(function(){});

    //$("p").toggleClass("selected");如果存在就删除这个类，若果不存在就添加这个类

    //$("p").addClass("selected");为指定的元素添加一个类名,同理removeClass

    //alert($('li').size());返回值与 jQuery 对象的'length' 属性一致。返回元素的个数

    //$("<div><p>Hello</p></div>").appendTo("body"); 是把<div>加载到body中去。appendTo(加载是一个对象);appendTo($(#test"));

    //($(document).find("div>p").html());用来查找<div><p>中值（如有多个div>p只取第一个值）find()用来查找指定元素。

    //($(document).body).css("background","black"));css为Body加载背景色。

    //$(form1.elements).hide():是用来隐藏表单下的元素。show()是用来显示隐藏的。同理slide(),hide(),fadeIn(),fadeout(),slideUp(),slideDown()

    //$(form1.elements).each(function(){alert(this.type);}) each()用来循环元素。

    //$(".ss").val();：是用class类名来取值。

    //$("input[id=Text]").size();：[id=Text]:是完全id匹配，[id*=Text]:是部分匹配id。

    //$("#form1")[0].reset();：用于重置表单数据。

    //$("div").eq(1).html();eq(1)是用来指定多个元素中的第几个元素。html()取得对象的文本。

    //$("div").get(1).innerHTML; 用来取得指定的元素。get()取得是对象，不是jQuery元素

    //$("div").index(document.getElementById("div1"));index()用来搜索指定元素的位置

    //$("div").size();$("div").length; size(), length;是对象的数量，两者等价。

    //$("div").hide(1000);隐藏指定对象，1000是在指定时间内执行（毫秒）。fadeOut(1000)方法也有相同的效果。slideDown();相同效果。

    //$("div").show(1000);显示指定对象，fadeIn(1000）：也有相同的效果。slideUp();相同效果。

    //$('#divshow').load('Table.html');：把Table.html页面加载到指定层中。

    //$("#divShow").text();：类似于innerText();

    //$("#txtvalue").attr("value");：用于取得或者设置对象的属性值。

 

 

参考资料:

    http://www.cnblogs.com/zhangziqiu/archive/2009/05/04/jQuery-Learn-3.html

    http://www.cnblogs.com/lishenglyx/archive/2008/09/03/1283446.html

http://www.zzbaike.com/wiki/JQuery%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0%E8%A7%A3%E8%AF%B4

http://hi.baidu.com/qs5639/blog/item/a4a4deb61f3a4eff31add1a8.html