jQuery常用操作
jQuery加载
将获取元素的语句写到页面头部，会因为元素还没有加载而出错，使用$(document).ready(function(){})方法解决这个问题，它的速度比
原生的 window.onload 更快，即在DOM结构加载完毕后就会执行。
$(document).ready(function(){//...});
$(function(){//..});
选择器
基本选择器
- id选择器
$('#myId') - class选择器
$('.myClass') - 标签选择器
$("div") - 属性选择器
$("input[type='text']")(取到类型是text的input标签) - 组合选择器
| 方法 | 描述 |
|---|---|
| $('#item li span') | 选择id为item元素下的所有li下的span元素 |
| $("div.box") | 找到所有类名为box的div标签 |
| $("#id1, .className1") | 找到id为id和类名为className1的元素 |
| $("div>input") | 找到div标签里面的所有input子标签 |
| $("div+p") | 找到div后面的一个兄弟p标签 |
| $("div~p") | 找到div后面的所有兄弟p标签 |
条件选择器
- 找到所有后代中有p标签的div标签
$("div:has(p)")或者$('div').has('p') - 找到不包含myClass类的div标签
$("div:not(.myClass)")或者$('div').not('.myClass') - 找到所有后代中不含a标签的li标签
$("li:not(:has(a))") - 第一个
:first或者.first() - 最后一个
:last或者.last() - 索引等于index的那个元素
:eq(index)或者.eq() - 匹配所有大于给定索引值的元素
:gt(index) - 匹配所有小于给定索引值的元素
:lt(index) - 选择class等于myClass的div元素
$('div').filter('.myClass') - 匹配所有索引值为偶数的元素（包括0）
:even - 匹配所有索引值为奇数的元素
:odd
表单选择器
| :text | :password | :file | :radio |
| :checkbox | :submit | :reset | :button |
选中type为text的input标签$(":text")
表单属性
:enabled （激活） :disabled （禁用）
:checked （选中） :selected （选中）
-
找到可用的input标签
$("input:enabled") -
返回选中的标签
$("input:checked") -
返回select选中的标签
$(":selected") -
获取选中标签将其设置为非选中状态
$("input:checked").prop("checked",false)
选择器转移
下个元素
- 选择div元素后面紧挨的同辈元素
$('div').next() - 选择div元素后面所有的同辈元素
$('div').nextAll() - 获得div后面所有跟随的同胞元素，但不包括被选择器
$("div").nextUntil(".item")
上个元素
- 选择div元素前面紧挨的同辈元素
$('div').prev() - 选择div元素之前所有的同辈元素
$('div').prevAll() - 获得div前面所有跟随的同胞元素，但不包括被选择器
$("div").prevUntil(".item")
父级元素
$("#id").parent()
$("#id").parents() 查找当前元素的所有的父辈元素
$("#id").parentsUntil(".item") 查找当前元素的所有的父辈元素，直到遇到匹配到item类的元素
同级元素
选择div的同级元素 $('div').siblings()
子元素
选择div的所有子元素$('div').children()
查找后代元素
选择div内的class等于myClass的元素$('div').find('.myClass')等价于$("div .myClass")
样式操作
CSS样式
- 获取div的样式
$("div").css("width") - 设置div的样式
$("div").css("width","30px")
注意：选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。font-size采用驼峰命名 $("div").css({fontSize:"30px",color:"red"})
类名操作
-
添加类名addClass
为id为div的对象追加样式divClass2
$("#div").addClass("divClass2") -
移除类名removeClass
移除id为div的对象的class名为divClass的样式
$("#div").removeClass("divClass")移除多个样式
$("#div").removeClass("divClass divClass2") -
切换类名toggleClass
切换类名，如果有就移除item，如果没有就添加item
$("#div").toggleClass("item")
获取尺寸及位置
尺寸
- 获取元素宽和高
width()、height() - 获取元素宽和高，包括padding的width和height
innerWidth()、innerHeight() - 获取元素宽和高，包括padding和border的width和height
outerWidth()、outerHeight() - 获取元素宽和高，包括padding和border以及margin的width和height
outerWidth(true)、outerHeight(true)
位置
- 获取元素相对偏移或设置元素位置
offset() - 获取元素相对父元素的偏移
position() - 获取元素相对滚动条顶部的偏移
scrollTop() - 获取元素相对滚动条左侧的偏移
scrollLeft() - 获取页面滚动距离
$(document).scrollTop() - 获取窗口滚动距离
$(window).scrollTop()
返回顶部案例
<div class="back_top">返回顶部</div>
<script type="text/javascript">
$(document).ready(function() {
//窗口滚动事件
$(window).scroll(function() {
var sc=$(window).scrollTop();
if(sc>200){
$(".back_top").css("display","block");
}
else{
$(".back_top").css("display","none");
}
});
$(".back_top").click(function(){
// var sc=$(window).scrollTop();
// 动画效果
$("body,html").animate({scrollTop:0},500);
});
});
</script>
文本操作
文本
获取所有匹配元素的内容text()
设置所有匹配元素的内容text(值)
html
取得第一个匹配元素的html html()
val值
- 获取第一个匹配元素的当前value值
val() - 设置所有匹配元素的value值
val(值) - 设置多选的checkbox、多选select的值
val([val1, val2])
常用于input标签值的获取和修改
属性操作
attr() (attribute属性)
- 获取第一个匹配的属性
attr(k) - 修改所有匹配元素属性
attr(k,v) - 为所有匹配元素设置多个属性值
attr({k1: v1, k2:v2}) - 从每一个匹配的元素中删除一个属性
removeAttr(k)
prop()(property属性)
- 获取属性
prop(k) - 修改属性
prop(k，v) - 移除属性
removeProp(k)
attr()和prop()区别
prop()是获取标签原始的属性（如，img标签上的src属性），不能自定义属性。
attr()是获取标签上现有的属性，也可以自定义属性。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
元素节点操作
创建节点
var oDiv1=$('<div>')
var oDiv2=$('<div>这是一个新的元素</div>')
添加节点
-
内部添加
-
在现存元素的内部，从后面插入元素
$(父节点)append(子节点)
$(子节点)appendTo(父节点) -
在现存元素的内部，从前面插入元素
$(父节点).prepend(子节点)
$(子节点)prependTo(父节点)
-
-
外部添加
-
在现存元素的外部，从后面插入元素
把b放到a的后面
$(a).after(b)或者$(b).insertAfter(a) -
在现存元素的外部，从前面插入元素
把b放到a的前面
$(a).before(b)或者$(b).insertBefore(a)
-
删除节点
- 删除被选元素及其子元素
remove() - 删除被选元素的子元素
empty()
替换节点
- $(旧节点).replaceWith(新节点)
- $(新节点).replaceAll(旧节点)
克隆节点clone()
clone(true)，加参数表示克隆节点的同时也克隆事件
jquery循环和data()
each()
对选择的对象集合分别进行操作，需要用到jquery循环操作。
arr = [11,22,33,44]
$.each(arr,function(i, v){
console.log(i, v);//index是索引，value是每次循环的具体元素。
})
//结果: 0,11 1,22 2,33 3,44
$(function(){
$('.list li').each(function(i){
$(this).html(i);
})
})
注意：如果对jQuery对象进行相同的操作时，不需要使用.each()方法。在遍历过程中可以使用 return false提前结束each循环。
data()
.data(key, value)
在匹配的元素上存储任意相关数据。
$("#div1").data("temp",true);将id为div1的标签添加数据temp，值为true。
.data(key)
获取匹配元素上的数据
$("#div1").data("temp");获取id为div1的标签上的数据temp，返回true。
.removeData(key)
移除存放在元素上的数据
$("#div1").removeData("temp"); 移除元素上temp对应的数据
data()用途: 可在标签上存储全局变量，这样不会被其它函数修改。
jQuery 事件
常用事件
| 方法 | 描述 |
|---|---|
| focus() | $(selector).focus(function)，元素获得焦点时触发 |
| blur() | $(selector).blur(function)，元素失去焦点时触发 |
| click() | $(selector).click(function)，单击元素时，发生 click 事件 |
| change() | $(selector).change(function)，元素的值改变时发生（仅适用于表单字段） |
| keydown() | $(selector).keydown(function)，键按下的过程 |
| keyup() | $(selector).keyup(function)，键被松开 |
| hover() | $(selector).hover(inFunction,outFunction)，鼠标指针悬停在被选元素上时要运行的两个函数 |
| input() | 该事件在 <input> 或 <textarea> 元素的值发生改变时触发 |
| on() | $(selector).on(event,childSelector(子选择器,可选),function)，添加事件处理程序,适用于当前及未来的元素(如创建的新元素) |
| off() | $(selector).off(event,selector(可选),function(可选),map)，移除通过 on() 方法添加的事件处理程序 |
on()绑定事件
on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
$(selector).on(event,childSelector(子选择器,可选),function)
$("table").on("click",".update",function () {...})
//绑定多个事件可以在事件后加空格
$("input").on('input blur',function() {...})
注意：像click、keydown等事件，都可以使用.on()方法来绑定事件，但是hover事件就不能用.on()方法来绑定了。
off()移除绑定
off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。
$(selector).off(event,selector(可选),function(可选),map
移除button的点击事件 $("button").off("click");
鼠标事件案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<title>鼠标事件</title>
</head>
<body>
<div class="box" style="width: 200px;height: 200px;border: 1px solid;"></div>
<p></p><span></span>
<script>
//鼠标移入事件
$(".box").on("mouseover",function () {
$(this).css('background','red');
$("p").text("鼠标移入");
})
//鼠标移出事件
$(".box").on("mouseout",function () {
$(this).css('background','green');
$("p").text("鼠标移出");
})
//鼠标移动事件
//e.clientX， ev.clientY来获取相对于窗口的鼠标位置
//e.pageX,ev.pageY来获取相对于文档的坐标
$(".box").on("mousemove",function (e) {
var x = e.clientX;
var y = e.clientY;
$("span").text("鼠标移动：X="+x+" Y="+y)
})
</script>
</body>
</html>
事件冒泡
当子元素事件触发时，会自动向父元素传递事件，如果父元素有同类型事件，则会自动触发，从而导致页面的混乱。
阻止事件冒泡 event.stopPropagation()
<body>
<div class="item1">父元素
<div class="item2">子元素</div>
</div>
<script>
/*事件的冒泡 */
$('.item1').click(function(event) {
$('.item1').css('background','blue')
event.stopPropagation();
});
$('.item2').click(function(event) {
$('.item2').css('background','red')
});</script>
</body>
阻止默认行为 event.preventDefault()
// a标签单击时，阻止自动跳转
$('a').click(function(event){
alert('阻止默认行为');
event.preventDefault();
})
把阻止冒泡和阻止默认行为合并起来写，合并写法可以用return false;
事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过父标签去捕获子标签的事件。
优点：事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
//1.普通绑定
$ali = $('#list li');
// $ali会默认绑定元素个数的click事件
$ali.click(function() {
$(this).css({background:'red'});
});
})
//2.事件委托绑定
$list = $('#list');
$list.on('li', 'click', function() {
//$(this)是委托的子元素li
$(this).css({background:'red'});
});
</script>
jQuery效果
animate()动画
$(selector).animate({params},speed,callback);
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},1000);
});
fadeIn() 淡入
$(selector).fadeIn(speed,callback);
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut() 淡出
$(selector).fadeOut(speed,callback);
fadeToggle() 切换淡入淡出
$(selector).fadeToggle(speed,callback);
fadeTo()透明度
$(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){
$("#div1").fadeTo("slow",0.2);
});
slideDown() 向下滑动
$(selector).slideDown(speed,callback);
slideUp() 向上滑动
$(selector).slideUp(speed,callback);
slideToggle() 向上或向下滑动切换
$(selector).slideToggle(speed,callback);
jQuery.ajax()
ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是 “异步的 Javascript 和 XML”。即使用 Javascript 语言与服务器进行异步交互，传输的数据为 XML（当然，传输的数据不只是 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件， 无须刷新整个页面，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
ajax请求格式
$.ajax({
url: "/user",
type: "POST",
traditional: "true",//设置traditional 为true阻止深度序列化
data: { name: "John", location: "Boston" },
dataType: "json",
success: function (data) {
//...
},
error: function (data) {
//alert( "Request failed: " + data );
}
});
url 一个包含发送请求的URL字符串.
type (默认: 'GET')method选项的别名。jQuery 1.9.0 之前的版本，需要使用type选项。
data 一个普通对象或字符串，通过请求发送给服务器。
success 当请求成功后执行的回调函数。如果提供dataType选项，那么这个success选项是必须的。
dataType 从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, text，html）。
简化格式
get请求
$.get("test.php",
function(data){
//..
}, "json");
post请求
$.post( "user/login",
{ username:$("#username").val(),
password:$("#password").val(),
},
function (data) {
if (!data.flag) {
//登录失败
}else{
//登陆成功
}
},"json");
serialize()
描述：将用作提交的表单元素的值编译成字符串，用于 Ajax 请求。
$("form").serialize();返回值：String
注意: 只有 "successful controls"可以被序列化成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 name 属性。此外，复选框（checkbox）和单选按钮（radio）(input 类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。
