1)jquery对象和dom对象区别及相互转换
2)jquery和其他库冲突解决
3)css选择器和jquery选择器
3.1)基本选择器(id选择器、类选择器、元素选择器、*选择器、多个选择器以逗号分隔的集合选择器)
3.2)层次选择器(后代元素、子元素)。eg. $("ul li") 和 $("ul > li"),一个是所有后元素,一个是直接子元素。 $("ul").next("div") 下一个同辈 ,$("ul").nextall("div") 后面的所有同辈,slibings()所有同辈,不管前还是后。
3.3)过滤选择器
3.3.1)基本过滤选择器 :first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus
3.3.2)内容过滤选择器 :contains(text) :empty :has(selector) :parent
3.3.3)可见性过滤选择器 :hidden :vidible
3.3.4)属性过滤选择器
3.3.5)子元素过滤选择器
3.3.6)表达对象属性过滤选择器
3.4)表单选择器
选择器插件:
1)moreselectors for query
2)basic path
4)jquery中的dom操作
4.1)查找dom节点(使用选择器)
4.2)查找属性节点 var $para = $("p");
4.3)创建节点
var $li_1 = $("<li></li>");
var $li_1 = $("<li></li>");
$("ul").append($li_1);
$("ul").append($li_ 2 );
4.4)插入节点
append,appendto,prepend,prependto,after,insert after,befor,insert before
4.5)移动节点
4.6)删除节点 remove、detatch、empty
4.6)复制节点 clone
4.7)替换节点
4.8)包裹节点 wrap wrapall
4.9)属性操作 attr()获取属性,removeattr()删除属性
4.10)样式操作 $("p").attr("class","high") 设置p元素的class为high
4.11)追加样式(addclass)、移除样式(removeclass)、切换样式(toggle)、判断是否含有某个样式 .hasclass()
4.12)设置和获取html、文本和值
4.13)遍历节点 childeren(),next()pref()sibings()closet()parent()
4.14)css dom操作 读取和设置style对象的各种属性。 元素定位:offset() position()scrolltop()scrollleft()
5)jquery中事件和动画
$(document).ready(),dom就绪时就执行
$(window).load(function(){})。如果绑定在window或者元素上,则等待内容加载完毕才触发
5.1)事件绑定
bind():第一个参数事件类型、第二个参数可选,作为event.data属性值传递给事件对象的额外数据对象 第三个参数则用来绑定处理函数
$(function()){
$("#panel h5.head").bind("click",function(){
$(this).next().show();
}
}
点击“标题”连接,内容就展开
$(function()){
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if ($content.is(": vidi ble")){
$content.hide();
}else{
$(this).next().show();
}
}
}
$(function()){
$("#panel h5.head").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
}
}
可以简写绑定事件
$(function()){
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
}
}
5.2)合成事件
hover() 当光标移动到元素上时,会触发指定的第一个函数(enter),移出时触发指定的第二个函数(leave)
toggle()用于模拟鼠标连续单击事件,第一个单击触发第一个函数,第二次触发第二个,如果有更多函数,则依次触发。也可以用来控制元素的可见状态
5.3)事件冒泡
按照dom的层级
对事件的作用范围进行控制
5.4)事件对象(event),停止事件冒泡(stoppropagation)$('#content').bind("click",function(event)){
var txt = $('#msg').html()+"aaa";
$('#msg').html(txt);
event.stoppropagation();
}
5.5)阻止默认行为
网页中的元素都有自己的默认行为,例如单击链接后会跳转,单击提交按钮会表单提交。有时候需要阻止元素的默认行为。
$(funciton(){
$("#sub").bind("click",function(event){
var username = $("#username").val();
if (username==""){
$("#msg").html("<p>用户名不能为空</p>");
event.preventDefault();
}
}
}
想同时停止冒泡和阻止默认行为,可以在做了一个之后,return false
5.6)事件对象的属性
event.type获取事件类型
$("a").click(function(event){
alter(event.type);
return false;//阻止链接跳转
}
event.target 获取到触发事件的元素
event.pageX event.pageY 获取光标相对于页面的x坐标和y坐标
event.which 获取鼠标单击事件中的左、中、右键
5.7)移除事件 unbound
5.8)模拟操作
$("#btn").trigger("click")
触发自定义事件
$("#btn").bind("myclick",function(){
..
}
$("#btn").trigger("myclick");
传递数据
$("#btn").bind("myclick",function(event,message1,message2){
..
}
$("#btn").trigger("myclick",["参数1“,”参数2“]);
执行默认操作
$("input").trigger("focus"); 绑定并触发默认行为,即获取焦点
$("input").triggerHander("focus"); 仅绑定
5.9)绑定多个事件
$(function(){
$("div").bind("mouseover mouseout",function(){}
}
5.10)添加事件命名空间,便于管理,相同事件名称,不同命名空间执行方法
5.11)jquery 中的动画
show()和 hide()方法 改变元素高度宽度不透明度
$("element").hide() 等价于 $("element").css("display","none");
$("element").show("slow");
$("element").show(1000);
adein()降低元素不透明度
fadeout()
slideup() slidedown() 改变元素的高度
animate(params,speed,callback)自定义动画方法,第一个参数:一个包含样式属性及值的映射 第二个参数:速度参数,可选 第三个参数:在动画完成时的函数,可选
动画------------------待续-----------------
6)ajax
不需要插件支持、优秀的用户体验(不用刷新页面)、提高web性能(按须发送,无需整个表单)、减轻服务器和带宽的负担
$.ajax():最底层的方法
load、$.get()、$.post() :第二层
$.getscript() 、$.getjson() 第三层
6.1)load(url,[.data],[.callback]) 载入远程html代码并插入dom中,第二个参数为发送至服务器的key/value数据
1)载入html文档
<input type="button" id="send" value="ajax get"/>
<div class="comment">已有评论</div>
<div id="resText"></div>
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
}
}
通过单击id为send的按钮来调用load()方法,然后将html的内容加载到id为restext的元素里
2)筛选载入的html文档
$("#resText").load("test.html .para");只需加载test.html页面中class为para的内容
3)传递方式
load()方法的传递方式根据参数data来自动指定,如果没有传递参数,则采用get方式传递,反之,则会自动转换为post方式
4)回调参数
$("#resText").load("test.html",function(responsetext,textstatus,xmlhttprequest)
请求返回的内容
请求状态 success、error、timeout、not modified
xmlhttprequest对象
load方法通常用来从web服务器上获取静态的数据文件
$.get()和$.post()方法是jquery中的全局函数,而在此之前讲的jquery方法都是对jquery对象操作的。