标签： 我的笔记
认识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
查找节点
查找元素节点
<div id=”myDiv” title=”hello”>123</div>
var str = $("#myDiv").text(); //123
查找属性节点
<div id=”myDiv” title=”hello”>123</div>
var str = $("#myDiv").attr("title"); //hello
创建节点
创建元素节点
var $li1 = $("<span></span>");
$("#myDiv").append($li1);
//结果：<div id=”myDiv”><span></span></div>
$("span").append("a");
//结果：<div id=”myDiv”><span>a</span></div>
创建文本节点
var $li1 = $("<span>X</span>");
$("#myDiv").append($li1);
//结果：<div id=”myDiv”><span>X</span></div>
创建属性节点
var $li1 = $("<span title=”111″>first</span>");
$("#myDIv").append($li1);
// 结果：<div id=”myDiv”><span title=”111″>first</span></div>
插入节点
插入到到最后：
$("#myDiv").append("<span></span>"); //往id为myDiv的元素插入span元素
$("<span></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("<strong> 您好</strong>");
//倒过来写，同上
$("<strong>您好</strong>").replaceAll("p");
包裹节点
//用b元素把所有strong元素单独包裹起来
$("strong").wrap("<b></b>");
//把b元素包裹在strong元素内
$("strong").wrapInner("<b></b>");
属性操作
//读
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("<span>hello</span>");
//获取元素的文本内容（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的层次结构，像水泡一样不断向上直到顶端，所以称之为事件冒泡。
<body><div><span>AAAAAAA</span></div></body>
$("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!"); //只移除第二个（没命名空间的）
网友评论