神奇的JQuery学习基础学习笔记.docx
- 文档编号:10577530
- 上传时间:2023-02-21
- 格式:DOCX
- 页数:26
- 大小:150.86KB
神奇的JQuery学习基础学习笔记.docx
《神奇的JQuery学习基础学习笔记.docx》由会员分享,可在线阅读,更多相关《神奇的JQuery学习基础学习笔记.docx(26页珍藏版)》请在冰豆网上搜索。
神奇的JQuery学习基础学习笔记
[提供]
【随着JavaScript的兴起,一系列JavaScript库也蓬勃发展起来。
从早期的Prototype、Dojo到2006年的jQuery,再到2007年ExtJs。
可以发现,互联网正在掀起一场JavaScript风暴。
在这场风暴中,jQuery以其独特优雅的姿态,始终处于这场风暴的中心,受到越来越多的人的追捧。
】
Guihua
2010-9-15
【锋利的jQuery学习笔记】
第一章认识JQuery
页面加载事件(可以写多个ready())
$(document).ready(function(){
alert(“helloworld”);
})
链式操作:
JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素、父元素等
//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式
$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″);
JQuery中获得一个对象的所有子元素内容
$(“#myDiv”).html()
JQuery中的变量与DOM中的变量
var$myVar=“”;
varmyVar=“”;
DOM对象转换成JQuery对象
varobj=documnet.getElementById(“myDiv”);
var$obj=$(obj);
JQuery对象转换成DOM对象
var$obj=$(“#myDiv”);
varobj=$obj.get(0); //或者varobj=$obj[0];
释放JQuery对$符号的控制权
JQuery.noConflict();
第二章JQuery选择器
JQuery完善的处理机制
document.getElementById(“test”).style.color=“red”;//如果test不存在,则页面出现异常
$(“#test”).css(“color”,”red”);//哪怕页面没有名称为test的元素,也不会报错。
它是一个JQuery对象
判断页面是否选择的对象
if($(“.class”).length>0){
//todosomething
}
基本选择器
$(“#myDiv”) //根据给定的ID选择匹配的元素,返回:
单个元素
$(“.myClass”)//根据给定的样式名称选择匹配的元素,返回:
集合元素
$(“div”)//根据给定的元素名称选择匹配的元素,返回:
集合元素
$(“#myDiv,div.myClass,span”)//根据给定的规则选择匹配的元素,返回:
集合元素
$(“*”)//选择页面所有元素,返回:
集合元素
层次选择器
$(“divspan”)//选择所有DIV元素下的所有SPAN元素(所有后代元素),返回:
集合元素
$(“div>span”)//选择所有DIV元素下的SPAN子元素(仅子元素),返回:
集合元素
$(“.myClass+div”)//选择样式名称为myClass的下一个DIV元素,返回:
集合元素
$(“.myClass+div”)//等价于$(“.myClass”).next(“div”);
$(“.myClass~div”)//选择样式名称为myClass之后的所有DIV元素,返回:
集合元素
$(“.myClass~div”)//等价于$(“.myClass”).nextAll();
$(“.myClass”).siblings(“div”)//选择样式名称为myClass的元素的所有同辈DIV元素(无论前后),返回集合元素
过滤选择器(index从0开始)
$(“div:
first”)//选择所有DIV元素下的第一个DIV元素,返回:
单个元素
$(“div:
last”)//选择所有DIV元素下的最后一个DIV元素,返回:
单个元素
$(“div:
not(.myClass)”)//选择所有样式不包括myClass的DIV元素,返回:
集合元素
$(“div:
even”)//选择所有索引是偶数的DIV元素,返回:
集合元素
$(“div:
odd”)//选择所有索引是奇数的DIV元素,返回:
集合元素
$(“div:
eq(index)”)//选择所有索引等于index的DIV元素,返回:
集合元素
$(“div:
gt(index)”)//选择所有索引大于index的DIV元素,返回:
集合元素
$(“div:
lt(index)”)//选择所有索引小于index的DIV元素,返回:
集合元素
$(“:
header”)//选择所有标题元素(h1,h2,h3),返回:
集合元素
$(“div:
animated”)//选择所有正在执行去画的DIV元素,返回:
集合元素
子元素过滤选择器(index从1开始)
$(“:
nth-child(index/even/odd)”)//选择每个父元素下的第index/偶数/奇数个子元素,返回:
集合元素
$(“:
first-child”)//选择每个父元素下的第一个子元素,返回:
集合元素
$(“:
last-child”)//选择每个父元素下的最后一个子元素,返回:
集合元素
$(“ulli:
only-child”)//在UL元素中选择只有一个LI元素的子元素,返回:
集合元素
内容过滤选择器
$(“:
contains(text)”)//选择所有内容包含text的元素,返回:
集合元素
$(“div:
empty”)//选择所有内容为空的DIV元素,返回:
集合元素
$(“div:
has(span)”)//选择所有含有SPAN子元素的DIV元素,返回:
集合元素
$(“div:
parent”)//选择所有含有子元素的DIV元素,返回:
集合元素
可见性选择器
$(“:
hidden”)//选择所有不可见的元素(type=”hidden”style=”display:
none”style=”visibility:
none”),返回:
集合元素
$(“:
visible”)//选择所有可见的元素,返回:
集合元素
属性过滤选择器
$(“[id]“)//选择所有含有id属性的元素,返回:
集合元素
$(“[class=myClass]“)//选择所有class属性值是myClass的元素,返回:
集合元素
$(“[class!
=myClass]“)//选择所有class属性值不是myClass的元素,返回:
集合元素
$(“[alt^=begin]“)//选择所有alt属性值以begin开始的元素,返回:
集合元素
$(“[alt^=end]“)//选择所有alt属性值以end结束的元素,返回:
集合元素
$(“[alt*=some]“)//选择所有alt属性值含有some的元素,返回:
集合元素
$(“div[id][class=myClass]“)//选择所有含有id属性的并且class属性值是myClass的元素,返回:
集合元素
表单对象属性选择器
$(“#myForm:
enabled”)//选择ID属性为myForm的表单的所有可用元素,返回:
集合元素
$(“#myForm:
disabled”)//选择ID属性为myForm的表单的所有不可用元素,返回:
集合元素
$(“#myForm:
checked”)//选择ID属性为myForm的表单的所有所有被选中的元素,返回:
集合元素
$(“#myForm:
selected”)//选择ID属性为myForm的表单的所有所有被选中的元素,返回:
集合元素
表单选择器
$(“:
input”)//选择所有<input><select><button><textarea>元素,返回:
集合元素
$(“:
text”)//选择所有单行文本框元素,返回:
集合元素
$(“:
password”)//选择所有密码框元素,返回:
集合元素
$(“:
radio”)//选择所有单选框元素,返回:
集合元素
$(“:
checkbox”)//选择所有复选框元素,返回:
集合元素
$(“:
submit”)//选择所有提交按钮元素,返回:
集合元素
$(“:
image”)//选择所有图片按钮元素,返回:
集合元素
$(“:
reset”)//选择所有重置按钮元素,返回:
集合元素
$(“:
button”)//选择所有按钮元素,返回:
集合元素
$(“:
file”)//选择所有上传域元素,返回:
集合元素
$(“:
hidden”)//选择所有不可见域元素,返回:
集合元素
$(“:
text”)//选择所有单选文本框元素,返回:
集合元素
第三章JQuery中的DOM操作
查找元素节点
varstr=$(“#myDiv”).text();//<divid=”myDiv”title=”hello”>123</div>
alert(str);//结果:
123
查找属性节点
varstr=$(“#myDiv”).attr(“title”);//<divid=”myDiv”title=”hello”>123</div>
alert(str);//结果:
hello
创建元素节点
var$li1=$(“<span></span>”);//传入元素标记,自动包装并创建第一个li元素对象
var$li2=$(“<span></span>”);//第二个,创建时需要遵循XHTML规则(闭合、小写)
$(“#myDiv”).append($li1);//往id为myDiv的元素中添加一个元素
$(“#myDiv”).append($li2);//结果:
<divid=”myDiv”><span></span><span></span></div>
$(“#myDIv”).append($li1).append($li2);//客串:
传说中的链式写法,省一行代码^_^
创建文本节点
var$li1=$(“<span>first</span>”);
var$li2=$(“<span>second</span>”);
$(“#myDIv”).append($li1).append($li2);
//结果:
<divid=”myDiv”><span>first</span><span>second</span></div>
创建属性节点
var$li1=$(“<spantitle=”111″>first</span>”);
var$li2=$(“<spantitle=”222″>second</span>”);
$(“#myDIv”).append($li1).append($li2);
//结果:
<divid=”myDiv”><spantitle=”111″>first</span><spantitle=”222″>second</span></div>
插入节点
$(“#myDiv”).append(“<span></span>”);//往id为myDiv的元素插入span元素
$(“<span></span>”).appendTo(“#myDiv”);//倒过来,将span元素插入到id为myDiv的元素
$(“#myDiv”).prepend(“<span></span>”);//往id为myDiv的元素内最前面插入span元素
$(“<span></span>”).prependTo(“#myDiv”);//倒过来,将span元素插入到id为myDiv的元素内的最前面
$(“#myDiv”).after(“<span></span>”);//往id为myDiv的元素后面插入span元素(同级,不是子元素)
$(“<span></span>”).insertAfter(“#myDiv”);//倒过来,将span元素插入到id为myDiv的元素后面(同级,不是子元素)
$(“#myDiv”).before(“<span></span>”);//往id为myDiv的元素前面插入span元素(同级,不是子元素)
$(“<span></span>”).insertBefore(“#myDiv”);//倒过来,将span元素插入到id为myDiv的元素前面(同级,不是子元素)
删除节点
$(“#myDiv”).remove();//将id为myDiv的元素移除
清空节点
$(“#myDiv”).remove(“span”);//将id为myDiv的元素内的所有span元素移除
复制节点
$(“#myDivspan”).click(function(){//点击id为myDiv的元素内的span元素,触发click事件
$(this).clone().appendTo(“#myDiv”);//将span元素克隆,然后再添加到id为myDiv的元素内
$(this).clone(true).appendTo(“#myDiv”);//如果clone传入true参数,表示同时复制事件
})
替换节点
$(“p”).replaceWith(“<strong>您好</strong>”);//将所有p元素替换成后者<p>您好</p>–><strong>您好</strong>
$(“<strong>您好</strong>”).replaceAll(“p”);//倒过来写,同上
包裹节点
$(“strong”).wrap(“<b></b>”);//用b元素把所有strong元素单独包裹起来<b><strong>您好</strong></b><b><strong>您好</strong></b>
$(“strong”).wrapAll(“<b></b>”);//用b元素把所有strong元素全部包裹起来<b><strong>您好</strong><strong>您好</strong></b>
$(“strong”).wrapInner(“<b></b>”);//把b元素包裹在strong元素内<strong><b>您好</b></strong>
属性操作
vartxt=$(“#myDiv”).arrt(“title”);//获取id为myDiv的元素的title属性
$(“#myDiv”).attr(“title”,”我是标题内容”);//设置id为myDiv的元素的title属性的值
$(“#myDiv”).attr({“title”:
”我是标题内容”,“alt”:
”我还是标题”);//一次性设置多个属性的值
$(“#myDiv”).removeArrt(“alt”);//移除id为myDiv的元素的title属性
样式操作
vartxt=$(“#myDiv”).arrt(“class”);//获取id为myDiv的元素的样式
$(“#myDiv”).attr(“class”,”myClass”);//设置id为myDiv的元素的样式
$(“#myDiv”).addClass(“other”);//在id为myDiv的元素中追加样式
$(“#myDiv”).removeClass(“other”);//在id为myDiv的元素中移除other样式
$(“#myDiv”).removeClass(“myClassother”);//在id为myDiv的元素中移除myClass和other多个样式
$(“#myDiv”).removeClass();//在id为myDiv的元素中移除所有样式
$(“#myDiv”).toggleClass(“other”);//切换样式,在有other样式和没other样式之间切换
$(“#myDiv”).hasClass(“other”);//判断是否有other样式
设置和获取HTML、文本和值
alert($(“#myDiv”).html());//获取id为myDiv的元素的HTML代码(相当于innerHTML)
$(“#myDiv”).html(“<span>hello</span>”);//设置id为myDiv的元素的HTML代码
alert($(“#myDiv”).text());//获取id为myDiv的元素的HTML代码(相当于innerText)
$(“#myDiv”).text(“hello”);//设置id为myDiv的元素的HTML代码
alert($(“#myInput”).val());//获取id为myDiv的元素的value值(支持文本框、下拉框、单选框、复选框等)
$(“#myInput”).val(“hello”);//设置id为myDiv的元素的value值(下拉框、单选框、复选框带有选中效果)
遍历节点
var$cList=$(“#myDiv”).children();//获取id为myDiv的元素的子元素(只考虑子元素,不考虑后代元素)
var$sNext=$(“#myDiv”).next();//获取id为myDiv的元素的下一个同辈元素
var$sPrev=$(“#myDiv”).prev();//获取id为myDiv的元素的上一个同辈元素
var$sSibl=$(“#myDiv”).siblings();//获取id为myDiv的元素的所有同辈元素
var$pClos=$(“#myDiv”).closest(“span”);//获取id为myDiv的元素本身开始,最接近的span元素(向上查找)
CSS-DOM操作
$(“#myDiv”).css(“color”);//获取id为myDiv的元素的color样式的值
$(“#myDiv”).css(“color”,“blue”);//设置id为myDiv的元素的color样式的值
$(“#myDiv”).css({“color”:
”blue”,“fontSize”:
”12px”});//设置id为myDiv的元素的color样式的值(多个)
$(“#myDiv”).css(“opacity”,“0.5″);//设置id为myDiv的元素的透明度(兼容浏览器)
$(“#myDiv”).css(“height”);//获取id为myDiv的元素的高度(单位:
px,兼容浏览器)
$(“#myDiv”).height();//同上(实际高度)
$(“#myDiv”).css(“width”);//获取id为myDiv的元素的宽度(单位:
px,兼容浏览器)
$(“#myDiv”).width();//同上(实际宽度)
varoffset=$(“#myDiv”).offset();//获取id为myDiv的元素在当前窗口的相对偏移量
alert(offset.top+“|”+offset.left);
varoffset=$(“#myDiv”).position();//获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
alert(offset.top+“|”+offset.left);
$(“#txtArea”).scrollTop();//获取id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft();//获取id为txtArea的元素滚动条距离左侧的距离
$(“#txtArea”).scrollTop(100);//设置id为txtArea的元素滚动条距离顶端的距离
$(“#txtArea”).scrollLeft(100);//设置id为txtArea的元素滚动条距离左侧的距离
第四章JQuery中的事件和动画
加载DOM
$(window).load()等价于window.onload事件
$(document).ready()相当于window.onload事件,但有些区别:
(1)执行时机:
window.onload是在网页中所有元素(包括元素的所有关联文件)完全加载后才执行
$(document).ready()是在DOM完全就绪时就可以被调用,此时,并不意味着这些元素关系的文件都已经下载完毕
(2)多次使用:
可以在同一个页面注册多个$(document).ready()事件
(3)简写方式:
可以缩写成$(function(){}) 或 $().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元素
合并事件
hover(enter,leave):
鼠标移入执行enter、移出事件执行leave
$(“#myDiv”).hover(function(){
$(this).css(“border
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 神奇 JQuery 学习 基础 笔记