jQuery 基础总结

样式篇

$(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码;

jQuery对象转化成DOM对象:
jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素。
jQuery自带的get()方法:转换为DOM对象

DOM对象转化成jQuery对象:$

基本选择器:id选择器 类选择器 元素选择器

层级选择器: 
子选择器:$(‘div > p‘) 选择所有div元素里面的第一个子元素P
后代选择器:$(‘div p‘).css("border", "1px groove red");
相邻兄弟选择器:(".prev+div")选取prev后面的第一个的div兄弟节点一般相邻选择器:(".prev+div")选取prev后面的第一个的div兄弟节点一般相邻选择器:(".prev ~ div")选取prev后面的所有的div兄弟节点

基本筛选器
:first/:last/:even/:odd 注意jQuery合集都是从0开始索引 :even偶数 :odd奇数
:eq/:gt/:lt   :gt大于 :lt小于

内容筛选器
:contains/:has       (contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素)
:parent/:empty

可见性筛选选择器
:visible/:hidden

隐藏
1.CSS display的值是none。
2.type="hidden"的表单元素。
3.宽度和高度都显式设置为0。
4.一个祖先元素是隐藏的,该元素是不会在页面上显示
5.CSS visibility的值是hidden
6.CSS opacity的指是0                 5.6两种被认为是可见的,因为他们仍然占用空间布局

属性筛选选择器
[att=val]、[att]、[att|=val]、[att~=val] [att^=val]、[att*=val]、[att$=val]、[att!=val]

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的
[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

子元素筛选选择器
:first-child、:last-child、:only-child、:nth-child、:nth-last-child

表单元素选择器
input、text、password、radio、checkbox、submit、image、reset、button、file

表单对象属性筛选选择器
enabled、disabled checked、selected(option)

特殊选择器this

.attr() .removeAttr()
1.attr(传入属性名):获取属性的值
2.attr(属性名, 属性值):设置属性的值
3.attr(属性名,函数值):设置属性的函数值
4.attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

.html() .text() .val()
.html处理的是元素内容,.text处理的是文本内容,.val()是用来处理表单

.addClss():添加一个样式类名到元素上
.removeClass():删除样式
.toggleClass():结合上面两点

样式操作.css()
获取:
.css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames ):传递一组数组,返回一个对象结果
设置:
.css(propertyName, value ):设置CSS
.css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理
.css( properties ):可以传一个对象,同时设置多个样式

回到顶部(go to top)

DOM篇

jQuery节点创建
:$("<div id=‘test‘ class=‘aaron‘>我是文本节点</div>")

DOM节点插入
内部插入append()与appendTo()
:目标的位置不同

通过before与after添加元素(内容在后,元素在前)
:before,在匹配元素之前增加多参数、after,在匹配元素之前增加多参数

通过prepend与prependTo添加元素(目标位置不同)
:prepend()向每个匹配的元素内部前置内容;append()向每个匹配的元素内部追加内容

通过insertBefore与insertAfter添加元素(内容在前,元素在后)

DOM节点删除
通过empty移除元素
:移除内容,但是id,class属性没有删除

通过remove移除元素
: 移除内容和属性

保留数据的删除操作detach()

DOM拷贝clone()
//clone处理一:("div").clone()//只克隆了结构,事件丢失//clone处理二:("div").clone()//只克隆了结构,事件丢失//clone处理二:("div").clone(true) //结构、事件与数据都克隆

DOM替换replaceWith()和replaceAll():
replaceWith:内容在后面 replaceAll相反

DOM包裹wrap()方法:增加一个父元素
unwrap():与wrap()相反
wrapAll()方法:给集合中的元素分别包裹
wrapInner()方法:可以理解成增加一个内元素

jquery遍历
children方法():寻找第一级子元素
find方法():寻找后代元素

parent方法():向上查找一级
parents方法():向上查找多级找到符合条件的多个
closest()方法:向上查找多级找到最近的那个

next()方法:紧邻的后面同辈元素的元素集合
prev()方法:紧邻的前面同辈元素的元素集合
siblings():每一个元素紧邻的前面后面同辈元素

add()方法:往jQuery合集中添加一新的元素

each():
$("li").each(function(index, element) {
}):index是索引 △:从0开始;element:是对应的节点

回到顶部(go to top)

事件篇

①鼠标事件
<div id="test">点击触发<div>
$("#text").click(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
});

click与dbclick事件

mousedown与mouseup事件:两个合成click事件

mousemove事件

mouseover与mouseout事件
mouseenter与mouseleave事件:和上一种的区别冒泡的方式处理问题(不支持冒泡)
hover事件:mouseenter事件和mouseleave事件合起来

②表单事件
focusin事件:当一个元素或内部任何一个元素获得焦点的时候
focusout事件:当一个元素,或者其内部任何一个元素失去焦点的时候

focus与blur事件:不支持冒泡,focusin与focusout支持冒泡

change事件:可以监听<input> <select> <textarea>改变的动作

select事件:只用于<input>元素与<textarea>元素

submit事件:(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)
return false; //阻止提交

keydown()与keyup()事件:键盘按下与松手

on()的多事件绑定:
多个事件绑定同一个函数:("#elem").on("mouseover mouseout",function(){ }); 多个事件绑定不同函数("#elem").on("mouseover mouseout",function(){ }); 多个事件绑定不同函数("#elem").on({
mouseover:function(){}, 
mouseout:function(){},
});

on()的高级用法:委托机制 $("div").on("click","p",fn)

卸载事件off()方法

jQuery事件对象:event.target
jQuery事件对象的属性:
event.type:获取事件的类型 event.pageX 和 event.pageY event.stopPropagation() 方法:阻止事件冒泡

时间: 2024-10-28 16:14:19

jQuery 基础总结的相关文章

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

JQuery基础知识(2)

JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是滑动完成后所执行的函数名称. 2.JQuery slideUp();用于向上滑动元素 语法: $(selector).slideUp(speed,callback

【jQuery基础学习】09 jQuery与前端(这章很水)

这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本 网页结构 头部:网站的品牌log,登录信息 内容:放置网站的主体内容 尾部:放置网站的其它友情链接和版权信息之类的 关于网站样式 首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局

JQuery基础知识(1)

JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的参数,即hide(speed);隐藏的速度进行了限定.hide(1000)/show(1000); 2.JQuery toggle()方法用来切换hide()和show();可以用speed参数进行控制显示和隐藏的速度. JQuery的淡入淡出 1.JQuery fadeIn();此方法可以携带不同

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

Jquery基础之选择器

选择器是JQuery的根基,在JQuery中对事件处理.选择遍历Dom.ajax操作都依赖选择器.JQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器 1.ID选择器$("#ID") 页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素.选择结果为单个元素. 2.类选择器$(".class"

Jquery基础之ajax

ajax是Asynchronous JavaScript and XML(异步JavaScript和XML)的简称,ajax并不是单一的技术而是利用一系列交互网页应用相关的技术形成的结合体,ajax揭开了无刷新更新页面的全新时代. ajax优点:不需要插件支持.优秀的用户体验.提高Web程序的性能.减轻服务器和宽带的负担.缺点:浏览器支持度不足.破浏览器前进后退按钮的正常功能.对搜索引擎的支持不足.开发和调试工具缺乏. Jquery对ajax操作进行了封装,ajax主要的几种方法是load().

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jQuery基础---Ajax进阶

原文:jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中,我们了解了最基本的异步处理方式.本篇来了解一下 Ajax 的一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超过一定时间的请求, 用户就会变得不再耐烦而关闭页面. 而如果在请求期间能给用户一些提示,比如:

jquery 基础汇总---导图篇

最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以及jQuery的一些属性和样式, 选择器的简介详见:http://www.cnblogs.com/amy-1205/p/5849568.html 事件篇,主要是鼠标事件,表单事件,键盘事件,事件的绑定和解绑以及自定义事件 动画篇,学习后制作出以下效果:隐藏和显示.上卷下来.淡入淡出.也可以通过自定义