jQuery常用方法总结
1.入口函数写法
$(document).ready.(function(){});
jQuery.(document).ready.(function(){});
$(function(){}); //推荐第三种,更简便
jQuery(function(){});
2.jquery的冲突问题:在jQuery中使用$字符代表jQuery对象,但是其他js框架也可能使用该符号
其他框架也会使用$
- 使用方法一:
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
- 方法二:或者创建自己的缩写
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});
* 方法三:将$参数传递给ready
```js
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
3.操纵属性或属性节点 attr(),prop()
任何元素都具有属性,但是只有HTML元素才具有属性节点
属性
对象身上保存的变量
如何操作属性
function Persion(){
var name;
}
var p=new Persion();
p.name="wxh";
p["name"]="wxh";
属性节点
在新建HTML元素时为元素添加的属性<span name="wxh"></span>
attr()
传递一个参数代表获取,传递两个参数代表更改
例如: $("div").attr("class");
代表获取类名$("div").attr("class","abc");代表设置类名
prop()
用法同attr相同
attr()与prop()两者间的区别
attr只能返回属性节点,prop既能返回属性又能返回属性节点
但是如果返回的属性节点值为布尔值用 attr 较合适因为
var a=$("input").attr("checked");
var b=$("input").prop("checked");
console.log(a);//a为undefined/checked
console.log(b);//b为true/false
常见的返回布尔值的属性节点 checked selected disabled
删除属性节点
removeAttr()
removeProp()
4.css操纵类
addClass(class|fn) 增加类
removeClass([class|fn]) 删除类
toggleClass(class|fn[,sw]) 切换类
var arr=document.getElementsByTagName("button");
arr[0].onclick=function(){//增加类,同时增加两个
$("div").addClass("class1 class2");
};
arr[1].onclick=function(){//删除类
$("div").removeClass("class1");
};
arr[2].onclick=function(){//切换类
$("div").toggleClass("class1");//若无则加上若有则减去
$("div").toggleClass("class1","class3");//两类切换
};
});
5.文本值相关操作
html([val|fn])
text([val|fn])
val([val|fn|arr])
$("div").html("<p>我是一个段落</p>");//写入一个元素,相当于js中innerHTML
console.log($("div").html());//得到html元素
$("div").text("helloWorld");//设置文本
console.log($("div").text());//得到文本
$("input").val("helloWorld");//设置输入框内容
console.log($("input").val());//得到输入框内容
6.操作css样式
设置
//单个设置
$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");
//链式设置
$("div").css("width","200px").css("height","200px");
//批量设置
$("div").css({
width:"100px",
height:"100px",
background:"black"
});
获取
$("div").css("width");
获取设置宽度高度
height();width();innerHeight();innerWidth();outerHeight();outerWidth();
//所得值设置值均不带单位
获取/设置元素距离窗口的偏移位
//获取
$("wxh").offset().left;
//设置
$("wxh").offset({
left:100,
top:0
});
获取元素距离父元素的位置
$("wxh").position().left;
注意:只能获取不能设置
设置获取滚动条的偏移位
设置相对顶部的偏移位scrollTop();scrollTop(300);
设置相对于左侧的偏移位scrollLeft();scrollLeft(300)
7.绑定事件
eventname:事件名称
- 编码效率略高,但是部分功能jQuery没有实现
$("button").click(function(){ alert(1); });
on
- 编码效率略低,所有js事件都可以添加
$("button").on("click",function({ alert(1); });
注意:两个都可以添加多个相同或不同的事件不能覆盖
删除绑定事件
function test1(){
alert("test1");
}
function test2(){
alert("test2");
}
$("button").on("click",test1);
$("button").on("click",test2);
$("button").off("click",test1);
$("button").off("click");
off()一个参数代表删除指定类型事件,两个参数代表删除指定类的指定类型事件
8.事件冒泡和默认行为
事件冒泡
<div class="father">
<div class="son"></div>
</div>
为两个嵌套的div添加点击事件监听
$(".father").click(function(){
alert("father");
});
$(".son").click(function(){
alert("son");
});
若点击son会弹出两个对话框,若要避免这种情况
- 在选择son的回调函数中返回false:
return false;
- 为son的回调函数增加参数,同时调用阻止事件冒泡ev.stopPropagation()
$(".son").click(function(ev){
alert("son"); ev.stopPropagation(); });
阻止默认行为
例如为a标签增加herf链接,默认点击跳转
- 需要阻止的事件中添加:return false;
- 为回调函数增加参数同时在函数内增加方法:ev.preventDefault();
9.节点
添加节点
内部
append(content|fn) 在元素内部最后添加新元素
appendTo(content) 把新元素添加到元素内部
prepend(content|fn) 在元素内部最前添加新元素
prependTo(content) 把新元素添加到元素内部最前
外部插入
after(content|fn) 在元素之后增加新元素
before(content|fn) 在元素之前增加新元素
删除节点
empty()删除指定元素的内容和子元素
remove(".abc")删除指定元素
替换节点
replaceWith(content|fn)
替换选中元素
复制节点
$("button").eq(0).click(function(){
var $li=$("li").eq(0).clone(false);
$("ul").append($li);
});
$("button").eq(1).click(function(){
var $li=$("li").eq(0).clone(true);
$("ul").append($li);
});
$("li").click(function(){
alert(1);
});
});
后面参数为false是浅复制,true是深复制
浅复制只会复制内容不会复制事件
10.事件委托
事件委托的意义:如果为页面中所有的div设置点击弹出 alert("我是div")
使用append()或html()方法动态添加新的 div 元素则这个不会有弹出框,则为把新增的div委托给它一直存在的父元素
$().delegate(selector,[type],[data],fn)
指定元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定这是事件发生时运行的函数
$("body").delegate("textarea","input",function(){
alert("检测到文本框输入");
});
代表含义 body内的子元素 textarea 输入时执行以下函数,弹出对话框
11.寻找父元素
parent/parents
- parent:取得一个包含所有匹配元素的唯一父元素的集合,直接父元素
- parents:匹配一个所有匹配元素的元素集合,父元素或父元素的父元素等更高级
$("span").parents("p");
12.find
寻找后代元素
<div class="father">
<div class="son">
<div class="son_son"></div>
</div>
</div>
$(".father").find("son_son");
查找子代元素 children()
13. siblings
找到某元素同级的所有元素集合
<ul>
<li class="a"></li>
<li></li>
<li class="b"></li>
<li class="b"></li>
<li></li>
<div></div>
</ul>
$(".a").siblings();//得到ul内除该元素本身的所有元素,包括div
$(".a").siblings(".b")//得到ul内除该元素自身的所有class为 b 的元素
14.each
<ul>
<li class="a"></li>
<li></li>
<li class="b"></li>
<li class="b"></li>
<li></li>
<div></div>
</ul>
var arry = $("ul").find("li");
arry.each(function(i){//i代表对应集合的下标
});