文档章节

jQuery基础知识

yuanyuan_chen
 yuanyuan_chen
发布于 2016/11/08 14:48
字数 4107
阅读 13
收藏 0

》》》jQuery选择器《《《《《

jQuery选择器(对比css选择器): 基础选择器//伪类选择器

css选择器----> $(" ") --->$(" ") jq选择器

基础选择器:

基本选择器:元素选择器、id选择器、class选择器、群组选择器、*选择器

元素选择器:选择相同的元素,然后对相同的元素进行操作

语法:$("元素名") 代码:$(function(){ 代码块 }) 这个代码类似于js中window.onload=function(){},也就是文档加载文成后执行的代码块 补充:css是“对象的一个方法”,可以用点运算符来代替,例如$("div").css()

id选择器:语法:$("#id名") id名字前面必须要加上#

class选择器:语法:$(".类名") class名字前必须要加上.

群组选择器:语法:$("选择器1,选择器2,选择器3")

选择器(全选择器):{margin:0;padding:0);选择所有元素

层次选择器:父子、后代、兄弟、相邻

$("M N") 后代选择器 选取M元素内部后代N元素 $("M>N") 子代选择器 选取M元素中所有第一级子代N元素 $("M~N") 兄弟选择器 ===$("M元素).nextAll() $("M+N") 相邻选择器 ===$("M元素).next()

区别: 后代选择器选取的是元素内部所有的后代元素 子代选择器选取的是元素内部的子元素;

技巧:在连li元素之间添加一个边框的效果 $("li+li").css("attr","value")

属性选择器

$("selector[attr]") 选取包含特定属性的元素 $("selector[attr='value']") 选取包含特定属性值的元素 $("selector[attr!='value']") 选取不包含某特定属性值的元素 $("selector[attr*='value']") 选取给定属性以包含某些值的元素 $("selector[attr^='value']") 选取给定属性以某些值开头的元素(较少用) $("selector[attr$='value']") 选取给定属性以某些值结束的元素(较少用) $("selector[selector1][selector2]...)" 复合属性选择器

实例: $("div[class]") $("input[type='checkbox']") $("input[type!='checkbox']")

$("div[calss *= 'nav']") 选择class属性包含nav的div元素

$("input[name^='group']") $("input[name $='group']")

$("div[id][class ^='lyve]") 选取有id属性,且class属性以lyve开头的div元素

伪类选择器(以:开头) 包含:简单伪类选择器、子元素伪类选择器、可见性伪类选择器、内容伪类选择器、表单伪类选择器、表单属性伪类选择器 ,

简单伪类选择器: :not(selector) 选取某选择器之外的元素 :first/first() 选取某元素的第一个元素 :last/last() 选取某元素的最后一个元素 :odd 选取索引值为奇数的元素 :even 选取索引值为偶数的元素 :eq(index) 选取某个给定索引值的元素 :lt(index) 选取小于某个索引值的元素 :gt(index) 选取大于某个索引值的元素 :header 选取h1-h6的标题元素 :animated 选取所有正在执行动画效果的元素 :root 选取页面的根元素//少用 :target 选取当前活动的目标元素(锚点)//少用

子元素伪类选择器

第一类:不区分类型 :first-child 选择父元素的第1个子元素 :last-child 选择父元素的最后1个子元素 :nth-child(“整数|odd|even”) 选择父元素下的第n个元素或奇偶元素 :only-child 选择父元素中唯一的子元素

第二类:区分类型 :first-of-type 选择同元素类型的第1个同级兄弟元素 :last-of-type 选择同元素类型的最后1个同级兄弟元素 :nth-of-type 选择同元素类型的第n个同级兄弟元素,n的值可以是“整数|odd|even” :only-of-type 匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)

可见性伪类选择器 :hidden (display:none+type="hidden"+visiblity:hidden :visible //定义鼠标单击事件 代码:$(#btn).click(function(){ //鼠标事件的内容 });

内容选择器 :contains(text) 选择包含给定文本内容的元素 :has(selector) 选择含有选择器所匹配元素的元素 :empty :parent 选择含有子元素或者文本的元素(跟:empty相反)

表单伪类选择器 :input 选择所有input元素 :button 选择所有普通按钮,即type="button"的input元素 :submit 选择所有提交按钮,即type="submit"的input元素 :reset 选择所有重置按钮,即type="reset"的input元素 :text 选择所有单行文本框 :textarea 选择所有多行文本框 :password 选择所有密码文本框 :radio 选择所有单选按钮 :checkbox 选择所有复选框 :image 选择所有图像域 :hidden 选择所有隐藏域 :file 选择所有文件域

表单属性伪类选择器

:checked 选择所有被选中的表单元素,一般用于radio和checkbox option:selected 选择所有被选中的option元素 :enabled 选择所有可用元素,一般用于input、select和textarea :disabled 选择所有不可用元素,一般用于input、select和textarea :read-only 选择所有只读元素,一般用于input和textarea :focus 选择获得焦点的元素,常用于input和textarea

》》》》元素操作《《《《《 对于元素的操作分为3个方面:属性操作,内容操作,样式操作

属性操作:获取、设置、删除

获取:$().attr("属性名") 设置:$().attr("属性名","属性值") 删除:$().removeAttr()

!!注意:此外在jQuery中,除了可以使用attr()方法来操作元素的属性之外,还可以使用prop()方法。prop()方法和attr()方法语法相同,其中prop()用于获取和设置元素属性,removeProp()用于删除元素的属性。

其中attr()方法用于操作元素的固有属性,所谓的“固有属性”指的是元素本身具有的属性如a标签的href、target、title等。而prop()方法用于操作元素的自定义属性,所谓的“自定义属性”指的是用户自己定义的一些属性。

内容操作:获取内容html()/text() 获取表单元素的内容(值)val() 获取元素内容:$().html()/$().text() 获取表单的值:$().val()

样式操作:css属性操作//css类名操作

css属性操作: 获取: $().css("属性") 设置:单个属性设置:$().css("属性","属性值") 多个属性设置: $().css({"属性1":"属性值1","属性2":"属性值2",……})

css类名操作: 添加:$().addClass("类名") 删除:$().removeClass("类名") 切换: $().toggleClass("类名")

盒子模型的宽度和高度(均不带px,是纯数字!!!) 宽度: width() width 只有它能用于window或者document对象 innerWidth() width+padding outerWidth() width+padding+border

高度: height() height() innerHeight() height+padding outerHeight() height+padding+border

盒子模型的位置:offset()和positon()

offset() 元素相对于document的偏移距离 语法:不带单位!! $().offset() 返回坐标对象,(top,left) $().offset().top 返回元素相当于文档顶部的距离 $().offset().left 返回元素相当于文档左边的距离

position 元素相对于其被定位的祖辈元素的偏移距离 语法:不带单位!! $().position() $().position().top $().position().left

父元素position:relative 子元素position:absolute

滚动条的距离:scrollTop()和scrollLeft() scrollTop:元素相对于垂直滚动条顶部的距离 语法: $().scrollTop()

scrollLeft:元素相对于水平滚动条左边的距离 语法:$().scorllLeft()

DOM操作***

常见DOM操作:创建节点//插入节点//删除节点//复制节点//替换节点//包裹节点//遍历节点

创建节点 语法:var e=$(html); $().append(e); // var $li="<li></li>"; $().append($li);

!!在创建复杂节点时,由于复杂节点的属性与属性值之间必须用"",最外面必须用''来表示

插入节点 备注:在js中,插入节点只有appendChild()和insertBefore()两种,而jQuery中提供了大量的方法

内部插入节点:末尾:append()和appendTo(); 开始: prepend()和prependTo(); 语法:$(A).append(B); 在A的内部的末尾加入B $(B).appentTo(A) 效果同上

外部插入节点:before()和insertBefore(); after()和insertAfter(); 语法: $(a).before(b) 在a的外部之前加入元素b

删除节点 remove()方法;detach()方法;empty()方法

$(a).remove()删除节点 (虽然节点被删除了,但是还可以通过返回值来再次使用这个对象) $(b).detach()半删除节点 (只删除元素,元素绑定的事件并不会删除) $(c).empty() 保留自身节点,删除后代节点

复制节点 语法:$(a).clone()默认false $(a).clone(false) 复制a节点,但不复制a节点所绑定的事件 $(a).clone(ture) 复制a节点,并且复制事件

替换节点(元素被替换后,其说绑定的事件会消失) $(a).replaceWith(b) 用b来替换a $(a).replaceAll(b) 用a来替换b

包裹节点 $(a).wrap(b) 用a来包裹所有b进行单独包裹(作用于单独元素) $(a).wrapAll(b) 将所有匹配的元素b用一个元素来包裹(作用于元素整体) $(a).wrapInner(b) 将a元素所有内部子元素使用b元素包裹(不包含a本身) [与warp()效果一样,但是html结构不一样] //$('p').unwarp();删除p元素的父元素,保留自身以及兄弟元素

遍历节点 语法:$().each(function(index,elements){ this-->elements }) 只遍历儿子级别元素 $("div").children() 遍历所有后代元素 $("div").find("li") 查找父级元素 $("ul").parent() 查找第一个符合条件的祖先元素 $("div").closest() 查找下一个兄弟元素 $("div").next() 查找前一个兄弟元素 $("div").prev() 查找所有的兄弟元素 $("div").siblings()

add()是指在jquery对象集合中增加一个对象,而append()是在DOM集合中增加一个节点,add()不会直接影响界面,append()会对界面产生影响.

*jQuery事件简介 jQuery事件:页面载入事件、鼠标事件、键盘事件、表单事件、滚动事件、绑定事件、解绑事件、合成事件、一次事件

页面载入事件 js中的window.onload()方法,只有在元素加载完,以及该元素关联的文件加载完之后才能执行;若是页面中有多个window.onload(),浏览器只会执行最后一个(要实现多个wiondow.onload,需要使用addLoadEvent方法)

jq中的$().ready()方法,只要DOM元素加载完就可以执行(可以大幅提高页面的相应速度以及执行效率)

ready()方法的4种写法: 第一种:$(document).ready(function(){ 代码内容 })

第二种: jQuery(document).ready(function(){ 代码内容 }) 第三种 $(function(){ 代码内容 }) 第四种 jQuery(function(){ 代码部分 })

鼠标事件 click(单机)//dbclick(双击)//mouseover(移入)//mouseout(移出)//mousedown(按下)//mouseup(松开)//mousemove(鼠标移动)

语法: $().鼠标事件(function(){ 代码块 })

mouseover mouseout 鼠标在接触/移除所选元素及其后代子元素时都会触发事件

mouseenter mouseleave 鼠标在只接触/移出所选元素时才会触发事件

键盘事件 keypress//keydown//keyup

补充:String.fromCharCode() 表示将ASCII码转换为字符

keypress只有在按下字符键时触发 keydowm 按下任意键都会触发

表单事件 focus()获得焦点 // blur()失去焦点

focusin()和focusout()支持冒泡排序,而focus()和blur()不支持

change()事件

select事件(只能用于<input>和<textarea>这两个元素)

submit()事件

具有获得焦点+失去焦点事件+change事件的元素有3个:text//textarea//select 下拉列表中列表项的选中事件是change而不是select

滚动事件 语法:$().scroll(fn) 滚动事件常常和scrollTop()和scrollLeft()这两个方法一起使用,在滚动条的位置发生变化时,触发相应的事件

绑定事件 on()方法 语法:$().on(type,fn) type是必选参数,表示事件类型,type是一个字符串 fn必选,表示事件的处理函数

1、在jQuery中绑定事件不是还有bind()和live()么?为什么站长不给我们详细讲解一下?

从jQuery1.7开始(我们现在用的是jQuery1.12.0),对于绑定事件,jQuery官方都建议使用on()方法来统一取代以前的bind()、live()和delegate();对于解绑事件,jQuery官方也建议使用off()方法来统一取代以前的unbind()、die()和undelegate()。因此,大家必须了解和清楚这一点。

解绑事件 off( ) 语法:$().off(type)

合成事件$().hover(f1,f2) 语法:$("#wrapper").hover(function () { //第1个function的内容 }, function () { //第2个function的内容 })

一次性事件one() 语法: $().(type,fn)

事件对象event event.type 事件类型 event.pageX event.pageY 鼠标对于当前页面的坐标 event.preventDefault() 阻止默认行为 event.stopPropagation()阻止事件冒泡 event.which 获取用户单击鼠标时,单击的是鼠标的哪个按键 event.currentTarget 在事件冒泡过程中的当前DOM元素

this 和event.target的区别:js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;

this和event.target都是dom对象:如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用;

自定义事件 trigger事件:根据绑定到的匹配元素的给定的事件(原生或者自定义都可以)类型执行所有的处理程序和行为 语法: $('#elem').on('Aaron', function(event,arg1,arg2) { alert("自触自定义时间") }); $('#elem').trigger('Aaron',['参数1','参数2'])

.trigger()方法会影响所有与jquery对象所匹配的元素,使得DOM元素向上冒泡 要想阻止冒泡,可以使用.triggerHandler()方法

》》》》》jQuery动画基础《《《《《《

显示和隐藏(切换):改变height、width和opacity属性

语法:$().show(speed,callback) 显示 speed必选,表示动画执行速度,单位毫秒;callback为必选参数 $().hide() 隐藏 $().toggle(speed,callback) 切换元素的显示状态

淡入和淡出:改变opacity属性 语法: $().fadeIn(speed,callback) 淡入 $().fadeOut(speed,callback) 淡出 $().fadeToggle(speed)切换
$().fadeTo(speed,opacity,callback) 淡出效果 opacity必选,speed和callback为可选参数 d

滑上和滑下:

语法:$().slideUp(speed,callback) 实现元素的滑上效果 $().slideDown(speed,callback) 滑下 $().slideToggle(speed,callback) 切换滑动状态,配合flag一起使用

自定义动画 animate()方法 语法:$().animate(params, speed, callback) params是必选参数,是“属性:值”列表 speed 可选参数 callback可选

!!注意 1.使用animate()方法改变颜色相关属性时,需要调用jquery.color.js

2.在属性值前面加上"+="表示累加(在原有属性值的基础上添加)

3.在animate方法中添加css后,css会立刻执行,正确的方法是将css放入在回调函数中

队列动画(链式效果) 语法: $().animate().animate()....

停止动画效果: 语法:$().stop(clearQueue,gotoEnd)说明clearQueue是可选参数,表示是否要清空未执行的动画队列,默认false;gotdEnd表示是否将正在执行的动画跳转到末尾状态,默认false

几种情况: stop() 仅停止当前动画,后面的动画可以继续执行 stop(true) 停止所有动画,包括当前执行的动画 stop(true,true) 停止所有动画,但允许执行当前动画 stop(false,true)停止当前动画,直接跳到最后一个动画

延迟动画效果: 语法: $().delay(speed)

判断动画状态 语法: if(!$().is(":animated")) { //如果当前没有进行动画,则添加新动画 }

补充: 1.判断元素是否在数组中:inArray(value,array,[fromIndex]) 2.去除空格 $.trim(元素) 3.获取某个元素 .get(index) 4.获取元素对象的索引 .index(selector/element) 注意:$().index() 返回的是同辈元素的排列顺序

》》》》》》jQuery过滤和查找方法《《《 过滤方法:以方法的形式选择某些元素

hasClass() 判断是否含有某个类 true/false eq(n) 选择指定下标的元素 is() 判断元素是否符合某个条件 true/false not() 选择不符合条件的元素 filter() “自定义表达式”来选择符合条件的元素 has() “自定义表达式”选择符合条件的元素

查找方法: 查找祖先元素: 父元素:parent(唯一) 祖先元素:parents(多个) 指定范围:parentUntil()

查找后代元素: 一级子元素:children(expression) 子元素+节点注释(contents) find()找到指定后辈元素

向前查找兄弟元素: prev();prevAll();prevUntil() 向后查找兄弟元素: next();nextAll();nextUntil() 查找所有兄弟元素:siblings() 查找所有兄弟元素:

© 著作权归作者所有

yuanyuan_chen
粉丝 0
博文 3
码字总数 8050
作品 0
东城
程序员
私信 提问
jQuery小测试系列之jQuery基础知识

日期:2012-4-17 来源:GBin1.com 这是jQuery小测试系列第一部分:基础知识。 来源:jQuery小测试系列之jQuery基础知识

gbin1
2012/04/17
44
0
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
2018/06/26
0
0
jQuery源码剖析(五) - 事件绑定原理剖析

jQuery 源码解析代码及更多学习干货:猛戳GitHub 本篇代码为 my-jQuery 1.0.5.js 一、基础知识 1.DOM 0级事件模型: 通过JS指定事件处理程序传统方式,就是将一个函数赋值为一个事件处理程序属性...

极客James
07/27
0
0
PHP职业规划

PHP职业规划 初级PHP程序员 需要掌握知识点: HTML 熟练 CSS 熟练 Javascript 基础 jQuery 基础 SQL 基础 PHP 熟练 职业要求 能够独立进行网页制作与排版 能够制作简单的前端效果 或 将前端效...

染墨青衿
2014/12/22
6
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
2018/09/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部