jQuery快速入门专题
jQuery入门专题
本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低!
一、jQuery简介
jQuery 是一个 JavaScript的一个库,也就是说jQuery是基于JavaScript框架开发出来的。其目的是为了最大化的简化了JavaScript书写方式。
二、jQuery内容
1. 查找标签(选择器)
2. 筛选器
3. 操作标签
3.1. 样式操作
3.2. 位置操作
3.3. 文本操作
3.4. 属性操作
3.5. 文档操作
4. 事件
5. 动画
6. 插件
三、jQuery对象
jQuery对象是通过jQuery包装DOM对象后产生的对象。按平时的使用来说,只能是jQuery对象,才能使用jQuery里面的方法【因为,平时在写一个js脚本的时候,里面可能有js原生的东西,也可能会有jQuery的一些语法一起使用(这里涉及的到JavaScript和jQuery之间的相互转换,下面内容会提到) 】。jQuery的方法是用例子如:$( "#nav" ).html()。
“ $( "#nav" ).html() ; ”这一句的代码分析:在这里的 $( "#nav" )就是jQuery对象(也就是点的左边),而点的右边html()就是jQuery对象的方法。这句话的意思是:获取id值为nav的标签(元素)的html代码。
注意:如果html里面有内容,例如: $( "#nav" ).html("<p>555</p>")的意思就不是获取nav标签的html代码了,而是变成了,将nav标签里面的所有html全部被替换成<p>555</p>,这个是涉及到操作方法,下面会有细讲,这里只是做个对比,抱砖引玉而且。
与原生JavaScript对比: “$( "#nav" ).html() ; 相当于原生js的 document.getElementById("nav").innerHTML;
虽然jQuery对象是通过包装DOM对象后生成的,但是jQuery对象的是无法直接使用DOM对象的任何方法,同样DOM对象也无法直接使用jQuery对象的任何方法。(这里也涉及的到JavaScript和jQuery之间的相互转换,下面内容会提到)
大家的约定:当我们要声明一个jQuery对象的变量的时候要在变量的前面加入$符号:例如
var $run = jQuery对象
var run = DOM对象
JavaScript和jQuery之间的相互转换:
拿上面的例子来说:
jQuery对象:$( "#nav" )
DOM对象:document.getElementById("nav")
1. jQuery对象转换成DOM对象:$( "#nav" )[0] ***********************************************************在jQuery对象添加一个索引,即可变成了DOM对象(因为jQuery对象获取到的标签是一个数组)
2. DOM对象转换成jQuery对象:$(document.getElementById("nav"))或者 $($( "#nav" )[0] ) ******在DOM对象的外面添加 $() 就可以jQuery对象
四、jQuery基础语法
jQuery语法是通过选取(查找)HTML元素,并随之对已选取到的元素执行某些操作。
基础语法:$(selector).action()
- selector:选择符。”查询“和”查找”HTML文档里面的元素。
- action:Query对元素的操作。
实例:
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素
五、jQuery查找标签(选择器)
5.1 基本选择器
5.1.1 id选择器:
$("#main_id")
5.1.2 标签选择器:
$("div")$("p")$("img")
5.1.3 class(样式类)选择器:
$(".main_class")
5.1.4 配合使用:
$("div.main_class")或者
$("div#main_class")
5.1.5 通用选择器:
$("*")
5.1.6 组合选择器:
$("#main_id,.nav_class,div.main_class")
5.2 层级选择器
x, y可以为任意选择器,x,可以调换。
$("x y") //x的所有后代y $("x>y") //x的所有儿子y $("x+y") //所有紧挨在x后台的y $("x~y") //x的所有兄弟y
5.3 基本筛选器
5.3.1 常用的筛选器:
//div表示选择器,这里可以是任意选择器。例如;div、#main ul li、x~y等等
$("div:first") //第一个$("div:last") //最后一个$("div:eq(index)") //索引等于index的那个元素$("div:even") //比配所有索引值为偶数的元素,从0开始计数$("div:odd") //比配所有索引值为奇数的元素,从0开始计数$("div:gt(index)") //比配所有大于给定索引值的元素$("div:lt(index)") //比配所有小于给定索引值的元素$("div:not(元素选择器)") //移除所有满足not条件的标签$("div:has(元素选择器)") //选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
例子:
$("div:has(h1)")// 找到所有后代中有h1标签的div标签 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
练习:
未更新
5.4 属性选择器
attribute:”属性“的意思。
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
例子:
<input type="text">;
<input type="password">;
<input type="button">;
//应用
$("input[type='text']");$("input[type='password']"); // 取到password类型的input标签
$("input[type!='button']");// 取到类型不是button的input标签
5.5 表单选择器
分为两组来记,第一组(五个),第二组(三个,都是按钮)
:text //例子:$(":text ") 找到表单中的所有text :password //例子:$(":password") 找到表单中的所有password :checkbox //例子:$(":checkbox") 找到表单中的所有checkbox :radio //例子:$(":radio") :file //例子:$(":file") :submit //例子:$(":submit") :reset //例子:$(":reset") :button // 例子:$(":button ")
通过属性找到对应的标签(4个):
:enabled //标签可用属性 :disabled //标签可用属性:checked :selected
例子:
1.找到可用的input标签
<form><input name="username" disabled="disabled"><input name="id" /> </form> $("input:enabled") // 找到可用的input标签
2.找到被选中的option:
<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">广州市</option><option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
六 jQuery筛选器
6.1 找下一个元素:
$("#nav").next(); $("#nav").nextAll(); $("#nav").nextUntil("#id");
6.2 找上一个元素:
$
("#nav").prev();$("#nav").prevAll(); $("#nav").prevUntil("#id");
6.3 找父亲元素:
$("#nav").parent(); $("#nav").parents(); //查找当前元素的所有父辈 $("#nav").parentsUntil("#id"); //查找当前标签的所有父辈,直到找到ID值为id的父辈元素
6.4 找儿子和兄弟元素:
$("#nav").children(); //查找当前元素下面的所有儿子们 $("#nav").siblings(); //查找与当前元素是兄弟(同级)们
6.5 查找方法( .find() ):
搜索当前元素的指定后代元素的方法。这个方法是找出正在处理的元素的后代的好方法。
$("div").find("p"); //这句话等价于 $("div p");
6.6 筛选方法( .filter() ):
筛选出与filter方法括号内表达式匹配的元素集合。这个方法可以很好的缩小匹配范围,filter方法括号内的选择器表达式可以是多个,逗号分隔即可。跟组合选择器一样。
$("div").filter(".c1") // 从div结果集中过滤出有c1样式类 这句话等价于 $("div.c1")
6.7 几个筛选器和筛选方法的对比:
.first() // 获取匹配的第一个元素 筛选器: :first .last() // 获取匹配的最后一个元素 筛选器: :last .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 筛选器: :not(元素选择器) .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 筛选器: :has(元素选择器) .eq() // 索引值等于指定值的元素 筛选器: :eq(index)
两个不同点:
1.筛选方法前面是点“.“,筛选器是冒号”:”
2.筛选方法后面有小括号,筛选器则是没有
例子:
待更新………………
七、jQuery操作标签
7.1 样式类名操作
addClass(“类名”); // 添加括号里指定的类名 removeClass(“类名”); //移除括号里的css类名 hasClass("类名"); //判断样式是否存在 toggleClass("类名"); //切换css类名,如果有类名就移除,反子就添加
示例:
正则更新中………………
7.2 位置操作
offset() //获取匹配元素在当前窗口(window)的相对位置或设置元素的位置 position() //获取匹配元素相对父元素的偏移 scrollTop() //获取匹配元素相对滚动条顶部的偏移 scrollLeft() //获取匹配元素相对滚动条左侧的偏移
.offset()
方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()
的差别在于: .position()
是相对于相对于父级元素的位移。
示例:
正则更新中………………
7.3 文本操作
7.3.1 HTML代码:
html() //取得第一个元素的html内容 html(val) 设置所有匹配的惠特米勒内容
7.3.2 文本代码:
text() // 设置所有匹配元素的内容 text(val) // 设置所有匹配元素的内容
7.3.3 设置值:
$("[name = ''hobby]").val(['basketable','foontball'])$("#s1").val (["1", "2"])
例子:
获取被选中的checkbox或者radio。
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">
使用示例:
$("input[name='gender']:checked").val()
7.3.4 值:
val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值
示例:
正则更新中………………
7.3.5 属性操作
用ID等标签,自定义属性:
attr(attrName) //返回第一个匹配元素的属性 attr(attrName,attrValue) //为所有匹配元素设置一个属性值 attr({k1:v1, k2:v2}) // 为所有匹配元素设置多个属性值 removeAttr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性 removeProp() // 移除属性
值得注意:
在1.X和2.X版本的jQuery中使用attr对checkbox进行赋值操作的时候会有bug出现,但是在3.X版本的jQuery中则没有这个问题。为了解决这个问题,我们在除了checkbox和radio的时候最好使用prop(),不要使用attr("checked","checked").
<input type="checkbox" value="checkbox"> <input type="radio" value="radio"> <script> $(":checkbox").prop("checked",true); $(":radio").prop("checked",true); </script>
prop()和attr()的区别:
attr的全称为attribute:属性。
prop的全称为property:也是属性。
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
举个例子:
<input type="checkbox" id="i1" value="1">
针对上面的代码,
$("#i1").attr("checked") // undefined $("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined,而prop获取的是这个DOM对象的属性,因此checked为false。
如果换成下面的代码:
<input type="checkbox" checked id="i1" value="1">
再执行:
$("#i1").attr("checked") // checked $("#i1").prop("checked") // true
这已经可以证明attr的局限性,它的作用范围只限于HTML标签内的属性,而prop获取的是这个DOM对象的属性,选中返回true,没选中返回false。
接下来再看一下针对自定义属性,attr和prop又有什么区别:
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码:
$("#i1").attr("me") // "自定义属性" $("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下:
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
7.3.6 文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
$(A).remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
替换
replaceWith() replaceAll()
克隆
clone()// 参数
示例正在更新^………………
7.3.7 尺寸
height() width() innerHeight() innerWidth() outerHeight() outerWidth()
八、jQuery事件
常用事件
click(function(){………………}) //点击事情 hover(function(){………………}) // focus(function(){…………………}) //获得光标事件,当点击搜索框时,改变搜索框背景色 blur(function(){………………}) //失去光标事件,在输入域外面点击,使其失去焦点
change(function(){………………}) //在某个标签或者控件被使用或改变时,可以改变属性keyup(function(){…………………}) //当按下按键时,改变文本域的颜色:
九、jQuery动画
十、jQuery插件
转载于:https://www.cnblogs.com/mashangsir/p/11277547.html
jQuery快速入门专题相关推荐
- JQuery 基础 || 目前 jQuery 有三个大版本||JQuery快速入门
1. 概念: 一个JavaScript框架.简化JS开发 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScrip ...
- jQuery快速入门
jquery快速入门 jQuery的作用:1.取得页面中的元素:2.修改页面的外观:3.改变页面的内容:4.响应用户的页面操作:5.为页面添加动态效果:6.无须刷新页面即可从服务器获取数据:7.简化常 ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- JQuery快速入门-选择器
JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...
- jquery快速入门(二)
jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...
- jQuery快速入门(2)--操作 2021.11.20
关联查找 1)$dom.parent():找$dom的父节点,相当于dom.parentNode属性 2)$dom.first():$dom集合中的第一个,平行关系 而不是父子关系 与parentNo ...
- jQuery快速入门(淘宝切换服饰、王者荣耀手风琴效果)
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...
- jquery 快速入门二
---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...
- JQuery 快速入门一篇通
JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...
最新文章
- ThinkingInJava_3
- 自学python推荐书籍 知乎-在知乎上学 Python - 爬虫篇
- 设置SAP登录后的背景图片(很有意思)
- Mybatis使用generator自动生成映射配置文件信息
- 全国首家工资总额负面清单管理试点企业获批
- oracle00011,oracle11g 导出表报EXP-00011:table不存在。
- 按键精灵手机助手之实战篇(四)项目源码
- Vue中在线引用iconfont图标
- stm32呼吸灯c语言程序,STM32之呼吸灯
- Asp连接数据库时的问题Microsoft OLE DB Provider for ODBC Drivers error ‘80004005‘
- 高中数学立体几何高考真题解题技巧(名师总结)
- Preparing: insert into user(uuid,username,gender,age,phone,address) values(?,?,?,?,?,?,?)
- pytorch迁移学习载入部分权重
- STM32F103系列之移植uCOS-II
- ​华海诚科在科创板注册生效:预计年收入超3亿元,深圳哈勃为股东​
- virsh 保护命令 virtual protect rebase
- linux修改vlan子接口mac地址,macvlan虚拟接口
- 形象理解二维傅里叶变换
- 微信小程序:新功能WXS解读(2017.08.30新增)
- IP电话基本原理详细解析
热门文章
- emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题 1
- 全球首个无人驾驶政策颁布,各大巨头并不完全买账
- 赛门铁克公布Q3财报 亏损68亿美元
- 订单可视化(智能制造、流程再造、企业信息化) 第五篇 团队建设
- 怎样才不浪费IP的价值?
- AlamofireJsonToObjects+EVReflection:一步解决JSON解析
- mysql 数据库中心_mysql数据库管理中心
- math_functions
- Backbone与服务器接口之Model数据同步
- jQuery中blur和focus事件的应用