JQ dom,事件绑定,方法总结

1.get(0)
<p>This is a paragraph</p>
x=$("p").get(0);等同于$("p")[0]
x.nodeName + "--- " + x.innerHTML  //P--- This is a paragraph
2.index()
<li>Milk</li>
<li class="hot">Tea</li>
<li class="hot" id="favorite">Coffee</li>
<li class="hot" id="HHH">Coffee</li>
$("#HHH")).index();  // 结果:3    获得第一个匹配元素相对于其同胞元素的 index 位置,如果未找到元素,index() 将返回 -1。
$(".hot").index($("#HHH"))  //结果:23.toArray()    //$("li").toArray();//[li, li.hot, li#favorite.hot, li#HHH.hot]
4.操作class+一个简单变色小按钮
<style>
p{ width: 100px; height: 50px; background-color: darkblue; border-radius: 5px; line-height: 50px; text-align: center; color: #FFFFFF;}
.pc{ background-color: green; }
</style>
<p>button</p>
<a>嘿嘿</a>
<h1 class="h11" ></h1>
$("div").text(name);//在div中显示name
$("a").html("hehe");//给a标签赋值
$("h1").hasClass("h11");//判断是否有某个class
$("p").on("mouseover mouseout",function(){ $(this).toggleClass("pc");//鼠标移动使按钮变亮 })
$("li").has("strong").css("border","1px solid red");
5.prop()
<input type="checkbox" value="xuanze"/>
$("input").prop("value");//获取value属性的值,其他属性也可以获取
$("input").prop("value","6666");//为input的value赋值为666
$("input").prop("type","text");//其他属性也可以
6.wrap() //给每个P元素包裹一个div元素
unwarp();//指删除所选对象最近的div一层
wrapAll("<div></div>");//给所有p元素包装一个div元素
wrapInner

7.append
$("p").append("<p>hehehe</p>");
$("p").append($("span"));//将span标签从原有位置移动到span标签里面
$("<p>111</p>").appendTo($("p"));//将<p>111</p>插入到p标签里
$("p").prepend("<div>22222222</div>");//与append的不同之处在于此方法会把div插入到原始数据之前
8.clone() //复制方法
$("span").clone().appendTo($("p"));//复制span标签并插入

9.after,before
$("p").after("<span>p后111111111</span>")//在整个p标签后添加一个标签
$("p").before("<span>p前333333</span>")
10.detach,empty,remove
$('.hello').empty();//选择到的对象标签内部全部删除,包括内部事件
$('.hello').detach() ;//detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。
remove()与empty()//相同

11.$(this).is("li")//判断此对象是否为'li';

12.$("li").eq(1).css("background-color","red");//获取索引为1的元素  从后往前的索引从-1开始

13.find,end  //end方法结束了过滤操作 返回到上一层
$("ul").find(".foo").css("background-color","yellow").end().find(".bar").css("background-color","green");

14.preventDefault//阻止事件
$("a").click(function(e){    e.preventDefault(); alert("阻止了")})

//事件绑定
$(a).click(function (){}, function () {});//一个事件多个方法
$(a).bind({  click:function(){},   mouseover:function(){}});//多个事件,每个事件一个方法
$("p").on("mouseover mouseout",function(){ $(this).toggleClass("pbtn")})//多个事件一个方法
$("ul").on("li","click",function(){})//ul中的li
$("div").off("mouseover","p",fn);//里面一个事件不写就是移除掉所有事件
$("p").one("click",function(){})////one事件 为元素添加处理函数 每个处理函数最多执行一次 常用作引导页

猜你喜欢

转载自blog.csdn.net/qq_41859067/article/details/81747295