脚本宝典收集整理的这篇文章主要介绍了jQuery基础知识概述,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1.了解jQuery
2.jQuery的两把利器
-
1.jQuery核心函数
-
2 jQuery核心对象
3.使用jQuery核心函数
-
选择器
-
是什么,怎么用?
具有特定规则(css选择器)的字符串
用来查找DOM元素:$(selecter),根据选择器规则在整个文档中查找所有匹配的元素的数组,并将其封装成jQuery对象返回
只有调用$(),并将选择器作为参数传入才能起作用
-
分类
-
基本选择器
#id
:id选择器
element:元素选择器
.class:属性选择器
*
:任意元素
selecter1,selecter2,selecterN:组合选择器
selecter1selecter2selecterN:相交选择器
-
层次选择器--查找子元素,后代元素,兄弟元素的选择器
-
过滤选择器--在原有选择器匹配的元素中进一步进行过滤的选择器
-
表单选择器
-
表单:
:input
:text
:checkbox
:radio
:checked: 选中的
......
-
表单对象属性
:enabled
:disabled
:checked
:selected
-
工具
-
ajax
ajax()
get()
post()
......
4.使用jQuery对象
-
jQuery对象使用特点
链式调用:调用jQuery对象的任何方法后返回的还是当前jQuery对象,可以多次调用
读写合一:读:内部第一个 DOM元素, 写:内部所有的DOM元素
-
属性/文本
-
CSS模块
-
设置CSS样式/读取CSS值
css(styleName):读取css值
css(styleName,value):设置一个样式
css({多个键值对}):设置多个样式
-
获取/设置元素的位置数据
offset():相对页面左上角的坐标
position():相对于父元素左上角的坐标
-
scrollTop()/scrollLeft():读写元素/页面的滚动条的坐标
得到页面滚动条的scrollTop:
$(document.body).scrollTop()+$(document.html).scrollTop();
设置页面滚动条的scrollTop:
$('body,html').scrollTop(value);
-
获取/设置元素的吃寸数据
-
文档模块
-
添加节点
-
向当前匹配的所有元素内部的最后/最前面插入指定内容
append(content)
prepend(content)
-
将指定内容插入到当前所有匹配元素的最后/最前
after(content)
before(content)
-
替换节点
replaceWidth(content):用指定内容替换 所有匹配的元素
-
删除节点
empty():删除所有匹配元素的子元素(掏空)
remove():删除所有匹配的元素(自己及内部都删除)
-
筛选模块
-
过滤
在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
first()
last()
eq(index)
filter(selecter)
not(selecter)
has(selecter)
-
查找后代/父/兄弟元素
查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
children():子元素
find():后代元素
parent():父元素
prevAll():前面的所有兄弟元素
siblings():所有的兄弟元素
-
事件模块
-
on('eventName',function(){}):通用的事件绑定方法
eventName(function(){})
hover(function(){},function(){}):同时绑定鼠标移入和移出事件
-
解绑事件
off('eventName')
-
事件委托
理解:通过事件冒泡将子元素的事件委托给父元素处理,事件监听绑定在父元素上,但事件发生在子元素上,最终调用事件回调函数的是子元素:event.target
-
绑定事件委托监听
delefate(selecter(子元素),'eventName',function(event){})
-
解绑事件监听
undelegate('eventName')
-
相关知识
-
事件坐标
相对可视窗口左上角:event.clientX/eventclientY
*相对页面左上角:event.pageX/event.pageY
相对当前元素左上角:event.offsetX/event.offsetY
阻止事件冒泡:event.stopPropagation();
取消事件的默认行为:event.preventDefault();
-
动画效果
-
jQuery插件
-
-
扩展jQuery插件的工具方法
$.extend({
xxx.function(){}
})
$.xxx()
-
扩展jQuery对象的方法
$.fn.extend({
xxx:function(){}
})
$().xxx()
-
jQuery插件
理解:基于jQuery编写的扩展库
jQuery UI: http://jqueryui.com/
以上是脚本宝典为你收集整理的jQuery基础知识概述全部内容,希望文章能够帮你解决jQuery基础知识概述所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。