jQuery复习
/*
jQuery对象和DOM对象
DOM对象
jQuery对象:就是通过jQuery包装DOM对象后产生的结果
jQuery对象时jQuery独有的,如果一个对象时jQuery对象,那么就可以使用jQuery里的方法
$("#foo").html()//获取id为foo的元素内的html代码,.html()是jQuery的方法
等同于document.getElementById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法,同理在DOM对象中也不能使用jQuery对象的任何方法
jQuery和DOM对象的相互转化
如果想获取的对象时jQuery对象,那么在变量前面加上$例如;
var $variable=jQuery对象
如果想获取的是DOM对象
var variable=DOM对象
1.jQuery对象转变成DOM对象
jQuery对象提供了两个方法将jQuery对象转化成DOM对象,即[index]和get(index)
(1)jQuery对象是一个类似与数组的对象,可以通过[index]的方法得到相应的DOM对象
var $cr=$("#cr"); //jQuery对象
var cr=$cr[0]; //DOM对象
alert(cr.checked); //检测这个checkbox是否被选中
*/
2.另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var $cr=$("#cr");
var cr=$cr.get(0);
alert(cr.checked);
DOM对象转化为jQuery对象
对一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方法为$(DOM对象)
var cr=document.getElementById("cr");
var $cr=$(cr);
实例研究:
<input type="checkbox" id="cr"/><label for="cr">我应经阅读了上面制度</label>
1. $(document).ready(function(){//等待DOM元素加载完毕
//jQuery对象
var $cr=$("#cr");
var cr=$cr[0];
$cr.click(function(){
if(cr.checked){//DOM 方式操作
alert("感谢你的支持!");
}
})
})
2. $(document).ready(function(){
var $cr=$("#cr");
$cr.click(function(){
if("$cr.is(":checked")"){//jQuery方法判断
alert("感谢你的支持!");
}
})
})
/*
jQuery选择器
jQuery选择器继承了CSS风格,利用jQuery选择器,可以非常方便,快捷的找出特定的DOM元素,然后为他们添加
相应的行为,而无需担心浏览器是否支持这一选择器
传统的javascript方法获取页面中的元素
<p>测试1</p>
<p>测试2</p>
var items=document.getElementsTagName("p");//获取网页中的所有p元素
for(var i=0;i<items.length;i++){
items[i].οnclick=function(){
//doing something
}
}
1.基本选择器
基本选择器是最常用的选择器,通过id,class和标签名来查找DOM元素,在网页中,每个id名称只能使用一次,class允许重复使用
------选择器---------------------描述-------------------------返回----------------------------示例------------------------------
#id 根据一个给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配一个元素 集合元素 $(".test")选取class为test的元素
element 更加给定的元素名匹配元素 集合元素 $("p")选取标签为p的元素
* 匹配所有元素 集合元素 $("*")选取所有的元素
selector1,selector2 将每一个选择器匹配到的元素 集合元素 $("div,span,.test")选取div,span,.test的元素
合并后一起返回
-----------------------------------------------------------------------------------------------------------------------------------
2.层次选择器
如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素,和同辈元素
-------选择器------------------------描述-----------------------------------返回-----------------示例---------------------------------------
$("ancestor descendant") 选取ancestor元素里的所有descendant(后代) 集合元素 $("div span")选取div里所有的span元素
$("parent > child") 选取parent元素下的child(子)元素 集合元素 $("div > span")选取div里的span子元素
$("prev + next") 选取prev元素后的next元素 集合元素 $(".one + div")选取class为one的下一个<div>的同辈元素
$("prev ~ siblings") 选取prev元素后的所有siblings元素 集合元素 $("#two~div")选取id为two元素后面的所有<div>同辈元素
----------------------------------------------------------------------------------------------------------------------------------------------
3.过滤选择器
4.表单选择器
*/
/*
jQuery中的DOM操作
一般来说,DOM操作分为3个方面,即DOM(core)HTML-DOM和CSS-DOM
DOM core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,也适用于xml
jQuery中DOM操作
<p title="你喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="香蕉">香蕉</li>
<li title="橘子">橘子</li>
</ul>
1.查找节点
1.查找元素节点
获取元素节点并打印它的文本内容
var $li=$("ul li:eq(1)");//获取<ul>里第二个<li>节点
var li_txt=$li.text();//获取第二个li元素的文本节点
alert(li_txt);
2.查找属性节点
利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性值,
var $param=$("p"); //获取p节点
var p_txt=$param.attr("title");//获取p元素节点属性title
alert(p_txt);
2.创建节点
1.创建元素节点
(1)创建两个li节点
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
(2)将两个新元素插入文档中
$("ul").append($li_1);
$("ul").append($li_2);
2.创建文本节点
var $li_1=$("<li>香蕉</li>");
var $li_2=$("<li>雪梨</li>");
$("ul").append($li_1);
$("ul").append($li_2);
3.创建属性节点
var $li_1=$("<li title="香蕉">香蕉</li>")
var $li_2=$("<li title="雪梨">雪梨</li>");
$("ul").append($li_1);
$("ul").append($li_2);
3.插入节点
插入节点的方法
--------------------------------------------------------------------------------------------------------
----------方法-----------------------------描述-----------------------
append() 向每个匹配的元素内部追加内容
appendTo() 将所有匹配的元素追加到指定的元素中
prepend() 向每个匹配的元素内部前置内容
perpendTO() 将所有的匹配的元素前置到指定的元素中
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素插入到指定的元素后
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定的元素的前面
--------------------------------------------------------------------------------------------------------
4.删除节点
1.remove()方法
作用是从DOM中删除所有匹配的元素,传入的参数是用于根据jQuery表达式来筛选元素
$("ul li:eq(1)").remove();//获取第二个<li>元素节点后,将它从网页中删除
2.detach()方法
作用和remove()一样,也是从DOM中去掉所有匹配的元素,与remove()不同的是所有的绑定事件,附加的数据
等都会留下来
3.empty()方法
清空节点,它能清空元素中所有的后代节点
$("ul li:eq(1)").empty();//获取第二个li元素节点,清空此元素里的内容,注意是元素里
5.复制节点
6.替换节点
7.包裹节点
8.属性操作
9.样式操作
10.设置和获取HTML文本和值
11.遍历节点
12.CSS-DOM操作
*/
/*
jQuery中的事件和动画
1.jQuery中的事件
加载DOM
事件绑定
合成事件
事件冒泡
事件对象的属性
移除事件
模拟操作
其他用法
2.jQuery中的动画
show()方法和hide()方法
fadeIn()方法和fadeOut()方法
slideUp()方法和slideDown()方法
自定义动画方法animate()
动画的回调函数
停止动画和判断是否处于动画状态
其他动画方法
*/
/*
jQuery对表单,表格的操作以及更多的应用
表单应用
单行文本框的应用
多行文本框的应用
复选框的应用
下拉框的应用
表单验证
表格应用
表格变色
表格的展开关闭
表格内容筛选
其他应用
网页字体的大小
网页选项卡
网页换肤
*/
/*
jQuery与Ajax
*/
/*
jQuery对象和DOM对象
DOM对象
jQuery对象:就是通过jQuery包装DOM对象后产生的结果
jQuery对象时jQuery独有的,如果一个对象时jQuery对象,那么就可以使用jQuery里的方法
$("#foo").html()//获取id为foo的元素内的html代码,.html()是jQuery的方法
等同于document.getElementById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法,同理在DOM对象中也不能使用jQuery对象的任何方法
jQuery和DOM对象的相互转化
如果想获取的对象时jQuery对象,那么在变量前面加上$例如;
var $variable=jQuery对象
如果想获取的是DOM对象
var variable=DOM对象
1.jQuery对象转变成DOM对象
jQuery对象提供了两个方法将jQuery对象转化成DOM对象,即[index]和get(index)
(1)jQuery对象是一个类似与数组的对象,可以通过[index]的方法得到相应的DOM对象
var $cr=$("#cr"); //jQuery对象
var cr=$cr[0]; //DOM对象
alert(cr.checked); //检测这个checkbox是否被选中
*/
2.另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var $cr=$("#cr");
var cr=$cr.get(0);
alert(cr.checked);
DOM对象转化为jQuery对象
对一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方法为$(DOM对象)
var cr=document.getElementById("cr");
var $cr=$(cr);
实例研究:
<input type="checkbox" id="cr"/><label for="cr">我应经阅读了上面制度</label>
1. $(document).ready(function(){//等待DOM元素加载完毕
//jQuery对象
var $cr=$("#cr");
var cr=$cr[0];
$cr.click(function(){
if(cr.checked){//DOM 方式操作
alert("感谢你的支持!");
}
})
})
2. $(document).ready(function(){
var $cr=$("#cr");
$cr.click(function(){
if("$cr.is(":checked")"){//jQuery方法判断
alert("感谢你的支持!");
}
})
})
/*
jQuery选择器
jQuery选择器继承了CSS风格,利用jQuery选择器,可以非常方便,快捷的找出特定的DOM元素,然后为他们添加
相应的行为,而无需担心浏览器是否支持这一选择器
传统的javascript方法获取页面中的元素
<p>测试1</p>
<p>测试2</p>
var items=document.getElementsTagName("p");//获取网页中的所有p元素
for(var i=0;i<items.length;i++){
items[i].οnclick=function(){
//doing something
}
}
1.基本选择器
基本选择器是最常用的选择器,通过id,class和标签名来查找DOM元素,在网页中,每个id名称只能使用一次,class允许重复使用
------选择器---------------------描述-------------------------返回----------------------------示例------------------------------
#id 根据一个给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素
.class 根据给定的类名匹配一个元素 集合元素 $(".test")选取class为test的元素
element 更加给定的元素名匹配元素 集合元素 $("p")选取标签为p的元素
* 匹配所有元素 集合元素 $("*")选取所有的元素
selector1,selector2 将每一个选择器匹配到的元素 集合元素 $("div,span,.test")选取div,span,.test的元素
合并后一起返回
-----------------------------------------------------------------------------------------------------------------------------------
2.层次选择器
如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素,和同辈元素
-------选择器------------------------描述-----------------------------------返回-----------------示例---------------------------------------
$("ancestor descendant") 选取ancestor元素里的所有descendant(后代) 集合元素 $("div span")选取div里所有的span元素
$("parent > child") 选取parent元素下的child(子)元素 集合元素 $("div > span")选取div里的span子元素
$("prev + next") 选取prev元素后的next元素 集合元素 $(".one + div")选取class为one的下一个<div>的同辈元素
$("prev ~ siblings") 选取prev元素后的所有siblings元素 集合元素 $("#two~div")选取id为two元素后面的所有<div>同辈元素
----------------------------------------------------------------------------------------------------------------------------------------------
3.过滤选择器
4.表单选择器
*/
/*
jQuery中的DOM操作
一般来说,DOM操作分为3个方面,即DOM(core)HTML-DOM和CSS-DOM
DOM core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,也适用于xml
jQuery中DOM操作
<p title="你喜欢的水果">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="香蕉">香蕉</li>
<li title="橘子">橘子</li>
</ul>
1.查找节点
1.查找元素节点
获取元素节点并打印它的文本内容
var $li=$("ul li:eq(1)");//获取<ul>里第二个<li>节点
var li_txt=$li.text();//获取第二个li元素的文本节点
alert(li_txt);
2.查找属性节点
利用jQuery选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性值,
var $param=$("p"); //获取p节点
var p_txt=$param.attr("title");//获取p元素节点属性title
alert(p_txt);
2.创建节点
1.创建元素节点
(1)创建两个li节点
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
(2)将两个新元素插入文档中
$("ul").append($li_1);
$("ul").append($li_2);
2.创建文本节点
var $li_1=$("<li>香蕉</li>");
var $li_2=$("<li>雪梨</li>");
$("ul").append($li_1);
$("ul").append($li_2);
3.创建属性节点
var $li_1=$("<li title="香蕉">香蕉</li>")
var $li_2=$("<li title="雪梨">雪梨</li>");
$("ul").append($li_1);
$("ul").append($li_2);
3.插入节点
插入节点的方法
--------------------------------------------------------------------------------------------------------
----------方法-----------------------------描述-----------------------
append() 向每个匹配的元素内部追加内容
appendTo() 将所有匹配的元素追加到指定的元素中
prepend() 向每个匹配的元素内部前置内容
perpendTO() 将所有的匹配的元素前置到指定的元素中
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素插入到指定的元素后
before() 在每个匹配的元素之前插入内容
insertBefore() 将所有匹配的元素插入到指定的元素的前面
--------------------------------------------------------------------------------------------------------
4.删除节点
1.remove()方法
作用是从DOM中删除所有匹配的元素,传入的参数是用于根据jQuery表达式来筛选元素
$("ul li:eq(1)").remove();//获取第二个<li>元素节点后,将它从网页中删除
2.detach()方法
作用和remove()一样,也是从DOM中去掉所有匹配的元素,与remove()不同的是所有的绑定事件,附加的数据
等都会留下来
3.empty()方法
清空节点,它能清空元素中所有的后代节点
$("ul li:eq(1)").empty();//获取第二个li元素节点,清空此元素里的内容,注意是元素里
5.复制节点
6.替换节点
7.包裹节点
8.属性操作
9.样式操作
10.设置和获取HTML文本和值
11.遍历节点
12.CSS-DOM操作
*/
/*
jQuery中的事件和动画
1.jQuery中的事件
加载DOM
事件绑定
合成事件
事件冒泡
事件对象的属性
移除事件
模拟操作
其他用法
2.jQuery中的动画
show()方法和hide()方法
fadeIn()方法和fadeOut()方法
slideUp()方法和slideDown()方法
自定义动画方法animate()
动画的回调函数
停止动画和判断是否处于动画状态
其他动画方法
*/
/*
jQuery对表单,表格的操作以及更多的应用
表单应用
单行文本框的应用
多行文本框的应用
复选框的应用
下拉框的应用
表单验证
表格应用
表格变色
表格的展开关闭
表格内容筛选
其他应用
网页字体的大小
网页选项卡
网页换肤
*/
/*
jQuery与Ajax
*/