jQ变成过程
1，引入jQ的js文件
2，使用选择器定位要操作的节点
调用jQ的方法进行操作
jQ对象
为了解决浏览器兼容问题而解决的提供一种统一封装后的对象描述
jq提供的方法都是jQ特有的，而且大多数返回也是jQ对象，所有方法可以连缀调用"jQ对象.方法().方法().方法()"
如$("div")和$("#d1")都是jQ对象
选择器的种类
基本选择器
层次选择器
过滤选择器
表单选择器
工厂函数
在jQurey中，无论使用哪种类型的选择符号，都从一个美元符号$和一堆圆括号开始:$()
所有能在样式表中使用的选择符，都能放到这个圆括号的引号内
标记选择器 element
可以选择整个div或者元素区块进行定位
合并选择器，即合并所有选择器的合集
selector1,selector2
<body>
<div id="d1">hello</div>
<div class="s1">hello1</div>
<P>空白<P>
function f(){
$('#d1,s1,p').css('font-size','30px');
}
</body>
层次选择器
1，select1空格select2
function f(){
$('#d1 div').css('font-size'，'30px');
}
可以直接找到d1下面的div元素，直接进行修改
2，select1>select2
只查找直接子节点，不查找间接子节点
原理，只找下一级，在下一级就不找了
3，selcet1+select2
+表示下一个兄弟节点，元素中间不能间隔，否则获取不到
4，select1-select2表示这个区域下面的所有元素
基本过滤选择器
过滤选择器是以":"或者"[]"开始
复制DOM节点
clone()
clone(true)复制的节点也具有行为（将处理代码一块复制）
jQ中的样式操作
attr("class","") 获取和设置样式
addClass("") 追加样式
removeClass 移除样式
remoreClass() 移除所有的样式
toggleClass() 切换样式
hasClass("") 是否有某个样式
css("") 读取css的值
css("","") 设置多个样式
遍历节点
children() /children(selector) 只考虑直接子节点
next() /next(selector) 下一个兄弟节点
prev() /prev(selector) 上一个兄弟节点
siblings() /siblings(selector) 上一个兄弟节点
find(selector) 查找满足选择器的所有后代
parent() 父节点
Browser 浏览器
网站是bs结构
1，请求request
2，处理请求
3，响应response
4，浏览器解析
5，生成DOM数
6，渲染
在jQ中，如何处理页面的加载事件
示例一 $(document).ready(function(){
一，初始化操作
});
function是写在加载函数ready中的
示例一的简写：功能是一样的
$(function(){ 初始化操作})
jQ初始化事件与window.onload的不同
1，window.onload在一个页面中，只能有一个而jq的初始化事件，
在一个页面中，可以有若干个
2，window.onload要在页面加载完毕时执行，而jq的初始化事件，是在DOM树加载完毕时，就已经开始执行
jQuery和其他库并存
1，js库后导入的会覆盖掉先导入的
2，可以让jQ将$的控制权交出，jQuery将$的控制权交出
jQuery.noConflict();
如果还想使用，将$换成jQurey就可以
二，事件绑定
下面是是dom操作方法
elem.οnclick=function(){}
addEveventList("click",fn);
下面是jq操作方法
3.1， $obj.bind(事件名称，执行函数)
事件名称：jq所支持的事件名称
执行函数：待执行的function
$obj.bind("click",function(){
事件操作
})
3.2事件的简写
$obj.事件名称(fn);绑定事件
$obj.事件名称();执行事件
3.3解绑事件
$obj.unbind(事件名称，fnname); fnname解绑事件指定的对应指定函数
4，事件参数
绑定事件时，直接定义一个参数，该参数则为当前时间的事件对象，可以通过事件对象，获取鼠标坐标，按下键盘键位，以及事件源，组织事件冒泡。
4.1获取事件源头
4.1.1 event.target
4.1.2 this 单纯获取事件源
注意以上都是DOM对象
4.2事件冒泡
子节点产生的事件会一次抛给父节点
取消事件冒泡
e.stopPropagation()可以取消事件冒泡,可以组织事件向上传递
5,模拟操作的语法
$obj.trigger(事件类型)
如$obj.trigger("focus");--激发$OBJ的click事件
简写形式$obj.click();
6，动画
6,1基本显示与隐藏相关
hide(speed,fn) speed动画完成的时间毫秒级
fn：动画完成后回调函数
show(speed，fn)
6,2动画的排队效果 动画完成之后可以调用另外一个动画
6,3自定义动画
$obj.animate({},speed);
jQ数组操作
length 当前jQ对象所封装的数据长度（元素个数）
1，循环遍历数组中的每一个元素
$obj.each(function(i){
this表示当前循环遍历出来的DOM元素
})
2，eq(index)
获取当前数组中指定索引处的DOM元素
var td=$("td").eq(0);
3,get()
返回由DOm元素组成的数组
4，index(obj)
获取obj在当前数组中的索引
obj可以是dom对象也可以是jQ对象
jQ插件的查找与帮助
jQ的官网提供了大量的插件，并给出评级和bug
开元中国 oschina.net
使用插件，插入到页面，确保在jQ源文件之后
表单验证插件
主要针对表单元素进行验证，并给出响应的图形以及文字提示
常用表单验证插件
formValidator
jQuery.validator
easyForm
树形插件ztree
$(document).ready(function(){
$("#myDiv").animate({
height:"100px",left:"100%",top:"100px"},9000);
});
1，引入jQ的js文件
2，使用选择器定位要操作的节点
调用jQ的方法进行操作
jQ对象
为了解决浏览器兼容问题而解决的提供一种统一封装后的对象描述
jq提供的方法都是jQ特有的，而且大多数返回也是jQ对象，所有方法可以连缀调用"jQ对象.方法().方法().方法()"
如$("div")和$("#d1")都是jQ对象
选择器的种类
基本选择器
层次选择器
过滤选择器
表单选择器
工厂函数
在jQurey中，无论使用哪种类型的选择符号，都从一个美元符号$和一堆圆括号开始:$()
所有能在样式表中使用的选择符，都能放到这个圆括号的引号内
标记选择器 element
可以选择整个div或者元素区块进行定位
合并选择器，即合并所有选择器的合集
selector1,selector2
<body>
<div id="d1">hello</div>
<div class="s1">hello1</div>
<P>空白<P>
function f(){
$('#d1,s1,p').css('font-size','30px');
}
</body>
层次选择器
1，select1空格select2
function f(){
$('#d1 div').css('font-size'，'30px');
}
可以直接找到d1下面的div元素，直接进行修改
2，select1>select2
只查找直接子节点，不查找间接子节点
原理，只找下一级，在下一级就不找了
3，selcet1+select2
+表示下一个兄弟节点，元素中间不能间隔，否则获取不到
4，select1-select2表示这个区域下面的所有元素
基本过滤选择器
过滤选择器是以":"或者"[]"开始
复制DOM节点
clone()
clone(true)复制的节点也具有行为（将处理代码一块复制）
jQ中的样式操作
attr("class","") 获取和设置样式
addClass("") 追加样式
removeClass 移除样式
remoreClass() 移除所有的样式
toggleClass() 切换样式
hasClass("") 是否有某个样式
css("") 读取css的值
css("","") 设置多个样式
遍历节点
children() /children(selector) 只考虑直接子节点
next() /next(selector) 下一个兄弟节点
prev() /prev(selector) 上一个兄弟节点
siblings() /siblings(selector) 上一个兄弟节点
find(selector) 查找满足选择器的所有后代
parent() 父节点
Browser 浏览器
网站是bs结构
1，请求request
2，处理请求
3，响应response
4，浏览器解析
5，生成DOM数
6，渲染
在jQ中，如何处理页面的加载事件
示例一 $(document).ready(function(){
一，初始化操作
});
function是写在加载函数ready中的
示例一的简写：功能是一样的
$(function(){ 初始化操作})
jQ初始化事件与window.onload的不同
1，window.onload在一个页面中，只能有一个而jq的初始化事件，
在一个页面中，可以有若干个
2，window.onload要在页面加载完毕时执行，而jq的初始化事件，是在DOM树加载完毕时，就已经开始执行
jQuery和其他库并存
1，js库后导入的会覆盖掉先导入的
2，可以让jQ将$的控制权交出，jQuery将$的控制权交出
jQuery.noConflict();
如果还想使用，将$换成jQurey就可以
二，事件绑定
下面是是dom操作方法
elem.οnclick=function(){}
addEveventList("click",fn);
下面是jq操作方法
3.1， $obj.bind(事件名称，执行函数)
事件名称：jq所支持的事件名称
执行函数：待执行的function
$obj.bind("click",function(){
事件操作
})
3.2事件的简写
$obj.事件名称(fn);绑定事件
$obj.事件名称();执行事件
3.3解绑事件
$obj.unbind(事件名称，fnname); fnname解绑事件指定的对应指定函数
4，事件参数
绑定事件时，直接定义一个参数，该参数则为当前时间的事件对象，可以通过事件对象，获取鼠标坐标，按下键盘键位，以及事件源，组织事件冒泡。
4.1获取事件源头
4.1.1 event.target
4.1.2 this 单纯获取事件源
注意以上都是DOM对象
4.2事件冒泡
子节点产生的事件会一次抛给父节点
取消事件冒泡
e.stopPropagation()可以取消事件冒泡,可以组织事件向上传递
5,模拟操作的语法
$obj.trigger(事件类型)
如$obj.trigger("focus");--激发$OBJ的click事件
简写形式$obj.click();
6，动画
6,1基本显示与隐藏相关
hide(speed,fn) speed动画完成的时间毫秒级
fn：动画完成后回调函数
show(speed，fn)
6,2动画的排队效果 动画完成之后可以调用另外一个动画
6,3自定义动画
$obj.animate({},speed);
jQ数组操作
length 当前jQ对象所封装的数据长度（元素个数）
1，循环遍历数组中的每一个元素
$obj.each(function(i){
this表示当前循环遍历出来的DOM元素
})
2，eq(index)
获取当前数组中指定索引处的DOM元素
var td=$("td").eq(0);
3,get()
返回由DOm元素组成的数组
4，index(obj)
获取obj在当前数组中的索引
obj可以是dom对象也可以是jQ对象
jQ插件的查找与帮助
jQ的官网提供了大量的插件，并给出评级和bug
开元中国 oschina.net
使用插件，插入到页面，确保在jQ源文件之后
表单验证插件
主要针对表单元素进行验证，并给出响应的图形以及文字提示
常用表单验证插件
formValidator
jQuery.validator
easyForm
树形插件ztree
$(document).ready(function(){
$("#myDiv").animate({
height:"100px",left:"100%",top:"100px"},9000);
});
扫一扫
83
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
