`
myfreespace
  • 浏览: 223394 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 中的DOM操作

阅读更多

js中的dom操作是强大的,但是特长的函数名让我们有点烦吧,那就看看jquery中的吧,

1属性匹配;

$("a[href=xx]").addClass("myclass");把xx超链接添加类,也可以进行匹配$("a[href^=http://").addClass("myclass");表示以http://开头的a链接,当然也可以在结尾匹配 a[href$=xx]  任意匹配 *=
2,包含选择器:
$("li:has(a)");选择li下含有a元素的li元素,还有EF E>F E+F E~F
3.位置选择:
$("p:first-child");选择p标记,并且这个p标记是其父标记的第一个子标记,在 jquery中自动清除了ff中的空格,
$("p:even").addClass() 对p元素的偶数行添加类,等同于 :nth-child(even);不同的是:nth_child(even)的下标是从1开始的,而其他的是从0开始的,:nth-child()表示匹配父元素下的第n个元素或是偶数 奇数行,:eq() :gt() :lt()
4,过滤选择器
:checked获得用户的复选框的值,$("input[name="""]:checked).addClass();
input:not(:radio)方向过滤,
5,获取元素的个数
$("img").size()  $("img[title]")[1]获取第二个元素,等同于 $("img[title]").get(1)
6,添加 删除 过滤
$("img[alt]").add("img[title]")将所有设置了alt 和 title属性的img组合在一起,not()
$("div").addClass("haha").filter("[class*=middle]").addClass("myClass2");先给所有的div添加类,然后选择拥有.middle的div 添加类,注意在filter()过滤器中,不能直接使用=匹配,而用^= *= &= filter(fn)还可以自己定义函数来进行过滤,返回true表示添加,false 删除
$("p").find("span")在所有的p元素中搜索span元素,
7jquery 链的应用
$("p").find("span").addClass("class1").end().addClass("class2);在p中找span添加class1,利用end()将选择返回到$("p")添加样式class2
$("p").dinf("span").addClass("my1").andself().addClass("my2")把 前后的选择组合在一起添加样式.my2
8.获取遍历元素
$("img).each(function(index){ this.title = "k"+index;});
$("em").attr("title");获取第一个em标记的title属性,没有则返回空,而不会去匹配第二个,如果要匹配第二个可以用位置选择器$("em:eq(1)").attr("title");还可以用来设置属性 attr(name,value);
很多时候希望属性的值能够根据不同的元素属性有规律的变化就可以用attr(name,fn)来实现,函数fn接受一个参数为元素序号$("div").attr("id",function(index){return "div"+index;}).each(function(){$(this).find("span").html("(id='"+this.id+"')");attr(properties)还可以设置多个属性
$("img").attr({src:"xj,jpg",title:"haha",alt:"ji"});
属性删除:
$("button").removeAttr("disable")
在类别间动态切换
$(this).toggleClass("classname");点击或其他时间动态切换,
删除属性:
$("p").remove()直接将p元素删除,也可以接受参数,$("p").remvoe(":contains('ok')");移除包含有ok内容的p元素,
empty()是用来删除子元素的,$("p").empty()把p下的所有元素删除,
处理表单元素的值:
$("[name=rr]:checked").avl()获取选择的值,
获取select option 中的值可以是单选 或是多选
var singvalues = $("#name").val();
var multvalues = $("#name2").val()||[];// 可能存在不选的情况
multvalues.join(",");
//jquery中的动画
1,show(speed,[callback]);显示元素 无论这个元素是hide() 或是display:none隐藏的
$("p").show() ,speed还可以用来设置速度 slow normal fast  .callback执行结束回调的函数
2,hide() 
3,toggle() toggle(switch) toggle(speed,[callback]) 切换元素的现隐,

0
0
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics