jQuery经常使用操做
jQuery
jQuery是一个轻量级的JS库，是一个被封装好的JS文件，提供了更为简便的元素操做方式，jQuery封装了DOM。css
使用jQuery
引入jQuery文件html
<scrtipt src='jquery-1.11.3.js'> </script>jquery
注意：引入必须放在其余jQuery操做以前。数组
jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现app
jQuery中所提供的全部操做都只针对jQuery对象，其余对象（DOM）没法使用ide
工厂函数 -- $()
想要获取jQuery对象，则必须使用工厂函数$()函数
在$()中容许传递一个选择器/DOM对象做为参数，$()可以将选择器和DOM对象所有封装成jQuery对象再进行返回动画
例子：this
<!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对象之间的转换spa
DOM对象不能使用jQuery提供的操做，反之一样。
一、将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>
二、将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对象所组成的数组
语法：$("选择器")
基本选择器
一、ID选择器
$("#id");
返回：返回页面中指定ID值的元素
二、类选择器
$(".className")
返回：页面中指定className的全部元素
三、元素选择器
$("element")
返回：页面中指定标记的全部元素
四、群组选择器 / 复合选择器
$("selector1,selector2,...")
返回：返回知足函数内全部选择器的函数们
层级选择器
一、$("selector1 selector2")
后代选择器
二、$("selector1>selector2")
子代选择器
三、$("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>
四、$("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>
基本过滤选择器
过滤选择器一般都会配合着其余的选择器一块儿使用
一、:first
只匹配一组元素中的第一个元素
$("p:first")
二、:last
只匹配一组元素中的最后一个元素
三、:not("selector")
在一组元素中，将知足selector选择器的元素排除出去
四、:odd
匹配 偶数行 元素(奇数下标)
五、:even
匹配 奇数行 元素(偶数下标)
六、:eq(index) -- equals
匹配 下标等于 index 的元素
七、:gt(index)
匹配 下标大于 index 的元素
八、:lt(index)
匹配 下标小于 index 的元素
属性过滤选择器
依托于html元素的属性来进行元素过滤的
一、[attribute]
做用：匹配包含指定属性的元素
ex:
div[id]:匹配具有id属性的div元素
二、[attribute=value]
做用：匹配attribute属性值为value的元素
ex:
input[type=text]
input[type=password]
三、[attribute!=value]
做用：匹配attribute属性值不是value的元素
四、[attribute^=value]
做用：匹配attribute属性值是以value字符开头的元素
ex:
p[class^=col]
五、[attribute$=value]
做用：匹配attribute属性值是以value字符结尾的元素
六、[attribute*=value]
做用：匹配attribute属性值中包含value字符的元素
子元素过滤选择器
一、:first-child
匹配属于其父元素中的首个子元素
二、:last-child
匹配属于其父元素中的最后一个子元素
三、:nth-child(n)
匹配属于其父元素中第n个子元素
四、jQuery操做DOM
基本操做
一、html()
做用：获取 或 设置 jQuery对象中的html内容
ex:
console.log($("#main").html());
$("#main").html("");
二、text()
做用：获取 或 设置 jQuery对象中的text内容
三、val()
做用：获取 或 设置 jQuery对象中的value值(表单控件)
四、属性操做
attr()
做用：读取 或 设置jQuery对象的属性值
ex:
$obj.attr("id");
获取 $obj 的id属性值
$obj.attr("id","main");
设置$obj对象的id属性值为main
removeAttr("attrName")
删除jQuery对象的attrName属性
ex:
$obj.removeAttr("class");
二、样式操做
一、attr()
$obj.attr("class","redBack");
二、addClass("className")
做用：将className 添加到元素的class值以后
ex:
$obj = $obj.addClass("c1");
$obj = $obj.addClass("c2");
连缀调用：
$obj.addClass("c1").addClass("c2");
三、removeClass("className")
若是无参的话，则清空类选择器
若是有参数的话，则删除对应的类选择器
ex:
$obj.removeClass("c1")
将c1类选择器从$obj移除出去
$obj.removeClass()
清空$obj的全部类选择器
四、toggleClass("className")
切换样式：
元素若是具有className选择器，则删除
元素若是没有className选择器，则添加
五、css("属性名")
$obj.css("width");
获取$obj对象的width属性值
六、css("属性名","属性值")
$obj.css("background-color","yellow");
设置$obj对象的background-color的属性值为yellow
七、css(JSON对象)
JSON对象：
是一种约束了格式的对象表现形式
JSON:JavaScript Object Notation
JSON对象的表示方式：
一、JSON对象必须使用{}括起来
二、使用键值对的方式来声明数据(表示属性和值)
三、全部的属性在使用时必须使用""括起来，值若是是字符串的话，也必须使用""括起来
四、属性和值之间使用:链接
五、多对属性和值之间使用 , 隔开
ex:
$obj.css({
"color":"red",
"font-size":"32px",
"float":"left"
});
遍历节点
一、children() / children("selector")
获取某jQuery对象的全部子元素 或 带有指定选择器的子元素
注意：只考虑子代元素，不考虑后代元素
二、next() / next("selector")
获取某jQuery对象的下一个兄弟元素 / 知足selector的下一个兄弟元素
三、prev() / prev("selector")
获取某jQuery对象的上一个兄弟元素 / 知足selector的上一个兄弟元素
四、siblings() / siblings(selector)
获取某jQuery对象的全部兄弟元素 / 知足selector的全部兄弟元素
五、find("selector")
查找知足selector选择器的全部后代元素
六、parent()
查找某jQuery对象的父元素
建立对象
语法：$("建立的标记")
ex:
一、建立一对div
var $div = $("<div></div>");
$div.html("动态建立的div");
$div.attr("id","container")
$div.css("color","red");
二、建立一对div
var $div = $("<div id='container' style='color:red;'>动态建立的div</div>");
插入元素
做用：将建立好的元素插入到网页中
一、内部插入
做为元素的子元素插入到网页中
$obj.append($new);
将$new元素插入到$obj元素中的最后一个子元素位置处(追加)
$obj.prepend($new);
将$new元素插入到$obj元素中的第一个子元素位置处
二、外部插入
做为元素的兄弟元素插入到网页中
$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树加载完成后就开始运行
} );
二、jQuery的事件绑定
方式1
$obj.bind("事件名称",事件处理函数);
ex:
$obj.bind("click",function(){
//事件的行为操做
console.log("... ....");
});
方式2
$obj.事件名称(function(){
//事件处理函数
});
ex:
$obj.click(function(){
//经过 this 来表示触发该事件的DOM对象
});
三、事件对象 - 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 动画
一、基本显示 / 隐藏
语法：
$obj.show() / $obj.show(执行时间)
$obj.hide() / $obj.hide(执行时间)
二、滑动式显示 / 隐藏
语法：
显示：$obj.slideDown() / $obj.slideDown(执行时间)
隐藏：$obj.slideUp() / $obj.slideUp(执行时间)
三、淡入淡出式显示 / 隐藏
语法：
显示：$obj.fadeIn() / $obj.fadeIn(执行时间)
隐藏：$obj.fadeOut() / $obj.fadeOut(执行时间)
- 1. 经常使用Jquery前端操做
- 2. jquery select 经常使用操做总结
- 3. jQuery操做CheckBox经常使用场景
- 4. JQuery DOM 经常使用操做汇总
- 5. sql经常使用操做（MySQL经常使用操做）
- 6. mysql经常使用操做
- 7. ssh经常使用操做
- 8. Git经常使用操做
- 9. R: 经常使用操做：
- 10. MySQL 经常使用操做
- 更多相关文章...
- • 一级缓存常用操作 - Hibernate教程
- • SQLite 常用函数 - SQLite教程
- • Composer 安装与使用
- • 常用的分布式事务解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 经常使用Jquery前端操做
- 2. jquery select 经常使用操做总结
- 3. jQuery操做CheckBox经常使用场景
- 4. JQuery DOM 经常使用操做汇总
- 5. sql经常使用操做（MySQL经常使用操做）
- 6. mysql经常使用操做
- 7. ssh经常使用操做
- 8. Git经常使用操做
- 9. R: 经常使用操做：
- 10. MySQL 经常使用操做