标签: 我的笔记
认识jQuery
jQuery对象和DOM对象
DOM对象可以通过javascript获取。
var domFoo = document.getElementById("foo");
jQuery对象是jQuery包装DOM对象后产生的对象。
jQuery对象可以使用jQuery里的方法,但不能再使用DOM对象的方法。
DOM对象转成jQuery对象
用$( )
把 DOM对象包装起来就是jQuery对象了
var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr);
jQuery对象转成DOM对象
可以通过 [index]
得到jQuery里的 DOM 对象
var $cr = $("#cr"); // jQuery对象
var cr = $cr[0]; // DOM对象
页面加载事件(可以写多个ready())
$(document).ready(function(){
alert("hello world");
})
jQuery选择器
选择器
基本选择器
说明 | 示例 | 返回值 |
---|---|---|
id选择器 | $("#myDiv") | 单个元素 |
样式选择器 | $(".myClass") | 集合元素 |
name选择器 | $("div") | 集合元素 |
综合多个选择器 | $("#myDiv,div.myClass,span") | 集合元素 |
选择所有元素 | $("*") | 集合元素 |
层次选择器
说明 | 示例 | 返回值 |
---|---|---|
X的所有后代元素 | $("div span") | 集合元素 |
X的所有子元素 | $("div>span") | 集合元素 |
X后面的第一个Y元素 | $(".myClass+div") | 集合元素 |
X后面的所有同级Y元素 | $(".myClass~div") | 集合元素 |
过滤选择器(index从0开始)
基本过滤选择器
说明 | 示例 | 返回值 |
---|---|---|
X里的第一个元素 | $("div:first") | 单个元素 |
X里的最后一个元素 | $("div:last") | 单个元素 |
X里的除去Y的其它元素 | $("div:not(.myClass)") | 集合元素 |
X里的所有索引为偶数的元素 | $("div:even") | 集合元素 |
X里的所有索引为奇数的元素 | $("div:odd") | 集合元素 |
X里索引为index的元素 | $("div:eq(index)") | 集合元素 |
X里索引大于index的元素 | $("div:gt(index)") | 集合元素 |
X里索引小于index的元素 | $("div:lt(index)") | 集合元素 |
所有的标题元素(h1,h2,h3) | $(":header") | 集合元素 |
所有正在执行动画的元素 | $(":animated") | 集合元素 |
当前获取焦点的所有元素 | $(":focus") | 集合元素 |
子元素过滤选择器(index从1开始)
说明 | 示例 | 返回值 |
---|---|---|
每个父元素里的第 index/偶数/奇数 个子元素 | $(":nth-child(index/even/odd)") | 集合元素 |
每个父元素的第一个子元素 | $(":first-child") | 集合元素 |
每个父元素的最后一个子元素 | $(":last-child") | 集合元素 |
选择独生子子元素 | $("ul li:only-child") | 集合元素 |
内容过滤选择器
说明 | 示例 | 返回值 |
---|---|---|
包含制定内容的元素 | $(":contains(text)") | 集合元素 |
内容为空的元素 | $("div:empty") | 集合元素 |
包含制定元素的元素 | $("div:has(span)") | 集合元素 |
有子元素的元素(包括文本) | $("div:parent") | 集合元素 |
可见性选择器
说明 | 示例 | 返回值 |
---|---|---|
所有不可见的元素 (type=”hidden", style=”display:none", style=”visibility:none”) |
$(":hidden") | 集合元素 |
所有可见的元素 | $(":visible") | 集合元素 |
属性过滤选择器
说明 | 示例 | 返回值 |
---|---|---|
含有id属性的元素 | $("[id]") | 集合元素 |
class属性值是Y的元素 | $("[class=myClass]") | 集合元素 |
class属性值不是Y的元素 | $("[class!=myClass]") | 集合元素 |
$("div[id][class=myClass]") 所有含有id属性并且class属性值是myClass的div |
集合元素 |
表单对象属性选择器
说明 | 示例 | 返回值 | ||||
---|---|---|---|---|---|---|
可用元素 | $("#myForm:enabled") | 集合元素 | 不可用元素 | $("#myForm:disabled") | 集合元素 | |
被checked元素 | $("#myForm:checked") | 集合元素 | 被selected元素 | $("#myForm:selected") | 集合元素 |
表单选择器
说明 | 示例 | 返回值 |
---|---|---|
所有:input、select、 button、textarea元素 |
$(":input") | 集合元素 |
... | $(":text") | 集合元素 |
... | $(":password") | 集合元素 |
... | $(":radio") | 集合元素 |
... | $(":checkbox") | 集合元素 |
... | $(":submit") | 集合元素 |
... | $(":image") | 集合元素 |
... | $(":reset") | 集合元素 |
... | $(":button") | 集合元素 |
... | $(":file") | 集合元素 |
... | $(":hidden") | 集合元素 |
... | $(":text") | 集合元素 |
选择器的一些注意事项
选择器里不能随便加空格。
如果选择器中两个元素之间有空格,说明前一个元素的后代元素。
var a = $(".test:hidden"); //选取class为“test”的元素里那些隐藏的
var b = $(".test :hidden"); //选取class为“test”的元素的后代里的隐藏元素
jQuery操作DOM
查找节点
查找元素节点
123
var str = $("#myDiv").text(); //123
查找属性节点
123
var str = $("#myDiv").attr("title"); //hello
创建节点
创建元素节点
var $li1 = $("");
$("#myDiv").append($li1);
//结果:
$("span").append("a");
//结果:a
创建文本节点
var $li1 = $("X");
$("#myDiv").append($li1);
//结果:X
创建属性节点
var $li1 = $("first");
$("#myDIv").append($li1);
// 结果:first
插入节点
插入到到最后:
$("#myDiv").append(""); //往id为myDiv的元素插入span元素
$("").appendTo("#myDiv"); //将span元素插入到id为myDiv的元素
插入到最前:
prepend
prependTo
插入到制定元素的后面去(同级):
after
insertAfter
插入到制定元素的前面去(同级):
before
insertBefore
删除节点
$("#myDiv").remove(); //删除id为myDiv的元素
清空节点
$("#myDiv").empty();//清除所有子元素
$("#myDiv").empty("span"); //清除所有span子元素
复制节点
//id为myDiv的元素内的span元素的click
$("#myDiv span").click( function(){
//将span元素克隆,然后再添加到id为myDiv的元素内
$(this).clone().appendTo("#myDiv");
//如果clone传入true参数,表示同时复制事件
$(this).clone(true).appendTo("#myDiv");
})
替换节点
//将所有p元素替换成后者
$("p").replaceWith(" 您好");
//倒过来写,同上
$("您好").replaceAll("p");
包裹节点
//用b元素把所有strong元素单独包裹起来
$("strong").wrap("");
//把b元素包裹在strong元素内
$("strong").wrapInner("");
属性操作
//读
var txt = $("#myDiv").arrt("title");
//写
$("#myDiv").attr("title",”我是标题内容");
//多个属性同时写
$("#myDiv").attr({“title”:"我是标题内容", “alt”:"我还是标题");
//移除属性
$("#myDiv").removeArrt("alt");
样式操作
//读
var txt = $("#myDiv").arrt("class");
//写
$("#myDiv").attr("class",”myClass");
//追加样式
$("#myDiv").addClass("other");
//移除样式
$("#myDiv").removeClass("other");
$("#myDiv").removeClass("one two");
//移除所有样式
$("#myDiv").removeClass();
//切换样式
$("#myDiv").toggleClass("other");
//判断是否有other样式
$("#myDiv").hasClass("other");
设置和获取HTML、文本和值
//获取元素的HTML代码(js的innerHTML)
alert( $("#myDiv").html() );
//设置元素的HTML代码
$("#myDiv").html("hello");
//获取元素的文本内容(js的innerText)
alert( $("#myDiv").text() );
//设置元素的文本内容
$("#myDiv").text("hello");
//获取元素的value值(支持文本框、下拉框、单选框、复选框等)
alert( $("#myInput").val() );
//设置元素的value值(下拉框、单选框、复选框带有选中效果)
$("#myInput").val("hello");
遍历节点
//获取所有子元素(不考虑后代)
var $cList = $("#myDiv").children();
//获取下一个同辈元素
var $sNext = $("#myDiv").next();
//获取上一个同辈元素
var $sPrev = $("#myDiv").prev();
//获取所有同辈元素
var $sSibl = $("#myDiv").siblings();
//获取最近的匹配元素(向上查找,包括自己)
var $pClos = $("#myDiv").closest("span");
CSS-DOM操作
//读样式值
$("#myDiv").css("color");
//写样式值
$("#myDiv").css("color", “blue");
//多个写
$("#myDiv").css({“color”:"blue", “fontSize”:"12px"});
//设置元素的透明度
$("#myDiv").css("opacity", “0.5″);
//设置元素的高度
$("#myDiv").css("height"); //(单位:px)
$("#myDiv").height(); //无单位
//设置元素的宽度
$("#myDiv").css("width");//(单位:px)
$("#myDiv").width();
//元素在当前窗口的相对偏移量
var offset = $("#myDiv").offset();
alert( offset.top + “|” + offset.left );
//元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
var offset = $("#myDiv").position();
alert( offset.top + “|” + offset.left );
//获取元素的滚动条距离顶端的距离
$("#txtArea").scrollTop();
//...左侧...
$("#txtArea").scrollLeft();
//设置...顶端...
$("#txtArea").scrollTop(100);
//设置...左侧...
$("#txtArea").scrollLeft(100);
jQuery的事件和动画
事件
加载DOM
- ready,表示DOM加载完成(不包含图片等非文字媒体文件),
- onload,表示包含图片等文件在内的所有元素都加载完成。
区别:
- ready DOM就绪时就可以被调用,onload 需要所有元素完全加载后才执行;
- ready可以有多个
简写:
$(document).ready(function(){
console.log("1");
})
//$(document)可以简写为$(),因此:
$().ready(function(){
console.log("2");
})
//还可以再次简化为:
$(function(){
console.log("3");
})
一般控制样式的,比如图片大小控制放在onload 里面加载;
jS事件触发事件,可以在ready 里面加载;
事件绑定
可以通过bind()为元素绑定事件
bind( type, [data, ] fn );
type:指事件的类型:
- blur(失去焦点)、
- focus(获得焦点)、
- load(加载完成)、
- unload(销毁完成)、
- resize(调整元素大小)、
- scroll(滚动元素)、
- click(单击元素事件)、
- dbclick(双击元素事件)
- mousedown(按下鼠标)、
- mouseup(松开鼠标)、
- mousemove(鼠标移过)、
- mouseover(鼠标移入)、
- mouseout(鼠标移出)、
- mouseenter(鼠标进入)、
- mouseleave(鼠标离开)、
- change(值改变)、
- select(下拉框索引改变)、
- submit(提交按钮)、
- keydown(键盘按下)、
- keyup(键盘松开)、
- keypress(键盘单击)、
- error(异常)
data:指事件传递的属性值,event.data 额外传递给对象事件的值
fn:指绑定的处理函数,在此函数体内,$(this)指携带相应行为的DOM元素
简写:
$(function(){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
})
})
//简写为:
$(function(){
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
})
})
合并事件
1、hover(enter,leave)
鼠标移入执行enter、移出事件执行leave
$("# myDiv").hover(function() {
$(this).css("border", “1 px solid black");
0
}, function() {
$(this).css("border", “none");
});
2、toggle(fn1,fn2,…fnN)
鼠标每点击一次,执行一个函数,直到最后一个后重复
$("# myDiv").toggle(function() {
$(this).css("border", “1 px solid black");
0
}, function() {
$(this).css("border", “none");
});
事件冒泡
1、冒泡
因为DOM具有层次结构,事件按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。
AAAAAAA
$("span").click(function(){ alert(‘span’); });
$("div").click(function(){ alert(‘div’); });
$("body").click(function(){ alert(‘body’); });
//点击“AAAAAAA”的时候会弹出:span、div、body
2、停止冒泡 event.stopPropagation()
$("span").click(function(event){
alert(‘span click’);
event.stopPropagation(); //停止冒泡
});
3、阻止默认行为 event.preventDefault()
$("#btnSubmit").click(function(event){
event.preventDefault(); //相当于return false;
});
事件对象的属性
$("#myDiv").bind("click", function(event){ });
- event.type() //返回:click
- event.target() //获取当前元素
- event.pageX()/event.pageY() //获取鼠标的X和Y坐标
- event.which() //获取操作时按下的按键
- event.metaKey() //获取操作时按下的功能键(ctrl/alt/shift)
移除事件
//移除元素的所有事件
$("#myDiv").unbind();
//移除制定类型的事件
$("#myDiv").unbind("click");
//移除制定名称的事件
$("#myDiv").unbind("click",fn1);
一次性事件 one
事件执行一次后自动移除
$("#myDiv").one("click", [data], function(){
alert("function1″);
});
模拟操作 trigger
比如刚进入页面就自动触发click事件,就是一个模拟用户操作。
$("#btn").trigger("click", [data]); //代码方式触发click事件
$("#btn").click(); //另一种简写方式
事件命名空间
一个元素可以同时绑定多个同样的事件,然后用命名空间加以区分。
$("#myDiv").bind("click.hello", function(){
alert("function1″);
});
$("#myDiv").bind("click", function(){
alert("function1″);
})
$("div").unbind("click"); //两个事件都被移除
$("div").unbind(".hello"); //只移除第一个
$("div").unbind("click!"); //只移除第二个(没命名空间的)