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);
});
原文:https://blog.csdn.net/weixin_36171533/article/details/78704978