一、ajax提交,如果某个变量的值填的是doc对象,jQuery不报错,也没有反应,如: {userName : $('#userName')}。正确的写法 {userName : $('#userName').val()}
1、选择器selector
1)基本选择器
#id
.class
element
selector1,selector2..selectorn
*
2)层次选择器
selector1 selector2 : 后代
selector1>selector2 : 只考虑子节点
selector1+selector2: 下一个兄弟
selector1~selector2: 下面所有的兄弟
3)过滤选择器
(1)基本过滤选择器
:first
:last
:not(selector)
:even偶数的
:odd奇数的
:eq(index)(0,1,2,3。。。)
:gt(index) index右边所有的
:lt(index) index左边所有的(自己显然不在范围内,不解释)
示例:$('table tr:eq(0~n) td:eq(0~n)').css('color','red');//某一行的某一列
(2)内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
(3)可见性过滤选择器
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素
(4)属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
(5)子元素过滤选择器
:nth-child(index/even/odd) (下标从1开始,不是0,这是个例外)
(6)表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
5)表单选择器
:input input,textarea,select,button
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
2、dom操作(核心)
1)查询:找到一个节点以后,可以通过以下四个方法来访问节点的html内容、文件内容、属性值、值。
a.html(): 访问节点的html内容
b.text():访问节点的文本内容
c.attr():访问节点的属性
d.val():访问节点的值
以上方法均可以查询或者修改相应的值。
2)创建
$(html);
3)插入节点
append():作为最后一个孩子追加
prepend():作为第一个孩子追加
after():作为下一个兄弟追加
before():作为上一个兄弟追加
4)删除节点
remove()
remove(selector)
empty():清空节点
5)将javascript代码与html代码分离
$(function(){
//当整个页面加载完毕,会执行这儿的代码。
});
6)复制节点
clone()
clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
7)属性操作
读取:attr('');
设置: attr('','') 或者一次
设置多个 attr({"":"","":""});
删除:removeAttr('')
8)样式操作
获取和设置: attr("class",""),attr("style","")
追加:addClass('')
移除:removeClass('')
或者removeClass('s1 s2')
或者removeClass()//会删除所有样式
切换样式:toggleClass,有该样式,就删除,没有,就添加。
是否有某个样式 hasClass('')
读取css('')
设置css('','')或者
css({'':'','':''})//设置多个样式
9)遍历节点
children()/children(selector)只考虑子元素,不考虑其它后代元素。
next()/next(selector)下一个兄弟
prev()/prev(selector)上一个兄弟
siblings()/siblings(selector)其它兄弟
find(selector):查找所有的后代,并且后代要满足selector的要求。
3、事件处理
1)回顾之前的事件处理知识
a.绑订事件处理代码
方式一:绑订到html标记 <input type="button" onclick="f1();"/>
方式二: 绑订到dom对象 obj.onclick=f1;
b.如何获得事件对象
给事件处理函数添加一个参数"event"
c.事件对象有什么作用
作用1:依据事件对象找到事件源
event.srcElement //ie
event.target //ff chrome
作用2:获得鼠标点击的坐标
event.clientX
event.clientY
作用3:取消冒泡
event.cancelBubble=true;
d.事件冒泡:子节点产生的事件会抛给相应的父节点。
2)在jQuery当中,如何处理事件
a.绑订事件处理代码
方式一:$obj.bind(事件类型,处理函数);如:$obj.bind('click',fn1);
方式二:$obj.click(fn1);
b. 如何获得事件对象:只需要给事件处理函数传递一个参数
$obj.click(function(e){}); // e就是事件对象(是jQuery对底层的事件对象的封装)。
c.事件对象有什么作用
作用1:依据事件对象找到事件源
//obj是一个dom对象。
var obj = e.target;
作用2:获得鼠标点击的坐标
e.pageX
e.pageY
作用3:取消冒泡
e.stopPropagation();
d.合成事件
hover(mouseenter,mouseleave): 第一个函数处理光标进入,第二个函数处理光标移出。
e.模拟操作
方式一:简写形式,比如:$obj.focus();
方式二:正式写法 $obj.trigger('focus'); $obj.trigger('click');(触发点击事件)
4、动画
1)show() hide()
a.作用:通过同时改变元素的宽度与高度来实现显示或者隐藏
b.用法:
show(时间,[callback]);
时间:单位可以是"slow","normal","fast"或者毫秒数。
callback:回调函数,当整个动画执行完毕,接下来会调用回调函数。
2)slideUp() slideDown()
a.作用:通过改变元素的高度来实现显示或者隐藏
b.用法同上。
3)fadeIn() fadeOut()
a.作用:通过改变元素的不透明度来实现显示或者隐藏。
b.用法同上。
4)自定义动画 animate(params,speed,[callback])
用法:
params: 是一个javascript对象,描述动画结束之后元素的样式。
speed:速度,单位是毫秒。
callback:回调函数,当整个动画执行完毕,接下来会调用回调函数。
5、操作类数组的方法:
1)each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象,$(this)代表被迭代的jQuery对象。i表示正在被迭代的对象的下标(从0开始)。
2)eq(index):返回index+1位置处的jQuery对象
3)index(obj):返回下标,其中obj可以是dom对象或者jQuery对象。
4)length属性:jQuery对象包含的dom对象的个数
5)get():返回dom对象组成的数组
6)get(index):返回index+1个dom对象。