设置属性:
/*设置属性*/ $("img").attr({"src":"images/1.jpg","alt":"这是一张风景图","title":"请点击"}) /*获得属性*/ alert($("img").attr("src"))
after和insertAfter
$("p").click(function(){ /*在被选元素后面添插入新的同辈元素*/ $("p").after("<p>nihao</p>") }) $("p").click(function(){ /*将被选元素插入到某元素之后*/ $("<p>第二个</p>").insertAfter("p") })
each()
$(document).ready(function(){ $("ul").first().css({"color":"red"}).end().last().css({"background-color":"blue"}) $("input").click(function(){ var str = ""; /*相当于一个for循环,将前面匹配的元素都按照后面的函数来执行*/ $("li").each(function(){ str +=$(this).text() }) alert(str) }) })
<script type="text/javascript"charset="UTF-8"> var num = [[1,2,3],[4,5,6,],[7,8,9,]] $.each(num,function(){ // alert(this) /*这个打印的是数组中的一维数组*/ $.each(this,function(){ alert(this)/*这个打印的是一维数组里面单个的值*/ }) }) </script>
jQuery对DOM 操作
样式操作
内容和value操作
节点操作
节点和属性遍历
节点遍历
CSS-DOM操作
1,使用css()为指定的元素添加样式值或获取样式值
css(name,value) css(name)
2,使用addClass()为元素追加样式
addClass("class1 class2 class3......classN");
3,使用removeClass()移除样式
removeClass("class1 class2 class3......classN");
4,toggleClass()切换样式:模拟addClass和removeClass实现样式的添加和移除过程
.toogleClass(class);
5,hasClass()用来判断是否是否包含指定的样式
.hasClass(class);、
html代码操作:html()可以对HTML代码进行操作,类似于js中innerHTML(识别标签)
获取:.htnl()
设置:.html( "<li></li>"); //设置元素中间的HTML代码
text()可以获取或时设置元素的文本内容(但是并不识别标签)、
获取:.text()
设置:.text( 文本内容 )
val()可以设置或获取元素的value属性值
获取:.val()
设置:.val(value)
节点操作:
工厂函数$()用于获取或创建节点
1 通过选择器获取节点 $(“div”)
2 将DOM节点转化成jQuery节点 $( objDOM)
3 使用 HTML 字符串创建节点 $(“<div></div>”)
插入节点:
append(content) A.append(B) 将把B追加到A中
appendTo(content) A.appendTo(B) 将把A追加到B中
parepend(content) A.parepend(B) 将把B前置插入到A中
parependTo(content) A.parependTo(B) 将把A前置插入到B中
移除节点:
remove() 删除整个节点
empty()清空整个节点
detach()删除整个节点,保留元素的绑定事件、附加的数据
替换节点:
replaceWith() 和 replaceAll() 两者的关系类似于append和appendTo的关系
复制某个节点:、
clone()用于复制某个节点 可已添加元素true和false
当追加的元素为true时,复制时间处理,false反之
clone(true)
获取与设置属性:
attr( “name”) 与 attr( { [name1:value1] [name1:value1] [name1:value1]})
removeAttr(_)用来删除元素的属性
removeAttr(name)
节点的遍历
遍历子节点:
children() 可以获取元素的所有子元素
next()获取紧邻其后的元素
prev()获取紧邻匹配元素之间的元素
silbings() 用于获取同辈的其它所有元素
遍历父辈元素
parent()获取父级元素
parents()获取元素的祖先元素
each()类似于for 循环遍历每个匹配元素规定的运行函数
end()将元素还原成之前的状态
除css()外还有获取元素高度,宽度等的样式操作 方法
用jQuery制作悬浮广告的代码示例:
<script type="text/javascript" charset="UTF-8"> $(document).ready(function(){ //返回图片top值 var adverTop= parseInt($("#adver").css("top")); //返回图片的left值 var adverLeft = parseInt($("#adver").css("left")) $(window).scroll(function(){ //滚动条反倒上面的距离 var scrollTop =parseInt($(this).scrollTop()); //滚动条向右的距离 var scrollLeft = parseInt($(this).scrollLeft()); //设置图片相对于文档的top值 $("#adver").offset({top:adverTop+scrollTop}) //设置图片相对于文档的left值 $("#adver").offset({left:adverLeft+scrollLeft}) }) }) </script>