一、jQuery
1.使用jQuery
页面框架下载完毕后执行——$(document).ready(function(){})
页面框架下载完毕后执行——$(function(){})
控制页面CSS——addClass()
页面样式的动态切换——toggleClass()
链接式书写
$(function(){
$(".content").html("Hello world! Welcome to jQuery world").hide();
$(".title").click(function(){
$(this).addClass("curcol")
.next(".content").css("display","block").show();
});
});
JQuery选择器
页面中为某个元素添加属性或事件时，必须准确找到该元素——jQuery选择器
通过标签名、属性名或内容对DOM元素进行定位——jQuery选择器
基本选择器
根据ID匹配一个元素——#id
根据给定的元素名匹配所有元素——element
根据给定的类匹配元素——.class
匹配所有元素——*
将每一个选择器匹配到的元素合并后一起返回——selector,selectorN
$(function(){
$("#divOne").css("display","block");
})
$(function(){
$("div span").css("display","block");
})
$(function(){
$(".clsFrame").css("dispay","block");
})
$(function(){
$("*").css("display","block");
})
$(function(){
$("#divOne,span").css("display","block");
})
层次选择器
根据祖先元素匹配所有后代元素——ancestor descendant
根据父元素匹配所有的子元素——parent>child
匹配所有紧接在prev元素后的相邻元素——prev+next | .next()
匹配prev元素之后的所有兄弟元素——prev~sibilings | nextAll()
获取标记后面全部相邻元素——sibilings()
过滤选择器
简单过滤选择器
获取第一个元素——：first | first()
获取最后一个元素——：last ｜ last()
获取除给定选择器外的所有元素——：not(selector)
获取所有索引值为偶数的元素，索引值从0开始——：even
获取所有索引值为奇数的元素，索引值从0开始——：odd
获取指定索引值的元素，索引值从0开始——：eq(index)
获取所有大于索引值的元素，索引值从0开始——：gt(index)
获取所有小于索引值的元素，索引值从0开始——：lt(index)
获取所有标题类型的元素——：header
获取正在执行动画效果的元素——：animated
内容过选择器
获取包含给定文本的元素——：contains(text)
获取所有不包含子元素或者文本的空元素——：empty
获取含有选择器所匹配的元素——：has(selector)
获取含有子元素或者文本的元素——：parent
可见性过滤选择器
获取所有不可见元素——：hidden
获取所有的可见元素——：visible
属性过滤选择器
获取包含给定属性的元素——[attribute]
获取等于给定的属性是某个特定值的元素——[attribute=value]
获取不等于给定的属性是某个特定值的元素——[attribute！=value]
获取给定的属性是以某些值开始的元素——[attribute^=value]
获取给定的属性是以某些值结尾的元素——[attribute$=value]
获取给定的属性是以包含某些值的元素——[attribute*=value]
获取满足多个条件的复合属性的元素——[selector1][selector2][selectorN]
子元素过滤选择器
获取每个父元素下的特定位置元素，索引号从1开始——：nth-child(eq | e ven | odd | index)
获取每个父元素下的第一个子元素——：first-child
获取每个父元素下的最后一个子元素——：last-child
获取每个父元素下的仅有一个子元素——：only-child
表单对象属性过滤选择器
获取表单中所有属性为可用的元素——：enabled
获取表单中所有属性为不可用的元素——：disabled
获取表单中所有被选中的元素——：checked
获取表单中所有被先中option的元素——：selected
表单选择器
获取所有input、textarea、select——：input
获取所有单行文本框——：text
获取所有密码框——：password
获取所有单选按钮——：radio
获取所有复选框——：checkbox
获取所有提交按钮——：submit
获取所有图像域——：image
获取所有重置按钮——：reset
获取所有按钮——：button
获取所有文件域——：file
2.访问和操作DOM元素
DOM为文档提供了一种结构表示方法，通过该方法可以改变文档的内容和展示形式。
Document——文档
Object——对象
Model——模型
元素属性操作
获取元素的属性——attr(name)
设置元素的属性——attr(key,value)
设置元素的属性——attr(key,function(index))
删险元素的属性——removeAttr(name)
获取和设置元素的属性
获取元素的HTML内容——html()
设置元素的HTML内容——html(val)
获取元素的文本内容——text()
设置元素的文本内容——text(val)
获取元素的值——val()
设置元素的值——val(val)
获取select标记中的多个先项值——val().join(“,”)
元素样式操作
直接设置css样式——css(name,value)
增加元素css类别——addClass(class)
切换元素的css类别——toggleClass(class)
删除元素css类别——removeClass(class)
注：为了更好的设置样式，在增加新的样式addClass()前，应通过removeClass()方法，删除已加载过的页面样式
3.页面元素操作
创建页面元素
创建页面元素——$(html)
内部插入节点
向所选择的元素内部插入内容——append(content) | append(function(index,html))
将所选择的元素追加到另一个指定的元素集合中——appendTo(content)
向每个所选择的元素内部前置内容——prepend(content) | prepend(function(index,html))
将所选择的元素前置到另一个指定的元素集合中——prependTo(content)
$(function(){
$("div").append(retHTML);
function retHTML(){
var str="<b>write less do more</b>";
return str;
}
$("img").appendTo($("span"));
})
外部插入节点
向所选择的元素外部后面插入节点——after(cotent) | after(function)
向所选择的元素外部前面插入节点——before(content) | before(function)
将所选择的元素插入另一个指定的元素外部后面——insertAfter(content)
将所选择的元素插入另一个指定的元素外部前面——insertbefore(content)
复制元素节点
复制节点元素——clone()
复制节点元素前将该元素的全部节点行为也进行复制——clone(true)
替换元素节点
将所有选择的元素替换成指定的HTML或DOM元素——replaceWith(content)
将所有选择的元素替换成指指定selector的元素——replaceAll(selector)
包裹元素节点
将所选择的元素用其他字符串代码包裹——wrap(html)
将所选择的元素用其他DOM元素包裹——wrap(elem)
将所选择的元素用函数包裹——wrap(fn)
移除所选元素的父元素或包裹标记——unwrap()
将所选择的元素的子内容用其他字符串代码包裹——wrapInner(html)
将所选择的元素的子内容用其他DOM元素包裹——wrapInner(elem)
将所选择的元素的子内容用函数包裹——wrapInner(fn)
注：wrap(html)用于包裹外部元素，wrapInner(html)用于包裹元素内部字符串
遍历元素
元素的遍历——each(callback)
删除页面元素
清空合部的节点或节点所包括的所有后代元素——empty()
删除页面元素——remove() | remove(expr)
4.对页面事件的处理
当用户浏览页面时，浏览器会对页面代码进行解释或编绎——这个过程实质上是通过事件驱动的，即页面在加载时，执行一个load事件，在这个事件中实现浏览器编译页面代码的过程
事件机制
页面加载事件——load()
事件捕获现象
事件冒泡现象
阻止事件冒泡——stopPropagation()
$(function(){
var intI=0;
$("body,div,#btnShow").click(function(){
intI++;
$(".clsShow")
.show()
.html("hello world")
.append("<div>执行次数<>"+intI+"</b></div>");
event.stopPropagation();
})
})
页面载入事件——ready()
绑定事件
为每个选择元素的事件绑定处理函数——bind()
语法：bind(type,[data],fn)
参数data是作为event.data属性值传递给事件对象的额外数据对象
事件类型——type
单击事件——click
双击事件——dbclick
鼠标——mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
焦点事件——focus
加载事件——load
事件blur
事件resize
事件scroll
事件unload
事件change
事件select
事件submit
事件keydown、keypress、keyup
事件error
$(function(){
$(".txt").bind({
focus:function(){
$("#divTip")
.show()
.html("执行的是focus事件");
},
change:function(){
$("#divTip")
.show()
.html("执行的是change事件");
}
})
})
切换事件
使元素在鼠标悬停与鼠标移出的事件中进行切换——hover()
语法：hover(over,out)
$(function(){
$(".clsTitle").hover(function(){
$(".clsContent").show();
},function(){
$(".clsContent").hide();
})
})
每次单击后依次调用函数——toggle()
语法：toggle(fn,fn2,[fn3,fn4…])
$(function(){
$("img").attr("src","Image/Flint01.jpg");
$("img").attr("title",this.src);
},function(){
$("img").attr("src","Image/Flint02.jpg");
$("img").attr("title",this.src);
},function(){
$("img").attr("src","Image/Flint03.jpg");
$("img").attr("title",this.src);
})
移除事件
移除元素绑定的事件——unbind()
语法：unbind(type,fn)
其他事件
为所选的元素绑定一个仅触发一次的处理函数——one()
语法：one(type,[data],fn)
在所选择的元素中触发指定类型的事件——trigger()
语法：trigger(type,[data])
$(function(){
var oTxt=$("input");
oTxt.trigger("select");
oTxt.bind("btn_Click",function(){
var txt=$(this).val();
$("#divTip").html(txt);
})
oTxt.trigger("btn_Click");
})
5.动画与特效
显示与隐藏——切换元素显示状态
显示示元素内容——show()
语法：show(speed,[callback])
隐藏元素内容——hide()
语法：hide(speed,[callback])
切换元素可见状态——toggle()
语法：toggle(speed,[callback])
$(function(){
$("a").click(function(){
$("img").show(3000,function(){
$(this).css("border","solid 1px #ccc");
})
})
$("img").click(function(){
$(this).hide(3000);
})
$("#clsimg").click(function(){
$("img").toggle(3000,function(){
$(this).css({
"border":"solid 1px #ccc",
"padding":"2px"
});
})
})
})
滑动——切换元素高度
以动画的效果将所选择的元素的高度向下增大——slideDown()
语法：slideDown(speed,[callback])
以动画的效果将所选择的元素的高度向上减小——slideUp()
语法：slideUp(speed,[callback])
以动画的效果切换元素的高度——slideToggle()
语法：slideToggle(speed,[callback])
淡入淡出——渐渐变换元素背景色来改变元素显示状态
改变所选元素透明度，实现淡入——fadeIn()
语法：fadeIn(speed,[callback])
改变所选元素透明度，实现淡出——fadeout()
语法：fadeOut(speed,[callback])
将元素的透明度指定到某一个值——fadeTo()
语法：fadeTo(speed,opacity,[callback])
$(function(){
$img=$("img");
$tip=$(".divTip");
$("input:eq(0)").click(function(){
$tip.html("");
$img.fadeIn(3000,function(){
$tip.html("淡入成功")；
})
})
$("input:eq(1)").click(function(){
$tip.html("");
$img.fadeOut(3000,function(){
$tip.html("淡出成功")；
})
})
})
自定义动画
基本动画效果
自定义动画——animate()
语法：animate(params,[duration],[easing],[callback])
用于制作动画效果的属性样式和值的集合——parmas
控制动画速度——duration
控制动画的表现效果——easing
$(function(){
$(".divFrame").click(function(){
$(this).animate({
width:"20%",
height:"70px"
},3000,function(){
$(this).css({
"border":"solid 3px #666"
}).html("变大了");
})
})
})
移动动画的位置
$(function(){
$("p").animate({
left:"20px",
top:"70px"
},3000)
})
队列中的动画
$(function(){
$("div").click(function(){
$(this)
.animate({height:100},"slow")
.animate({width:100},"slow")
.animate({height:50},"slow")
.animate({width:500},"slow")
})
})
动画停止与延时
动画停止——stop()
动画延迟——delay()
$(function(){
$("a:eq(0)").click(function(){
$("img").slideToggle(3000);
})
$("a:eq(1)").click(function(){
$("img").stop();
})
$("a:eq(2)").click(function(){
$("img").delay(2000).slideToggle(3000);
})
})
6.Ajax在jQuery中的应用
加载异数数据
回载异步数据——load()
Ajax是通过XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作。
获取异步数据——load()
语法：load(url,[data],[callback])
参数[data]——表示发送服务器的数据，格式：key/value
参数callback——表示加载成功后，返回至回载页的回调函数
$(function(){
$("#Button1").click(function(){
$("#divTip").load("b.html");
})
})
调用JSON格式的数据
调用JSON格式的数据——getJSON()
语法：$.getJSON(url,[data],[callback])
$(function(){
$("#Button1").click(function(){
$.getJSON("package.json",function(data){
$("#divTip").empty();
var strHTML="";
$.each(data,function(){
strHTML+="name"+info["name"]+"<br>";
strHTML+="sex"+info["sex"]+"<br>";
strHTML+="email"+info["email"]+"<br>";
})
$("#divTip").html(strHTML);
})
})
})
调用JS格式的数据——getScript()
语法：$.getScript(url,[callback])
$(function(){
$("#Button1").click(function(){
$.getScript("a.js");
})
})
异步加载XML文档
异步加载XML文档——get()
语法：$.get(url,[data],[callback],[type])
请求服务器数据
请求数据——$.get()
$(function(){
$("#Button1").click(function(){
$.get("package.aspx",{name:encodeURI($("#txtName").val())},
function(data){
$("#divTip").empty().html(data);
})
})
})
请求数据——$.post()
$(function(){
$("#Button1").click(function(){
$.post("package.aspx",{name:encodeURI($("#txtName").val())},
function(data){
$("#divTip").empty().html(data);
})
})
})
$.get()和$.post()向服务器传递参数时，其中的参数是通过名称属性逐个搜索输入字段的方式进行传输的。
序列化表单——serialize()
将所选择的DOM元素转换成能随Ajax传递的字符串——serialize()
$(function(){
$("#Button1").click(function(){
$.post("package.aspx",$("#frmUserInfo").serialize(),
function(data){
$("#divTip").empty().html(data);
})
})
})
$.ajax()方法
在jQuery中，$.ajax是最底层的方法，也是功能最强的方法。
语法：$.ajax([options])
发送请求的地址——url
数据请求方式——type
发送到服务器的数据——datatype
——beforeSend
请求完成后调用的回调函数——complete
请求成功后调用的回调函数——success
请求错误后调用的回调函数——error
请求超时——timeout
——global
设置全局性的Ajax默认选项——$.ajaxSetup
——async
——cache
$(function(){
$.ajax({
url:"login.html",
dataType:"html",
success:function(HTML){
$("#frmUserLogin").html(HTML);
$("#fbtnLogin").click(function(){
var strTxtName=encodeURI($("#txtName").val());
var strTxtPass=encodeURI($("#txtpass").val());
$.ajax({
url:"login.aspx",
dataType:"html",
data:{
txtName:strTxtName,
txtPass:strTxtPass},
success:function(strValue){
if(strValue=="True"){
$(".clsShow").html("操作提示，登录成功");
}
else{
$("#divError").show().html("用户名或密码错误");
}
}
})
})
}
})
})
设置全局性的Ajax默认选项——$.ajaxSetup
$(function(){
$.ajaxSetup({
type:"GET",
url:"UserInfo.xml",
dataType:"xml"
})
$("#Button1").click(function(){
$.ajax({
success:function(data){
ShowData(data,"姓名","name");
}
})
})
$("#Button2").click(function(){
$.ajax({
success:function(data){
ShowData(data,"性别","sex");
}
})
})
$("#Button3").click(function(){
$.ajax({
success:function(data){
ShowData(data,"邮箱","email");
}
})
})
function ShowData(d,n,v){
$("#divTip").empty();
var strHTML="";
$(d).find("User").eahc(function(){
var $strUser=$(this);
strHTML+=n+":"+$strUser.find(v).text()+"<hr>";
})
$("#divTip").html(strHTML);
}
})
Ajax中的全局事件
请求完成时执行函数——ajaxComplete()
请求发生错误时执行函数——ajaxError()
请求发送前执行函数——ajaxSend()
请求开始时执行函数——ajaxS()
请求结束时执行函数——ajaxStop()
请求成功时执行函数——ajaxSuccess()
$(function(){
$("#divMsg").ajaxStart(function(){
$(this).show();
})
$("#divMsg").ajaxStop(function(){
$(this).html("已成功获取数据").hide();
})
$("#Button1").click(function(){
$.ajax({
type: "GET",
url:"getData.aspx",
data:{
txtData:encodeURI($("#txtData").va())
},
datatype:"html",
success:function(data){
$("#divTip").html(decodeURI(data));
}
})
})
})
JQuery中调用JSON数据
调用JSON数据
——$.getJSON()
JSON结构
——name/value格式
{
"name": "John",
"sex":"man"
"email":"John@163.com"
}
——数组形式（只需将多个带花括号的记录通过括号组合成一个name名称对应的值）
{
"1132":
[
{"id","102,
"name","Jhon",
"chinese","80"}
]
"1133"
[
{"id","103,
"name","Jon",
"chinese","90"
}
]
}
读取JSON数据
var objInfo={
'name':'John',
'sex':'man'
'email':'John@163.com'
};
$(function(){
$("#Button1").click(function(){
var strHtml="";
strHtml+="name"+objInfo.name+"<br>";
strHtml+="sex"+objInfo.sex+"<br>";
strHtml+="email"+objInfo.email+"<br>";
})
})
遍历JSON数据
var objData={
member:[{
grader:"一年级",
students:{
name:["刘小芳","李大明"]
}
},{
grader:"二年级",
students:{
name:["李青山","萧炎"]
}
},{
grader:"三年级",
students:{
name:["张妍","王霞"]
}
}]
};
function add_Grade(){
var objmember=objData.member;
var strHTML_0="";
$.each(objmember,function(index){
strHTML_0+='<a href="javascript"' onclick="lnk_Click('+index+')">'+objmember[index].grade+'</a>''
});
$("title").html("年级优秀学生"+strHTML_0);
};
function lnk_Click(i){
var objstudent=objData.member[i].students.name;
var strHTML_1="";
$.each(objstudent,function(index){
strHTML_1+=' '+objstudent[index];
});
$(function(){
add_Grade();
lnk_Click(0);
});
}
操作JSON数据
var strInfo={
"name":"John",
"sex":"man",
"email":"John@163.com",
"date":"564564"
};
$(function(){
var strVo="原始数据";
var strV1="变化数据";
$("#Button1").click（function(){
var strHTML="";
var objInfo=eval('('+strInfo+')');
if($(this).val()==strV1){
objInfo.date=new Date().getTime();
strHTML+="name"+objInfo.name+"<br>";
strHTML+="sex"+objInfo.sex+"<br>";
strHTML+="email"+objInfo.email+"<br>";
strHTML+="date"+objInfo.date+"<br>";
if($(this).val()==strV0){
$(this).val(strV1);
}else{
$(this).val(strV0);
}
$("#Tip").html(strHTML);
}
}
})
扫一扫
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
