首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

[转]JQuery小结

2012-10-08 
[转]JQuery总结转 :?http://lingyibin.iteye.com/?附上Jquery练习选择器的一个网址:http://codylindley.co

[转]JQuery总结

转 :?http://lingyibin.iteye.com/

?

附上Jquery练习选择器的一个网址:http://codylindley.com/jqueryselectors/

JQuery总结


(很久前图书馆借的一本jquery的书,过期了,今晚拿点时间总结一下,写了这篇博客,明天得还书了!)
jquery, 官网:http://jquery.com/。目前最新版本:jquery-1.4.4,可在官网上下载,有两种:jquery-1.4.4.js和jquery-1.4.4.min.js,前者比较全,后者只包含一些主要的功能。
一、DOM
document object model,即文档对象模型,可以看成是层次结构组织的节点或者信息的组合。该层次结构允许开发人员在树中导航寻找特定信息。网页中的各个元素可以看成是一个dom元素,从某种意义上看,DOM可以说是专门为了解决各种不同版本的javascript之间冲突百产生的。

二、jQuery选择器:
$("#theId")根据一个id得到一个dom对象
$(".theClass")根据一个class得到一个dom对象
$(document).ready(function(){ }); //在页面加载时运行的函数
$("#theId").click(function(){ }); //点击事件,不只是按钮,还有其它很多种dom都可以响应
$(".cls1,.cls2").addClass("green"); //其中green是css,完整:.green{background-color:green; }
$("form label") //得到form里面的所有label
$("form > label") //得到form里面的直接label子孩子
$("form + label") //得到form相邻的label元素
$("form ~ label") //得到form之后 所有平级的label元素

$("tr:first") //得到表格第一行,即第一个tr
同样还有$("tr:last") , $("tr:even")偶数行 , $("tr:odd")奇数行, $("tr:eq(1)")第二行, $("tr:gt(2)")大于第二行, $("tr:lt(1)")小于第二行, $("tr:empty")空行,与之相反的 $("tr:parent")所有非空行,$("tr:hidden")隐藏行,$("tr:visible")可以行

内容过滤:
$("div .test:contains('mycontent')")//所有包含mycontent内容的都会被选中。
$("div .test:has(p)")//class="test"的div中内含<p>元素的都会被选中
$("div .test:not(.mycls)")
$("ul li:nth-child(2)") //选中ul里面的第二个li
$("ul li:nth-child(3n)") //选中ul里面的第三、六、九……个li
$("ul li:first-child") //选中ul里面的第一个li
$("ul li:last-child") //选中ul里面的最后一个li
$("ul li:even") //选中ul里面的偶数li,index以0开始
$("ul li:odd") //选中ul里面的奇数li,index以1开始
$("ul:nth-child(even)") //ul下是偶数的子元素,index以1开始
$("ul:nth-child(odd)") //ul下是奇数的子元素,index以1开始
$("ul:nth-child(2)") //如果ul下有子元素或嵌套子元素,取出第二个,index以1开始
$("ul:nth-child(2n)") //如果ul下有子元素或嵌套子元素,取出第2n个,index以1开始
$(":empty") //选中所有的独一的,没有children的元素
$("p:parent") //选中所有含有<p>的父级元素
$("#mydiv ul li:only-child") //选中mydiv里只有一个li的ul

$(":input") //选中所有的input元素
$("input:enabled")
$("input:disabled")
$("input:checked")
$("select option:selected")
$("input[class]") //有class属性的input
$("input[name=thename]")
$("input[name!=thename]")
$("input[name^=first]") //以first开头
$("input[name$=name]") //以name结尾
$("input[name*=stna]") //模糊匹配

三、设置属性
$("input").attr("name")//得到name属性
$("#mydiv").css("margin") //得到css
$("input").attr("value","内容") //设置属性
$("#mydiv").css("margin-top","10px") //添加css
$("#mydiv").css({
"margin-top":"10px",
"color":"green"
})
$("input").attr("value",function(){return this.name})

移除属性
$("input").removeAttr("value")

操作css
$("input").addClass("myclass")
$("input").removeClass("myclass")
$("input").toggleClass("myclass") //添加或删除
$("#content p#second").offset().top //取得坐标的上位置
$("#content p#second").height() //获得
$("#content p#second").height(80) //设置

设置内容
$("#content").html()
$("#content").html("这是新加上的文字")
$("#content").text() //只得到文本内容
$("#userName").val("ling")
$("#multiple").val(["青岛","北京"])//设置列表中的选中项

加上filter
$("p").filter(".first").css("background-color","green")
$("p").not(".first").css("background-color","green")
$("input #firstname").next().addClass("green")
$("input #firstname").next("#city").addClass("green")

四、dom操作
插入
$("#testbtn").append("<b>测试</b>");
$("#testbtn").prepend("<b>测试</b>");
$("#testbtn").after("<b>测试</b>"); //插入到后面
$("#testbtn").before("<b>测试</b>"); //插入到前面

包裹
$("#testbtn").wrap("<div class='wrapped'></div>");
$("#testbtn").wrap("<b></b>");

替换
$("#mydiv .test").replaceAll($("p")); //用class="test"的dom替换<p>
$("#mydiv .second").replaceWith($("#mydiv .test"));

删除
$("#mydiv .second").empty();
$("p").remove("#second")
empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。
remove([expr])则是把其从dom中删除,而不会保留其所占的位置。
例:
<p>Hello</p>
World
<p>welcome</p>
执行$("p").empty()其结果是
<p></p>
World
<p></p>

执行$("p").remove()其结果是
World
clone
$("#myBtn").clone().prependTo($("p #second")); //可以把按钮及其所有相关的属性等一起复制过去
$("#myBtn").clone().insertAfter(this);

五、事件
绑定事件
$("#myBtn").bind("click",function(){ $(this).val(""); }); //绑定事件,清空
$("#myBtn").unbind()

触发
(1)$("form").bind("submit",function(){……});
(2)$("#test").click(function(){ $("form").trigger("submit");}) //当点击test内容时,会触发form的提交

(1)$("#test").click(function(event,par1,par2){……})
(2)$("#test").trigger("click",["Hello","World"]);

$("#test").show() //还有hide()

$("#test").toggle(
function(){alert("第一次点击")},
function(){alert("第二次点击")},
function(){alert("第三次点击")},
function(){alert("第四次点击")}
);

其它事件:
dblclick
mousedown
mousemove
mouseout
mouseover
mouseup
keydown
keypress
keyup
blur
focus

六、动画与效果
$("test").hide("slow") //"normal","fast"
$("test").hide(2000) //2s
还可以加函数:$("test").hide(2000,funtion(){ });
show也和上面一样
一样的还有:
slideUp() //向上卷起
slideDown()
slideToggle()
fadeIn() //淡入
fadeOut() //淡出

自定义透明度:fadeTo(2000,0.2)或fadeTo(2000,0.2,function(){ })

$("test").animate({height:'toggle', opacity:'toggle'},"slow"); //toggle表示 在有和无之间切换

动画队列
会按顺序依次执行
$("test").animate({height:'70%'},{queue:false, duration:2000}) //queue:false表示不按队列的顺序来
.animate({font-size:'5em'},{queue:false, duration:2000})
.animate({paddingLeft:'20px'},{queue:false, duration:2000})?

热点排行