=======================
第一天
======================
1、jQuery介绍
jQuery是一个js框架(.js文件),它使用选择器查找
要操作的节点，并且将查找到的节点封装成一个jQuery
对象，然后调用jQuery对象的属性或者方法来实现对底层
节点的操作。这样做的目的是：解决浏览器的兼容性问题，
另外，代码会得到简化。
2、一个简单的例子
jQuery编程的步骤:
第一步，使用选择器找到要操作的dom对象,
该dom对象会被封装成jQuery对象。
第二步，通过调用jQuery对象的方法或者
属性来操作底层被封装的dom对象。
例子:
function f1(){
//第一步，使用选择器找到要操作的dom对象,
//该dom对象会被封装成jQuery对象。
//变量以$开头只是一个编程习惯
var $obj = $('#d1');
//第二步，通过调用jQuery对象的方法或者
//属性来操作底层被封装的dom对象。
//$obj.html('hello java');
$obj.css('font-size','60px').css('color','red');
}
3、dom对象与jQuery对象之间的转换
(1)dom对象 --- > jQuery对象 $(dom对象)
例子:
function f2(){
var obj = document.getElementById('d1');
//将dom对象转换成jQuery对象
var $obj = $(obj);
$obj.html('hello java');
}
(2)jQuery对象 ---> dom对象 $obj.get(0)或者 $obj.get()[0]
例子:
function f3(){
var $obj = $('#d1');
//jQuery对象 ---> dom对象
//var obj = $obj.get(0);
var obj = $obj.get()[0];
obj.innerHTML = 'hello java';
}
4、同时使用prototype和jQuery
使用 jQuery.noConflict()将 $函数改名。
例子:
function f2(){
//将jQuery的$函数改一个名 $a
var $a = jQuery.noConflict();
//var obj = $('d1');
//obj.innerHTML = 'hello java';
$a('#d1').html('hello java');
}
5、jQuery选择器
(1)什么是jQuery选择器
借鉴了css选择器的语法，作用是查找要操作的节点(dom对象)。
(2)选择器的使用
1)基本选择器 selector/s1.html
#id -------- id选择器
.class -------- 类选择器
element ------- html元素选择器
selector1,select2..selectn------分组选择器
* -------- 全部的选择器
例子:
function f1(){
//$(选择器):如果返回的是多个dom节点,
//仍然封装成一个jQuery对象。
var $obj = $('.s1');
$obj.css('font-size','60px');
}
function f2(){
$('div').css('font-size','60px');
}
function f3(){
$('#d1,p').css('font-size','60px');
}
function f4(){
$('*').css('font-size','60px');
}
2)层次选择器 selector/s2.html
select1 select2 ---- 所有的子节点和孙子节点，是select2的节点(常用)
select1>select2 ---子节点，是select2的节点
select1+select2 ---下一个兄弟节点(紧临的)，是select2的节点
select1~select2 ---下面的兄弟节点(可以不是紧临的)，是select2的节点
例子: function f1(){
$('#d0 div').css('font-size','60px');
}
function f2(){
$('#d0>div').css('background-color','green');
}
function f3(){
$('#d2+p').css('font-size','60px');
}
function f4(){
$('#d1~div').css('font-size','60px');
}
3)过滤选择器
a,基本过滤选择器 selector /s3.html
:first 第一个
:last 最后一个
:not(selector) not(选择器)把这个排除在外
:even 第偶数个
:odd 第奇数个
:eq(index) 等于index(index从0开始)(把所有的都一起排序)
:gt(index) 大于index(index从0开始)
:lt(index) 小于index(index从0开始)
例子： function f1(){
$('#t1 tr:first').css('background-color',
'#cccccc');
}
function f2(){
$('thead tr').css('background-color','#cccccc');
$('tbody tr:even').css('background-color','#fff8dc');
$('tbody tr:odd').css('background-color','yellow');
}
function f3(){
$('tbody tr:eq(1)').css('background-color','yellow');
}
function f4(){
$('tbody tr:not(#l2)').css('background-color','yellow');
}
b,内容过滤选择器 selector/ s4.html
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素(为空的)
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素(不为空的)
例子:
function f1(){
$('div:contains(吃饭)').css('font-size',
'60px');
}
function f2(){
$('div:empty').html('一会就会吃');
}
function f3(){
$('div:has(span)').css('color','red');
}
function f4(){
$('div:parent').css('font-size','60px');
}
c,可见性过滤选择器 selector/s5.html
:hidden 匹配所有不可见元素style="display:none;"，或者type为hidden的元素
:visible 匹配所有的可见元素
例子:
function f1(){
//$('div:hidden').css('display','block');
$('div:hidden').show('slow');
}
function f2(){
//$('div:visible').css('display','none');
$('div:visible').hide('slow');
}
d,属性过滤选择器 selector / s6.html
[attribute] 找到具有这个属性的节点
[attribute=value] 找到具有这个属性属性等于这个值的节点
[attribute!=value] 找到具有这个属性属性不等于这个值的节点
例子:
function f1(){
//具有id属性的节点
$('div[id]').css('font-size','60px');
}
function f2(){
//具有id属性的节点
$('div[id=d2]').css('font-size','60px');
}
function f3(){
//具有id属性的节点
$('div[id!=d2]').css('font-size','60px');
}
e,子元素过滤选择器 selector / s7.html
index下标从1开始
:nth-child(index/even/odd) 下标从1开始，每一个分别处理
例子:
function f1(){
//$('ul li:eq(1)').css('font-size','60px');
$('ul li:nth-child(2)').css('font-size','60px');
}
f,表单对象属性过滤选择器 selector / s8.html
:enabled 没有被禁止的
:disabled 选择被禁止输入的表单选项
:checked 单选,多选的属性之一,表示被选中的
:selected 下拉列表的属性,被选中的
例子:
function f1(){
$('#form1 input:disabled')
.css('border','1px dotted red');
}
function f2(){
$('#form1 input:enabled')
.css('border','1px dotted red');
}
function f3(){
// val()方法相当于value属性
var v1 = $('#form2 input:checked').val();
alert(v1);
}
function f4(){
var v1 = $('#form3 select option:selected').val();
alert(v1);
}
4)表单选择器
:input 所有的表单项
:text 文本框
:pasword 密码框
:radio 单选
:checkbox 多选
:submit 提交按钮
:image
:reset
:button
:file
:hidden
6、dom操作
1)查询 dom / d1.html
通过选择器，找到某个节点之后，可以查询
节点的html内容、文本内容、值以及属性。
html():html内容 相当于innerHTML属性
text():文本内容 相当于innerText属性
val():值 相当于value属性
attr(属性名):读取某个属性的值
除此之外，这四个方法还可以设置对应的值。
2)创建 dom / d2.html
$(html内容);
3)插入节点
append():向每个匹配的元素内部追加内容
prepend():向每个匹配的元素内部前置内容
after():在每个匹配的元素之后插入内容
before():在每个匹配的元素之前插入内容
4)删除节点 dom / d3.html
remove():删除
remove(selector)
empty():清空节点
5)如何将js代码与html分开 dom/d4.html,d5.html
6)复制节点 dom / d6.html
clone()
clone(true):使复制的节点也具有行为(将事件
处理代码一块复制)
7)属性操作
读取：attr('');
设置： attr('','') 或者一次
设置多个 attr({"":"","":""});
比如 $obj.attr({'id':'d1','class':'s1'});
删除：removeAttr('')
8)样式操作 dom / d7.html
获取和设置: attr("class","")或者attr('style':'');
追加:addClass('')
移除:removeClass('')
或者removeClass('s1 s2')
或者removeClass()//会删除所有样式
切换样式：toggleClass,有该样式，就删除，没有，
就添加。
是否有某个样式 hasClass('')
读取css('')
设置css('','')或者
css({'':'','':''})//设置多个样式
9)遍历节点
children():只考虑子元素，不考虑其它后代元素。
next():
prev():
siblings():
find(expr):
children()/children(selector):只考虑子元素，
不考虑其它后代元素。
next()/next(selector):下一个兄弟
prev()/prev(selector):上一个兄弟
siblings()/siblings(selector):其它兄弟
find(selector):从当前节点开始查找所有的后代(满足selector)
parent():父节点
===========================
第二天
===========================
一、事件处理
1、事件绑订 event / e1.html
bind(type,fn)
2、绑订方式的简写形式
click(function(){
});
3、合成事件 event/ e2.html e3.html
hover(enter,leave) : 模拟光标悬停事件
toggle(fn1,fn2...)：模拟鼠标连续单击事件
4、事件冒泡 even / e4.html, e5.html
(1)什么是事件冒泡:
子节点产生的事件会依次向上抛给父节点
(2)获得事件对象 event / e6.html
只需要给事件处理函数添加一个任意变量即可，比如e。
e不是真正的事件对象，而是对底层的事件对象的一个封装。
click(function(e){
});
(3)停止冒泡 event / e7.html
event.stopPropagation()
(4)停止默认行为 event / e8.html
event.preventDefault()
5、事件对象的属性 event / e9.html
event.type: 事件类型
event.target:返回事件源（是dom对象!!!）
event.pageX/pageY : 点击坐标
6、模拟操作 event / e10.html
二、动画
1、show() /hide(): animate / a1.html
作用:通过同时改变元素的宽度和高度来实现显示和隐藏
用法:
show(速度,[回调函数]);
速度可以使用"normal","fast","slow"，也可以使用
毫秒数。回调函数会在整个动画执行完毕之后执行。
2、slideUp() slideDown() animate / a1.html
作用：通过改变元素的高度来实现显示和隐藏
用法同上。
3、fadeIn() fadeOut() animate / a2.html
作用：通过改变元素的不透明度来实现显示和隐藏
用法同上。
4、自定义动画
animate(params,speed,[callback]) animate /a3.html
params: 是一个javascript对象，描述的是动画执行
结束时的样式。
speed:速度，单位是毫秒。
callback:回调函数，会在动画执行完毕之后执行。
三、类数组的操作
类数组：指的是jQuery选择器会将查找到的所有的dom
对象封装成一个jQuery对象，将这些dom对象称为类数组。
1)length属性：获得jQuery对象包含的dom对象的个数。
2)each(fn(i)): array / a1.html
循环遍历每一个元素,this代表被迭代的dom对象，
$(this)代表被迭代的jquery对象。
3)eq(index)：返回index+1位置处的jquery对象
4)index(obj)：返回下标，其中obj可以是dom对象或者jquery对象。
5)get()：返回dom对象组成的数组
6)get(index)：返回index+1个dom对象。
======================
第三天
=============
jquery对ajax的支持
1、三个方法
(1)load方法
作用：将服务器返回的数据直接添加到符合要求的
dom对象上，相当于 obj.innerHTML = 服务器返回的数据。
用法:
$obj.load(url,[请求参数]);
url:请求地址
请求参数:
第一种形式：请求字符串，比如: 'username=zs&age=22'
第二种形式：对象,比如 {'username':'zs','age':22}
注意：
a, load方法如果没有参数，会使用get方式发请求。
如果有参数，会使用post方式发请求。
b, 如果有中文参数值，load方法已经帮我们做了编码处理。
(2)$.get方法
作用：向服务器发送get请求
用法:
$.get(url,[data],[callback],[type]):
url:请求地址
data:请求参数，形式同上。
callback:回调函数，可以通过该函数来处理服务器返回的数据。
callback格式：
function(data,statusText)，其中，data
可以获得服务器返回的数据,statusText是一个
简单的字符串，描述服务器处理的状态。
type: 服务器返回的数据类型，类型可以是:
html : 返回的是html内容。
text: 返回的是text。
json: 返回的是json字符串
xml: 返回的是dom兼容的xml对象
script:返回的javascript
$.post()格式同上。
练习：使用$.get或者$.post方法完成“商品热卖”。
(3)$.ajax(options):
options是一个形如
{key1:value1,key2,value2...}的js对象，
用于指定发送请求的选项。
选项参数如下：
url(string):请求地址
type(string):GET/POST
data(object/string):发送到服务器的数据
dataType(string) :预期服务器返回的数据类型
success(function):请求成功后调用的回调函数，有两个参数：
function(data,textStatus),其中，
data是服务器返回的数据,
textStatus 描述状态的字符串。
error(function):请求失败时调用的函数，有三个参数
function(xhr,textStatus,errorThrown),其
中xhr是底层的ajax对象(XMLHttpRequest),
textStatus,errorThrown这两个参数其中的
一个可以获得底层的异常描述。
async:true(缺省)/false: 当值为false时，发送同步请求。
2、两个辅助性的方法
1)serialize():
将jquery对象包含的表单或者表单控件
转换成查询字符串。
2)serializeArray()：
转换为一个数组，每个数组元素形如{name:fieldName,value:fieldVal}的对象。
序列化元素的作用，主要是用于ajax请求中，给data赋值。
=======================================================
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
