jQuery常用操作
jQuery
jQuery是一个轻量级的JS库,是一个被封装好的JS文件,提供了更为简便的元素操作方式,jQuery封装了DOM。
使用jQuery
引入jQuery文件
<scrtipt src='jquery-1.11.3.js'> </script>
注意:引入必须放在其他jQuery操作之前。
jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的所有操作都只针对jQuery对象,其他对象(DOM)无法使用
工厂函数 -- $()
想要获取jQuery对象,则必须使用工厂函数$()
在$()中允许传递一个选择器/DOM对象作为参数,$()能够将选择器和DOM对象全部封装成jQuery对象再进行返回
例子:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jQuery演示</title> </head> <body><div id="main">id是mian的div元素</div> <button onclick="bClick()">获取元素</button><script src="jquery-1.11.3.js"></script><script>function bClick() {//通过jquery选择器获取id='main'的元素var m = $("#main");//设置元素的内容 m.html('动态设置的值');console.log(m)}</script> </body> </html>
DOM对象和jQuery对象之间的转换
DOM对象不能使用jQuery提供的操作,反之同样。
1、将DOM对象转换为jQuery对象
语法:var 变量 = $(DOM对象);
注意:所有的jQuery对象在起名的时候,最好在变量前加$,主要用于和DOM对象的区分
例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main">这是div元素</div><button onclick="bClick()">DOM - jQuery</button><script src="jquery-1.11.3.js"></script><script>function bClick() {// 通过DOM的操作,得到id为main的元素var main = document.getElementById('main');// 再将其转换为jQuery对象var $main = $(main);$main.html('转换为JQ对象成功!')}</script> </body> </html>
2、将jquery对象转换为DOM对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main">这是div元素</div><button onclick="JQtoDom()">jQuery-DOM</button><script src="jquery-1.11.3.js"></script><script>function JQtoDom() {// 使用jquery得到id为main的元素var $main = $("#main");// 再将其转换为DOM对象// var m = $main[0];var m = $main.get(0);m.innerHTML = '转换为DOM对象成功!'}</script> </body> </html>
jQuery选择器
作用
获取页面上的元素们,返回值都是由jQuery对象所组成的数组
语法:$("选择器")
基本选择器
1、ID选择器
$("#id");
返回:返回页面中指定ID值的元素
2、类选择器
$(".className")
返回:页面中指定className的所有元素
3、元素选择器
$("element")
返回:页面中指定标记的所有元素
4、群组选择器 / 复合选择器
$("selector1,selector2,...")
返回:返回满足函数内所有选择器的函数们
层级选择器
1、$("selector1 selector2")
后代选择器
2、$("selector1>selector2")
子代选择器
3、$("selector1+selector2")
名称:相邻兄弟选择器
作用:匹配紧紧跟在selector1后面且满足selector2选择器的元素
例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main"><p id="p1">这是id为p1的元素</p><p>这是普通元素</p><p>这是普通元素</p><p>这是普通元素</p><p>这是普通元素</p></div><button onclick="bNB()">相邻兄弟选择器</button><script src="jquery-1.11.3.js"></script><script>function bNB() {$("#p1+p").css('background', 'yellow');}</script></body> </html>
4、$("selector1~selector2")
名称:通用兄弟选择器
作用:匹配selector1后面所有满足selector2选择器的元素
例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="main"><p id="p1">这是id为p1的元素</p><p>这是普通元素</p><p>这是普通元素</p><p>这是普通元素</p><p>这是普通元素</p></div><button onclick="bNB()">通用兄弟选择器</button><script src="jquery-1.11.3.js"></script><script>function bNB() {$("#p1~p").css('color', 'red');}</script> </body> </html>
基本过滤选择器
过滤选择器通常都会配合着其他的选择器一起使用
1、:first
只匹配一组元素中的第一个元素
$("p:first")
2、:last
只匹配一组元素中的最后一个元素
3、:not("selector")
在一组元素中,将满足selector选择器的元素排除出去
4、:odd
匹配 偶数行 元素(奇数下标)
5、:even
匹配 奇数行 元素(偶数下标)
6、:eq(index) -- equals
匹配 下标等于 index 的元素
7、:gt(index)
匹配 下标大于 index 的元素
8、:lt(index)
匹配 下标小于 index 的元素
属性过滤选择器
依托于html元素的属性来进行元素过滤的
1、[attribute]
作用:匹配包含指定属性的元素
ex:
div[id]:匹配具备id属性的div元素
2、[attribute=value]
作用:匹配attribute属性值为value的元素
ex:
input[type=text]
input[type=password]
3、[attribute!=value]
作用:匹配attribute属性值不是value的元素
4、[attribute^=value]
作用:匹配attribute属性值是以value字符开头的元素
ex:
p[class^=col]
5、[attribute$=value]
作用:匹配attribute属性值是以value字符结尾的元素
6、[attribute*=value]
作用:匹配attribute属性值中包含value字符的元素
子元素过滤选择器
1、:first-child
匹配属于其父元素中的首个子元素
2、:last-child
匹配属于其父元素中的最后一个子元素
3、:nth-child(n)
匹配属于其父元素中第n个子元素
4、jQuery操作DOM
基本操作
1、html()
作用:获取 或 设置 jQuery对象中的html内容
ex:
console.log($("#main").html());
$("#main").html("");
2、text()
作用:获取 或 设置 jQuery对象中的text内容
3、val()
作用:获取 或 设置 jQuery对象中的value值(表单控件)
4、属性操作
attr()
作用:读取 或 设置jQuery对象的属性值
ex:
$obj.attr("id");
获取 $obj 的id属性值
$obj.attr("id","main");
设置$obj对象的id属性值为main
removeAttr("attrName")
删除jQuery对象的attrName属性
ex:
$obj.removeAttr("class");
2、样式操作
1、attr()
$obj.attr("class","redBack");
2、addClass("className")
作用:将className 添加到元素的class值之后
ex:
$obj = $obj.addClass("c1");
$obj = $obj.addClass("c2");
连缀调用:
$obj.addClass("c1").addClass("c2");
3、removeClass("className")
如果无参的话,则清空类选择器
如果有参数的话,则删除对应的类选择器
ex:
$obj.removeClass("c1")
将c1类选择器从$obj移除出去
$obj.removeClass()
清空$obj的所有类选择器
4、toggleClass("className")
切换样式:
元素如果具备className选择器,则删除
元素如果没有className选择器,则添加
5、css("属性名")
$obj.css("width");
获取$obj对象的width属性值
6、css("属性名","属性值")
$obj.css("background-color","yellow");
设置$obj对象的background-color的属性值为yellow
7、css(JSON对象)
JSON对象:
是一种约束了格式的对象表现形式
JSON:JavaScript Object Notation
JSON对象的表示方式:
1、JSON对象必须使用{}括起来
2、使用键值对的方式来声明数据(表示属性和值)
3、所有的属性在使用时必须使用""括起来,值如果是字符串的话,也必须使用""括起来
4、属性和值之间使用:连接
5、多对属性和值之间使用 , 隔开
ex:
$obj.css({
"color":"red",
"font-size":"32px",
"float":"left"
});
遍历节点
1、children() / children("selector")
获取某jQuery对象的所有子元素 或 带有指定选择器的子元素
注意:只考虑子代元素,不考虑后代元素
2、next() / next("selector")
获取某jQuery对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
3、prev() / prev("selector")
获取某jQuery对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
4、siblings() / siblings(selector)
获取某jQuery对象的所有兄弟元素 / 满足selector的所有兄弟元素
5、find("selector")
查找满足selector选择器的所有后代元素
6、parent()
查找某jQuery对象的父元素
创建对象
语法:$("创建的标记")
ex:
1、创建一对div
var $div = $("<div></div>");
$div.html("动态创建的div");
$div.attr("id","container")
$div.css("color","red");
2、创建一对div
var $div = $("<div id='container' style='color:red;'>动态创建的div</div>");
插入元素
作用:将创建好的元素插入到网页中
1、内部插入
作为元素的子元素插入到网页中
$obj.append($new);
将$new元素插入到$obj元素中的最后一个子元素位置处(追加)
$obj.prepend($new);
将$new元素插入到$obj元素中的第一个子元素位置处
2、外部插入
作为元素的兄弟元素插入到网页中
$obj.after($new);
将$new元素作为$obj的下一个兄弟元素插入进来
$obj.before($new);
将$new元素作为$obj的上一个兄弟元素插入进来
删除元素
$obj.remove();
将$obj元素删除出去
jQuery中的事件处理
1、页面加载后的执行
类似于window.onload 但不同于 window.onload
jQuery加载后执行的特点:
在DOM树加载完毕的时候就开始执行
$(document).ready( function(){
//页面的初始化操作
//DOM树加载完成后就开始运行
} );
$().ready( function(){
//页面的初始化操作
//DOM树加载完成后就开始运行
} );
$( function(){
//页面的初始化操作
//DOM树加载完成后就开始运行
} );
2、jQuery的事件绑定
方式1
$obj.bind("事件名称",事件处理函数);
ex:
$obj.bind("click",function(){
//事件的行为操作
console.log("... ....");
});
方式2
$obj.事件名称(function(){
//事件处理函数
});
ex:
$obj.click(function(){
//通过 this 来表示触发该事件的DOM对象
});
3、事件对象 - event
在绑定事件的时候,允许传递 event 参数来表示事件对象
$obj.bind("click",function(event){
//event表示当前事件的事件对象
});
$obj.click(function(event){
//event表示当前事件的事件对象
});
event的使用方式与原生JS事件中的event使用方式一致。
event.stopPropagation() : 阻止事件冒泡
event.offsetX:
event.offsetY:
event.target:获取事件源
jQuery 动画
1、基本显示 / 隐藏
语法:
$obj.show() / $obj.show(执行时间)
$obj.hide() / $obj.hide(执行时间)
2、滑动式显示 / 隐藏
语法:
显示:$obj.slideDown() / $obj.slideDown(执行时间)
隐藏:$obj.slideUp() / $obj.slideUp(执行时间)
3、淡入淡出式显示 / 隐藏
语法:
显示:$obj.fadeIn() / $obj.fadeIn(执行时间)
隐藏:$obj.fadeOut() / $obj.fadeOut(执行时间)
转载于:https://www.cnblogs.com/hxgoto/p/9411444.html
jQuery常用操作相关推荐
- Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关
常用Jquery操作:checkbox取值.select取值.radio选中.checkbox选中.select选中及其相关: 1.影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐 ...
- 【Java基础】 JQuery的常用操作
jQuery的常用操作 一.隐藏显示对象 id为test的元素的display修改成了"none",即隐藏了id为test的元素: $('#test').css('display' ...
- JavaWEB笔记13 jQuery介绍及常用操作
JavaWEB笔记13 jQuery介绍及常用操作 文章目录 JavaWEB笔记13 jQuery介绍及常用操作 一.jQuery简介: 1.jQuery介绍: 2.jQuery书写风格: 二.jQu ...
- jQuery—常用API(jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作)
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- jQuery常用事件处理
jQuery 是什么? jQuery 由 John Resig 创建于 2006 年初,对于任何使JavaScript 代码的程序员来说,它是一个非常有用的 JavaScript 库.无论您是刚刚接触 ...
- Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...
- JQuery常用的代码片段
2019独角兽企业重金招聘Python工程师标准>>> JQuery常用的代码片段 JQuery在当前众多网站开发中都有用到.他简易的操作以及对各个浏览器的兼容性,被广大的开发者一致 ...
- jQuery(一)—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...
- jquery常用技巧及常用方法列表
jquery常用技巧及常用方法列表 1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquer ...
最新文章
- Golang —— goroutine(协程)和channel(管道)
- jquery表单数据反序列化为字典
- java 异常机制_深入理解Java异常处理机制
- Linux 压缩和解压命令
- 网页图片处理代码全集整理
- 道友们,听说你们书荒啦?十几万本够吗?用python几步就可爬取
- 秦九韶算法递推公式_如何教会女友递归算法?
- 贵大计算机在职,贵州大学在职研究生招生信息网
- 引用父类成员的关键字是java_[Java] super关键字:引用父类成员
- 输入n求N*N矩阵,规定矩阵沿45度线递增
- C语言二级考试都是从题库抽取吗,c語言二級考試題庫_全國計算機等級考試二級C語言的考試題目都是從《C語言題庫》裡面抽取的題目嗎_淘題吧...
- WinForm程序利用sqlhelp连接SQLserver数据库
- Layui自定义表单校验规则
- 燕山大学高数AⅠ复习资料
- cad审图软件lisp_CAD审图标记最新版
- arch linux yaourt arm,在ARM設備(樹莓派、香蕉派)上為Arch Linux配置yaourt
- 【区块链108将】微数链林道坤:区块链有助于更好的发挥大数据价值
- 计算机专业留学法国哪个学校,法国留学读计算机专业去哪些学校?
- Web入门之VScode基本操作,文本框、输入框、单选框、多选框、列表、插入图片、插入按钮及跳转网页和页面
- Linux mem 1.3 分页寻址(Paging)机制详解
热门文章
- chrome浏览器设置网页快速到顶部和到底部的方法
- 360安全卫士电脑版_教你降服“流氓头子”正确打开360安全卫士的姿势,还你电脑流畅体验...
- git pull不同步_git回退版本,再返回最新分支git pull失败的解决经验
- win10无法更改计算机设置,Win10“无法保存ip设置,请检查一个或多个设置并重试”的解决方法...
- okhttp 连接池_okhttp 源码分析
- java与html关联_java-如何在HTML文件中搜索某些标签?
- php dump utfp,php pchart乱码-使用REST接口获取GeoServer中的...-结合 thinkPHP 分页写成自己分页类_169IT.COM...
- mysql锁表查询_Mysql数据库锁情况下开启备份导致数据库无法访问处理分享
- 光纤收发器的选购原则介绍
- 单片机、ARM、DSP与CPU之间的关系大揭秘