基本选择器
#id id匹配
.class 类匹配
Element 元素名匹配
∗ 匹配所有元素
E1,E2,E3 分组匹配
层次选择器
$(“E1 E2”) 选择E1下所有E2
$(“E1> E2”) 选择E1下的子E2,的元素
$(“E1+ E2”) 选择E1后紧相邻的
$(“E1~ E2”) 选择E1之后的所有
补充说明:
( “ E 1 + E 2 ” ) 可 以 用 (“E1 + E2”)可以用 (“E1+E2”)可以用(E1).next(E2)代替
( “ E 1 E 2 ” ) 可 以 用 (“E1 ~ E2”)可以用 (“E1 E2”)可以用斜体样式(E1).nextAll(E2)代替
过滤选择器
通过特定的过滤规则来筛选出需要的DOM元素,以冒号(:)开头。
3.1 基本过滤选择器
:first
:last
:not(E1) 去除所有E1选择器匹配的元素
:even 偶数
:odd 奇数
:eq(index) 索引值是index
:gt(index) 索引值大于index的元素
:lt(index) 索引值小于index的元素
:header 所有标题元素
:animated 正在执行动画的所有元素
3.2 内容过滤选择器
:contains(text) 含有text文本内容的元素
:empty 不包含子元素或文本的空元素
:has(E1) 包含有(E1选择器匹配的元素) 的所有元素
:parent 含有子元素或文本的元素
3.3 可见性过滤选择器
:hidden 所有不可见元素
:visible 所有可见元素
3.4 属性过滤选择器
[attribute] 拥有此属性的元素
[attribute=value] 属性值为value的元素
[attribute!=value] 属性值不为value的元素
[attribute^=value] 属性值以value开始的元素
[attribute$=value] 属性以value值结束的元素
[attribute*=value] 属性中含有value的元素
[A1][A2]…A[N] 用属性选 择器合并成一个复合属性选择器。满足多个条件。
3.5 子元素过滤选择器
:nth-child(index/even/odd) 父元素下的第index素或奇偶元素
:first-child 每个父元素的第1个子元素
:last-child 每个父元素的最后1
:only-child 某个元素是它父元素中惟一的子元素, 将会被匹配. 如果元素中含有其他元素,则不会被匹配
:nth-child()
3.6 表单对象属性过滤选择器
:enabled 所有可用元素
:disabled 所有不可用元素
:checked 所有被选中的元素(单选框,复选框)
:selected 所有被选中的选项元素(下拉列表)
内部插入
append / appendto 向后追加
prepend / prependto 向前追加(最上边)world!")
html( )
:获取匹配元素集合中第一个元素的HTML内容并返回字符串
text()方法
获取匹配元素集合中每个元素的内容并返回字符串
val()方法
元素的值通过 value 属性设置的。多用于 input 元素。
外部插入
before / insertBefore
此方法将参数指定的内容插入到匹配元素集合中的每个元素之前,并返回jQuery对象。
删除
remove()方法
移除被选元素,包括所有文本和子节点
detach()方法
移除被选元素,包括所有文本和子节点detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。
empty()方法
从被选元素移除所有内容,包括所有文本和子节点。
替换
replaceWith()方法
用指定的 HTML 内容或元素替换被选元素
例:$(“p”).replaceWith(“Hello world!”);
复制
.clone()方法
例: ( " b o d y " ) . a p p e n d ( ("body").append( ("body").append((“p”).clone());
包装
1.wrap()方法
例:$(“p”).wrap("
获取/设置
attr()方法
设置或获取被选元素的属性值/自定义属性返回属性值
获取属性 例: ( " i m g " ) . a t t r ( " w i d t h " ) ; 设 置 属 性 例 : ("img").attr("width"); 设置属性 例: ("img").attr("width");设置属性例:(“img”).attr({“width”:“180”,‘height’:‘150’}); – 大号变为json对象
prop() 方法
设置或返回被选元素的属性和值(计算过的)
删除属性
removeAttr()方法
从被选元素中移除属性例:$(“p”).removeAttr(“id”)
removeProp() 方法
移除由 prop() 方法设置的属性。
1. 添加类 addClass()
向被选元素添加一个或多个类。
例子:$("p:first").addClass("intro");
2. 移除类 removeClass()
从被选元素移除一个或多个类。
例子:$("p").removeClass("intro");
3. toggleClass()
有就删除,没有就添加
例子:$("p").toggleClass("main");
4. 检查是否含有 hasClass()
检查被选元素是否包含指定的class
例子:alert($("p:first").hasClass("intro"));
$.each(遍历对象,function( index,遍历对象中的元素){ })
- 1. 向上遍历
parent()
返回被选元素的直接父元素。
parents()
返回被选元素的所有祖先元素,可以加区间
$(“span”).parents(“ul”); 返回所有 元素的所有祖先并且它是
1**. first()**
返回被选元素的首个元素
2. last()
返回被选元素的最后一个元素
3. eq()
返回被选元素中带有指定索引号的元素
eg: ( " d i v " ) . e q ( 3 ) . c s s ( " b a c k g r o u n d − c o l o r " , " g r e e n " ) ; ∗ ∗ 4. f i l t e r ( ) ∗ ∗ 允 许 您 规 定 一 个 标 准 。 不 匹 配 这 个 标 准 的 元 素 会 被 从 集 合 中 删 除 , 匹 配 的 元 素 会 被 返 回 例 如 : ("div").eq(3).css("background-color","green"); **4. filter()** 允许您规定一个标准。不匹配这个标准的元素 会被从集合中删除,匹配的元素会被返回 例如: ("div").eq(3).css("background−color","green");∗∗4.filter()∗∗允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回例如:(".parent div").filter(":odd").css(“color”,“red”);
5. not()
返回不匹配标准的所有元素
get方法与eq方法
get()返回dom eq()返回Jquery
区别:eq返回的是一个jquery对象 get返回的是一个html 对象数组
each()
$(selector).each(function(index){})
可以遍历指定的元素集合,通过回调函数返回遍历元素的序列号
事件类型
blur、focus、load、resize、scroll、
unload、click、dblclick、mousedown、
mouseup、mousemove、mouseover、
mouseout、mouseenter、mouseleave、
change、select、submit、keydown、
keypress、keyup、error等。
事件绑定
bind
bind(type、[data]、function)
Type为事件类型
data为方法传递的参数,可以忽略.
function是用来绑定的处理函数.
例如:为id为hot 的div的元素绑定单击事件。
$(“#hot”).bind(“click”,function(){
alert(“层被点击”);
})
on
$(selector).on(event,childselector,data,function)
bind跟on绑定事件的区别:
on 阻止了事件冒泡
绑定单个事件
bind(“事件名”,function(){})
on(“事件名”,function(){})
绑定多个事件
on({“事件名1”:function(){},”事件名2”:function()
{}})
一次绑定多个事件
$(“div”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})
一次性绑定事件
one(“事件名”,function(){})
hover()
合成事件,方法触发
hover(enter,leave)
用于模拟光标悬停事件.当光标移动到元素上时,
会触发指定的第一个函数,当光标移出这个元素
时,触发指定的第二个函数.
4. 常见事件
mouseenter 进入
mouseleave 离开
与js区别
mouseenter事件和mouseover的区别关键点就是:冒泡的方式处理问题mouseover 会冒泡,触发父节点的mouseover事件
mouseenter 只会在绑定它的元素上被调用,而不会在后代节点上被触发
事件移除
unbind
$(“#pos”).unbind(“click”);
off
off(“事件名”)
6. 事件冒泡
冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。
阻止事件冒泡的方法
在绑定的事件中加入event参数并在函数中增加ent.stopPropagation()调用就可以阻止事件冒泡。也可以使用return false阻止冒泡。
event.preventDefault();
作用是阻止默认行为
7. 模拟事件
$(“seletor”).trigger(“event”)
会触发默认行为
$(“seletor”).triggerHandler(“event”)
不会触发默认行为
实现通过一个事件去操作另一个事件的执行,为了调用自定义的事件(通常与bind或者on事件合作)
模拟操作可以使用trigger()方法来完成。
例如:
$(“#pos”).click(function(){
$(“#btn”).trigger(“click”);//模拟操作触发的#btn
的click事件.
})
模拟事件可以实现传参数给操作的事件
**trigger(type [,data])**方法有两个参数,
第一个参数是要触发的事件类型,第二个参数是传递给事件处理函数的附加数据,以数组的形式传递.
$(“#btn”).bind(“click”,function(event,mes,mes2)
{
alert(mes+”,”+mes2);
})
$(“#btn”).trigger(“click”,[“Hello”,”World!”]);
注意:在事件绑定时的event参数是不可
以省略的.但在调用时可以不指定。
1,隐藏、显示
$("p").hide();
$("p").show();
$("p").toggle();
2,淡入、淡出
$("p").fadeIn();
$("p").fadeOut();
$("p").fadeTo();
例:$("p").fadeTo(1000,0.4);
$("p").fadeToggle();
3,划入、划出
$("p").slideDown();
$("p").slideUp();
$("p").slideToggle();
4,自定义动画
提供easing参数swing开头结尾慢,中间快 (默认)linear (匀速)
$("div").animate({left:'250px'},
3000,"linear",callback);
$(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast function(){ });
5,停止动画
$("p").stop();
停止第一个动画
$("p").stop(stopAll,goToEnd);
停止所有动画
eg:$("p").stop(true,true);
stopAll : true
是否停止全部
gotoEnd : true
是否允许完成当前的动画
6,延迟动画
$("p").delay("slow").fadeIn();
eg:delay(1000)
$(selector).delay(duration)
7,判断元素是否处于动画状态
$(“#ele”).is(“:animated”)
说明:动画是顺序执行的。
function AJAX(path) {
$.ajax({
type: 'get',
url: path,
dataType: 'jsonp',
success: function(data) {
console.log('请求成功!', data)
},
error: function() {
console.log('请求失败!')
}
})
}
AJAX('https://apis.map.qq.com/output=jsonp');
异步方法
.done( )
.fali( )
.always( )
.then( )
cookie
使用插件
三种方式:
添加一个"会话cookie"
$.cookie(‘the_cookie’, ‘the_value’);
创建一个cookie并设置有效时间为 7天
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7 });
创建一个cookie并设置 cookie的有效路径
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/’ });
读取cookie
$.cookie(‘the_cookie’);
删除cookie
$.cookie(‘the_cookie’, null); //通过传递null作为cookie的值即可
可选参数
$.cookie(‘the_cookie’,‘the_value’,{
expires:7,
path:’/’,
domain:‘jquery.com’,
secure:true
})
expires:(Number|Date)有效期;设置一个整数时,单位是天;也可以设置一个日期对象作为Cookie的过期日期;
path:(String)创建该Cookie的页面路径;
domain:(String)创建该Cookie的页面域名;
secure:(Booblean)如果设为true,那么此Cookie的传输会要求一个安全协议,例如:HTTPS;
注意:cookie是基于域名来储存的。要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。