jQuery(document).ready( function(){ $("button").click( function(){ /*获取元素标签*/ $("p").css("color","red").hide(5000); $("< h3>PHP中文网< /h3>").appendaTo(document.body);/*appendTo添加元素*/ }); }); /*当页面元素加载完毕时开始执行*/
可以简化为:
$(function(){ $("button").click( function(){ /*获取元素标签*/ $("p").css("color","red").hide(5000); $("< h3>PHP中文网< /h3>").appendaTo(document.body);/*appendTo添加元素*/ }); });
jQuery对象与DOM对象相互转换
document.getElementTagName('li')[2].style.color="red"; /*将第三个li标签的字体设置为红色*/ 可以变为: $(document.getElementTagName('li')[2]).css("color","red"); $("li").get(2).style.color="red"; $("li")[2].style.color="red";
HTML属性的查询与设置,移除
< img src="xxx.jpg" alt="photo" width="400"> $("img").attr("alt") /*输出img标签下的alt属性*/ $("img").attr("src","xxa.jpg"); /*更改属性*/ $("img").removeAttr("属性名") /*操作仅对当前有效,刷新页面后将恢复,原始的文档结构并未发生变化*/ $('img').css() /*可以修改,查询css的样式属性值*/
css类设置
<script src="jquery.js"></script>
< img src="xxx.jpg" alt="hello w" width="240"> < style> .red{ border-radius:20px; box-shadow:10px 10px 5px #f00; } < /style> 设置: $("img").addClass("red"); 添加 $("img").removeClass("red"); 删除 $("img").toggleClass("red"); 添加/删除 $("img").isClass()/hasClass();判断是否存在该样式
HTML内容查询与设置
< ul> < li>01< /li> < li>02< /li> < li>03< /li> < /ul> 查询: $('li').eq(1).text(); 修改: $('li').eq(1).text("xx"); 获取: $('li').eq(2).html(); 设置: $('li').eq(2).html("xax");
jQuery选择器
/*简单选择器*/ 常规过滤器: 标签选择符 $("tag").css("bgcolor","red") 类选择符 $(".class").css("width","50") ID选择符 $("#id").css("bgcolor","green") 属性过滤器: $("[style]").css(); /*属性为style的标签*/ $("[title='xxx']").css(); /*属性title值为xxx的标签*/ $("[title^='ap']").css(); /*属性值为ap开头的标签*/ $("[title!='abc']").css();/*属性值不为abc的标签*/ $("[title*='redis']").css();/*模糊查找,属性值中有redis的标签*/ $("[title~='PHP']").css();/*单词匹配,字符串前或后有空格分隔的认为是单词*/ $("[title][class]").css();/*同时具有title和class属性的标签*/ 表单过滤器: $("input:text").css(); $("input:password").attr("placeholder","至少8到16位"); $("input:checkbox").css("box-shadow","2px 2px 2px green");/*将复选框设置绿色阴影*/ $("input:checked").css("box-shadow","2px 2px 2px red");/*将选中的复选框阴影设置为红色*/ $(":button").css(); $(":disabled").css(); 位置过滤器: $("li:eq(索引)").css(); /*eq(0)含义为索引等于0*/ $("li:qt(索引)").css();/*qt(7)表示为所以大于7*/ $("li:lt(索引)").css();/*qt(2)表示为所以小于2*/ $("li:first").css();/*第一个li元素*/ $("li:last").css(); /*最后一个li元素*/ $("li:even").css(); /*选择所有偶数li元素*/ $("li:odd").css(); /*选择所有奇数li元素*/ $("li:nth-child(n)").css();/*全选:参数:n,n的取值(1~max),n从1开始*/ /*2n(even)(因为n从1开始,所以实际选中的为奇数)*/ /*2n+1(odd)为选中奇数,实际显示为偶数*/ /*组合选择器*/ 后代组合符:"空格"和">" A B: 在A元素所有子孙元素中查询B元素 A>B: 仅在A元素中的子元素中查询B,不含孙元素 兄弟组合符: A~B:查找A元素后面所有与A有着共同父级的兄弟元素 A+B:查询A元素后面的第一个兄弟元素 /*选择器组*/ 用","分隔的选择器列表 $("h3,h4,h5").css();/*直接使用标签*/ $("p.green,div.red").css();/*带过滤的简单选择器 选择p标签class属性为green和div标签class属性为red的*/ 组合选择器: $(p>span,div strong).css(); /*p下的直接子元素span 和div的后代元素strong*/
选择方法:
1.根据结果集中元素位置选择: $("li").first().css(); $("li").last().css(); $("li").eq().css();/*从零开始*/ $("li").slice(a,b).css(); /*slice(起始索引,结束索引),索引从零开始,结果不包括结束索引数据*/ /*支持负数,从倒数开始选择元素,例:slice(-3),选择最后三个*/ 2.根据结果集中元素的自身特征来选择:filter(),not(). 选择元素与自身属性相关可以用filter(). $("li").filter(".red").css();/*选择li标签下class属性为red的元素*/ 等价于 $("li.red").css(); filter方法可以传入一个回调判断函数,参数就是索引, 例:获取偶数行: $("li").filter(function(index){ return index%2==0; }).css(); 等价于: $("li:even").css();$("li:nth-child(2n+1)").css(); 用not来确定奇数行: $("li").not(function(index){ return index%2==0; }).css(); 等价于: $("li:add").css();$("li:nth-child(2n)").css(); 3.将选中元素集合当做上下文.(其实就是一个定位标志) 方法: 1.find 2.children 3.contents 4.next 5.prev 6.nextAll 7.prevAll 8.parent 9.parents 10.closest 11.parentsUntil /*查询所有li元素下面的strong元素,可以深入多级*/ $("li").find("strong").css(); /*获取当前元素的下一个元素*/ $("#info").next().css(); /*获取从当前元素开始到结束的全部元素,它会将子孙元素全部选中,当前元素为id="info"*/ $("#info").nextAll().css(); /*获取当前元素的前一个元素*/ $("#info").prev().css(); /*获取当前元素前的全部元素*/ $("#info").prevAll().css(); /*获取当前元素的父级元素*/ $("#info").parent().css();