JQuery经典总结
1、jQuery介绍
jQuery是一个js框架(其实就是一个.js文件),它的特点是使用选择器查找要操作的节点,并且将这些节点封装成一个jQuery对象。封装的目的是为了更好地兼容不同的浏览器之间的差异,同时也会简化代码。
注:
选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。比如 $('#id');
2、jQuery基础
(1)jQuery编程的基本步骤
step1,引入jQuery.js文件
step2, 使用选择器查找要操作的节点
step3,调用jQuery对象的属性或者方法来操作相应的节点。
(2)jQuery对象与dom对象之间的转换
1)dom对象 --- > jQuery对象
var $obj = $(dom对象);
eg:var $d = $(div);
2)jQuery对象 ---- > dom对象
第一种方式: var obj = $obj.get(0);
第二种方式: var obj = $obj.get()[0];
JQuery经典总结
(3) jQuery与prototype如何同时使用?
因为jQuery与prototype都使用$函数,需要使用
var $a = jQuery.noConflict()将$函数改名为"$a"。
3、jQuery选择器 selector
1)、基本选择器 selector/a1.html
* ——>匹配所有元素
#id ——> 根据给定的ID匹配一个元素。
.class ——> 根据给定的类匹配元素。
element ——>根据给定的元素名匹配所有元素
selector1,selector2..selectorn ——>将每一个选择器匹配到的元素合并
后一起返回。
2)、层次选择器 selector/a2.html
select1 select2——>匹配select1下的所有儿子元素(不包含孙子元素)
select1>select2——>匹配select1下的所有子元素(包含孙子元素)
select1+select2——>匹配紧跟在select1后的第一个兄弟元素(同辈元素)
select1~select2——>匹配select1后的所有兄弟元素(及找到所有的同
辈元素)
3)、过滤选择器
a.基本过滤选择器 selector/ a3.html
:first——>获取第一个元素
:last——>获取第一个元素
:not(selector)——>获取去除给定元素后的所有匹配元素
:even——>匹配所有索引值为偶数的元素,从 0 开始计数
:odd——>匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index)——>匹配一个给定索引值的元素
:gt(index)——>匹配所有大于给定索引值的元素
:lt(index)——>匹配所有小于给定索引值的元素
JQuery经典总结
b.内容过滤选择器 selector/ a4.html
:contains(text)——>匹配包含给定文本的元素
:empty ——>匹配没有子元素且文本为空的元素 :has(selector)——>匹配含有选择器所匹配的元素的元素
:parent ——> 跟empty相反,即有子节点,或者内容不为空的节点。
c.可见性过滤选择器 selector/ a5.html
:hidden——>匹配所有不可见元素,或者type为hidden的元素
:visible——>匹配所有的可见元素
d.属性过滤选择器 selector/ a6.html
[attribute]——>匹配包含给定属性的元素
[attribute=value]——>匹配给定的属性是某个特定值的元素
[attribute!=value]——>匹配属性不等于特定值的元素。
e.子元素过滤选择器 selector/ a7.html
:nth-child(index/even/odd)——>匹配其父元素下的第N个子或奇
偶元素(即同辈中第N个元素)
:first-child——>匹配其父元素下第一个子元素
:last-child——>匹配其父元素下最后一个子元素
f.表单对象属性过滤选择器
:enabled——>匹配所有可用元素
:disabled——>匹配所有不可用元素
:checked——>匹配复选框、单选按钮中被选中的元素
:selected——>匹配所有选中的option元素
4)、表单选择器
:input——>匹配所有 input, textarea, select 和 button 元素
:text——>匹配所有的单行文本框
:pasword——>匹配所有密码框
:radio——>匹配所有单选按钮
:checkbox——>匹配所有复选框
:submit——>匹配所有提交按钮
:image——>匹配所有图像域
:reset——>匹配所有重置按钮
:button——>匹配所有按钮
:file——>匹配所有文件域
:hidden——> 匹配所有不可见元素,或者type为hidden的元素
4、dom操作
1)、查询 dom / d1.html
利用选择器找到要操作的节点之后,访问节点的html内容、text内容、
节点的值以及节点的属性值。除此之外,还可以修改这些值。
a, html() : 相当于innerHTML
b, text(): 获取div,p,span等元素内文本相当于innerText,
c, val():获取文本框text、下拉列表select或选择框checkbox的值
d, attr():获取或设置节点的属性值
2)、创建 dom / d2.html
$(html);
3)、插入节点
append():向每个匹配的元素内部追加内容,当做最后一个儿子
prepend():向每个匹配的元素内部前置内容。当做第一个儿子
after():在每个匹配的元素之后插入内容,当做后一个兄弟
before():在每个匹配的元素之前插入内容,当做前一个兄弟
eg:JQuery经典总结
var $obj = $('<div>首先是培养兴趣,然后是多写代码</div>');
$('body').append($obj);
也可以简化为
$('body').append('<div>首先是培养兴趣,然后是多写代码</div>');
4)、删除节点 dom / d3.html
remove():$('ul li:eq(1)').remove();
remove(selector):$('ul li').remove('#l1');
empty():清空节点:$('ul li:eq(1)').empty();
5)、复制节点 dom / d6.html
clone():不复制行为
clone(true):使复制的节点也具有行为
6)、属性操作 dom / d7.html
读取:attr(' '); $("img").attr("src");
设置: attr(' ',' ') $("img").attr(‘src’, ‘test.jpg’);
s('#d1').attr('value','font-size:40px;color:red;');
$('#form1 input:disabled').attr('disabled',false);
或者一次设置多个 attr({"":"","":""});
eg:$('div').attr({'class':'s1','style':'color:red;'});
删除:removeAttr(' ')
7)、样式操作 dom / d8.html
获取和设置: attr("class",""), attr("style","");
alert($('div').attr('class'));
$('div').attr('class','s1')
$('div').attr('style','color:blue;');
追加:addClass(''):$('div').addClass('s2 s3');
移除:removeClass('') :$('div').removeClass('s3');
或者removeClass('s1 s2')
或者removeClass()//会删除所有样式
切换样式:toggleClass:$('div').toggleClass('s3');
是否有某个样式 hasClass(''):alert($('div').hasClass('s3'));
读取css('')
设置css('','')或者css({'':'','':''})//设置多个样式
$('table tr:first').css('background-color','#cccccc');
$('table tr:first').css({'background-color':'#cccccc',’width’:’3px’});
8)、遍历节点 dom / d9.html
children()/children(selector):var $obj = $('#d0').children('div');
只考虑子元素,不考虑其它后代元素。
next(selector): 下一个兄弟$('#d2').next()
prev(selector):上一个兄弟$('#d2').prev()
siblings(selector):其它兄弟,
$('#d2').siblings(‘#id’)除#d2之外的其他兄弟节点
也可以写成:$(‘#id’).siblings()
parent():父节点,不是爷爷节点
find(selector): 从当前节点开始,查找所有后代,包括孙子。
5、如何将js代码与html分开(将数据与行为分离)
就上将形如<input type=”button” id=”b1” onclick=”fun();”/>改写为:
<input type=”button” id=”b1” />
$(function(){
$('#b1').click(function(){
//.........
});
});
的形式
window.onload : 当整个页面加载完毕,会产生load事件,就会执行绑订
的函数。
window.onload = function () {
var obj = document.getElementById("d1");
obj.onclick = function () {
obj.innerHTML = "hello java";
};
};
在使用jQuery时,可以使用如下的代码来实现js与html的分离:
$(function(){
//js代码: 这些js代码会在整个页面加载完毕之后
//执行。
});
eg:
$(function(){相当于window.onload = function ()
$('#b1').click(function(){
$('div').attr({'class':'s1','style':'color:red;'});
});
});
上面的代码等同于:
window.onload = function () {
$('#b1').get(0).onclick=function(){
$('div').attr({'class':'s1','style':'color:red;'});
}
}
6、事件处理机制 event
1)、事件绑订 event/e1.html
bind(type,fn)
eg:
$(function(){
$('#d1').bind('click',function(){
$(this).html('hello java');
});
});
2)、绑订方式的简写形式
上个列子可以简写为:
$(function(){
$('#d1').click(function(){
$(this).html('hello java');
});
});
3)、合成事件 event/e2.html e3.html
hover(mouseenter,leave) : 模拟光标悬停事件,区别于CSS中的伪
类
$('.s1').hover(function(){
$(this).addClass('s2');
},function(){
$(this).removeClass('s2');
});
相当于以下连个函数的合成:
$('.s1').mouseenter(function(){
$(this).addClass('s2');
});
$('.s1').mouseleave(function(){
$(this).removeClass('s2');
});
上面的mouseenter和mouseleave两个函数可以合并为:
$('.s1').mouseenter(function(){
$(this).addClass('s2');
}).mouseleave(function(){
$(this).removeClass('s2');
});
toggle(fn1,fn2...):模拟鼠标连续单击事件
$('#a1').toggle(function(){
$('#d1').show('slow');
},function(){
$('#d1').hide('slow');
});
4)、事件冒泡
(1)获得事件对象 event/e4.html e5.html e6.html
click(function(e){
});
function f1(e){
依据事件对象获得事件源(即哪一个节点产生了该事件,返回的是原
始的DOM节点),其中e不再是DOM对象,而是封装之后的JQuery
对象。
var srcObj = e.srcElement; //ie
var srcObj = e.target; //firefox,chrome
var srcObj = e.srcElement || e.target; //同时兼容ie,firefox,chrome
alert(srcObj.innerHTML);
依据事件对象获得鼠标点击的坐标(相对于屏幕)
alert(e.clientX + ':' + e.clientY);
}
(2)事件对象的属性 event/e6.html
event.type
event.target:返回事件源(是dom对象)
event.pageX/pageY 获得相对于当前浏览器页面的坐标
(3)停止冒泡 event / e7.html
event.stopPropagation()
function clickA(e){
alert("你点击了一个链接");
//取消冒泡
e.stopPropagation();
}
function clickDiv(e){
alert("你点击了一个Div");
}
上列中,链接处于div中,当取消冒泡后,单击链接便不会触发div上面
onlick事件的执行,上例中的输出结果为:你点击了一个链接
(4)停止默认行为 event / e8.html
event.preventDefault()
$(function(){
$('#d1').click(function(e){
var flag = confirm('确定删除吗');
if(!flag){
e.preventDefault();
}
});
});
设置停止了默认行为后,表单提交按钮便不会自动提交了。相当于:
<input type=”submit” id=”d1” name=”username”
onclick=”return fonfirm(‘确定要删除吗’)”/>
5)、模拟操作 event / e9.html
trigger('click')
$(function(){
$('#b1').click(function(){
//$('#username').trigger('focus');
$('#username').focus();
});
});
上列模拟了文本框控件获得焦点的行为,当点击按钮后,文本框便获得了焦点,表现为文本框内有光标闪动。
mouseenter和mouseover效果一样,可以互换使用
mouseout和mouseleave效果一样,可以互换使用
7、动画 animate
1)、show(), hide() a1.html
作用:通过同时改变元素的宽度与高度来实现显示和隐藏的效果。
语法:
show(速度,callback);
速度: 'slow','normal','fast' / 800(毫秒)
callback: 在动画执行完毕之后,会执行这个函数
$(function(){
$('#btn1').click(function(){
$('#sp1').hide/show(500);
$('#sp1').hide/show(500,function(){alert("H");});
});
});
2)、fadeIn() fadeOut(): animate / a2.html
作用, 通过改变元素的不透明度来实现显示和隐藏的效果。
语法: fadeIn/fadeOut(速度,callback);
$(function(){
$('#btn1').click(function(){
$('#sp1').fadeIn/fadeOut(500);
$('#sp1').fadeIn/fadeOut(500,function(){alert("H");});
});
});
3)、slideUp() slideDown() : amimate/a1.html
作用:通过改变元素的高度来实现显示和隐藏的效果。
语法: slideUp(速度,callback);
$(function(){
$('#a1').toggle(function(){
$('#d1').slideDown('slow');
},function(){
$('#d1').slideUp('slow');
});
});
4)、自定义动画 animate(params,speed,callback) a3.html
语法: JQuery经典总结
params:是一个js对象,描述了动画执行结束时元素的样式,
比如:
{'top':'600px','left':'200px'}
speed: 毫秒
callback: 在动画执行完毕之后,会执行这个函数
$(this).animate({'left':'500px'},4000);
$(this).animate({'top':'250px'},2000).fadeOut('slow');
8、类数组的操作
jQuery选择器返回的是一个jQuery对象(该对象可能包括了多个dom
节点),如果要对这些dom节点分别做不同的处理,就需要去遍历,需要
调用jQuery对象提供的一些方法或者属性,称之为类数组的操作。
类数组就是DOM节点数组
1)each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象,
$(this)代表被迭代的jQuery对象。(i根据实际情况选择要
还是不要)。
2)eq(index):返回index+1位置处的jQuery对象
3)index(obj):返回下标,其中obj可以是dom对象或者jQuery对象。
4)length属性:dom对象的个数
5)get():返回dom对象组成的数组
6)get(index):返回index+1个dom对象。
eg1:
//把我的好友中所有的用户放到用户列表中
$('#b4').click(function(){
$('#s2 option').each(function(){
$('#s1').append($(this));
});
});
eg2:
$(function(){
$('#b1').click(function(){
var $obj = $('ul li');
$obj.each(function(i){
//i:表示正在被访问的那个节点的下标,
//下标从0开始
if(i == 0){
$(this).css('font-size','50px');
}else if(i==1){
$(this).css('font-style','italic');
}else{
$(this).css('color','red').css('font-size','80px');
}
});
});
9、jQuery对ajax编程的支持
(1)load方法:
作用:是将服务器返回的数据直接添加到符合要求的节点之上,相当于
obj.innerHTML = 返回的数据。
语法:
$obj.load(请求地址,[请求参数]);
其中,请求参数可以有两种形式:
第一种:请求字符串,比如 "username=zs",或者
“username=zs&age=22"。
第二种:javascript对象,比如
{'username':'zs'},或者{'username':'zs','age':22}
load方法如果没有请求参数,会发送get请求,如果有请求参数,会发送
post请求。
(2)$.get方法
作用:向服务器发送get请求
语法: $.get(url,[data],[callback],[type]):
url:请求地址
data:请求参数,可以是请求字符串或者是js对象。
格式为:{key,value}
eg:{"name":$("#cost_name").val()}
callback: 是一个回调函数,用于处理服务器返回的数据,其格式
function(data,statusText),
data是服务器返回的数据,如果服务器返回的是json字符串,$.get
方法会自动将其转换成一个js对象或者js对象组成的数组。
statusText是服务器处理的状态。
type:服务器返回的数据类型:
text : 文本字符串
html : html内容
xml: 返回dom兼容的xml对象
json: json字符串
script: javascript脚本
eg:
function quoto(){
$('#tb1').empty();
$.get('quoto.do?' + Math.random(),function(data){
//data:服务器返回的数据, 如果服务器
//返回的是json字符串,$.get方法会自动
//将其转换成一个js对象或者js对象组成的数组。
for(i=0;i<data.length;i++){
$('#tb1').append(
'<tr><td>' + data[i].code
+'</td><td> '+ data[i].name
+ '</td><td> ' + data[i].price
+ '</td></tr>');
}
},'json');
}
$.post()格式同上。
$.put(url,[data],[callback],[type]):
//焦点离开资费名输入框进行ajax检测
$(function(){
$("#name").blur(function(){
var name = $(this).val();
//发送ajax请求
$.post(
"validFeeName.action",//请求url
{"name":name},//提交参数
function(data){//data是服务器返回的ok值
if(data){//如果返回true $("#name_error").removeClass("error_msg")
.html("资费名称可用");
}else{//如果返回false
$("#name_error").addClass("error_msg")
.html("资费名称重复");
}
}
,"text");
});
});
(3)$.ajax方法
作用:可以设置不同的参数,控制ajax对象向服务器发请求。
语法:
$.ajax(options):
其中,options是一个形如
{key1:value1,key2,value2...}的js对象,
用于指定发送请求的选项。
选项参数如下:
url(string):请求地址
type(string):GET/POST
data(object/string):请求参数,可以是请求字符串或者js对象
dataType(string) :服务器返回的数据类型
success(function):请求成功后调用的回调函数,有两个参数:
function(data,textStatus),其中,
data是服务器返回的数据,
textStatus 描述状态的字符串。
error(function):请求失败时调用的函数,有三个参数
function(xhr,textStatus,errorThrown),
xhr: ajax对象,即XMLHttpRequest对象。
textStatus和errorThrown,jQuery保证其中的一个
参数可以获得异常的描述。
async: true(缺省)/false
eg:
$(function(){
$('#s1').change(function(){
//先清空表格
$('#tb1').empty();
$.ajax({
'url':'carInfo.do',
'type':'post',
'data':'carName=' + $('#s1').val(),
'dataType':'xml',
'success':function(data){
//data:服务器返回的数据如果服务器返回的是xml,
浏览器不一样,则生成的dom树的结果也不一样,
为了方便解析dom树,一般 我们使用$()函数将其
转换成jQuery对象,然后进行遍历或者查找。
$('#tb1').append(
'<tr><td>价格:' + $(data).find('price').text()
+ ' 车重:' + $(data).find('weight').text()
+ '</td><td>门数:'
+ $(data).find('doors').text()
+ ' 长宽高:' + $(data).find('size').text()
+ '</td><td>排量:' + $(data).find('vol').text()
+ ' 加速性能:'
+ $(data).find('speed').text() + '</td></tr>');
$('#d2').show();
setTimeout(function(){
$('#d2').fadeOut('slow');
},3000);
},
'error':function(){
alert('服务暂时不可用');
}
});
});
});
练习1:商品热卖
练习2:自动完成
step1,服务器端代码
服务器会返回一个类似于以下的字符串:
小米,小米2,小说,小米官网
step2,
分解服务器返回的字符串,并且将
其添加到文本输入框的下面。
每一个选项要绑订click事件(将用户
选中的选项复制到文本输入框)和mouseenter
事件(加亮对应的选项)处理代码。
keyup事件:
注意:keyup事件在某些浏览器中,在切换中文输入法时,会有
bug,需要我们自己解决,如果发现有这个问题,需要使用如下
代码:
var eventname = 'input';
if(navigator.userAgent.indexOf('MSIE')!=-1){
eventname = 'propertychange';
}
$('#key').bind(eventname,fn);
10、给JQuery添加插件
可以把JQuery看做一个类,给JQuery添加插件就是给Jquery类中添加方法。相当于在Java中给String类增加方法(当然是不可以增加的),这样就可以用JQuery对象直接调用了,方便多次使用。
使用场合:使用频率高的方法,
JQuery经典总结
eg:下面代码的作用是对指定的文本框(errorContent)进行非空验证,并输出(errorMsg)验证提示信息。
写法一:
$.fn.required = function(errorContent, errorMsg) {
var val = $(this).val();
if (val != null && val.length > 0) {
$(errorContent).text("");
return true;
} else {
$(errorContent).text(errorMsg);
return false;
}
}
写法二:
;(function($){
$.fn.extend({
rangeLength:function(errorContent, errorMsg){
var val = $(this).val();
if (val != null && val.length > 0) {
$(errorContent).text("");
return true;
} else {
$(errorContent).text(errorMsg);
return false;
}
}
});
})(jQuery)
<script type="text/javascript">
$(function() {
$("#submit").bind("click",function(){
var b1 = $("#adminCode")
.required($("#error_adminCode"),"账号必须填写");
var b2 = $("#password")
.required($("#error_password"),"密码必须填写")
if(b1 && b3) {
$("#loginForm").submit();
}
});
});
</script>
JQuery经典总结的更多相关文章
- 基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <center> <h1>j ...
- jQuery经典面试题及答案精选(转)
jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...
- jQuery经典面试题及答案精选
jQuery是一款非常流行的Javascript框架,如果你想要从事Web前端开发这个岗位,那么jQuery是你必须掌握而且能够熟练应用的一门技术.本文整理了一些关于jQuery的经典面试题及答案,分 ...
- JQuery经典小例子——可编辑的表格
可编辑的表格: 屏幕剪辑的捕获时间: 2015/8/14 9:16 HTML代码为: <!DOCTYPE html> <htmlxmlns="http://www.w3.o ...
- jQuery经典面试题及答案精选[转载]
问题:jQuery的美元符号$有什么作用? 回答:其实美元符号$只是”jQuery”的别名,它是jQuery的选择器,如下代码: $(document).ready(function(){ }); 当 ...
- 无缝滚动 jQuery经典代码 (收藏)
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4 ...
- jQuery经典面试题及答案精选[转]
这两天有个面试,把这些记在这里. 问题:jQuery的美元符号$有什么作用? 回答:其实美元符号$只是”jQuery”的别名,它是jQuery的选择器,如下代码: $(document).ready( ...
- jQuery经典学习笔记
1.层次选择器: $("div> span") 获取div下的span元素 $(".one + div") 获取class为one的下一个div 2)过滤 ...
- jQuery经典案例
示例1:鼠标点击左侧菜单实现打开和关闭功能: html及css代码部分: <!DOCTYPE html> <html lang="en"> <head ...
随机推荐
- array_filter 过滤一维中空数组,数组的序列不变
<?php header('Content-type:text;charset=utf8'); $str = "%11111%22222%333333%"; $arr = e ...
- shell 脚本判断linux 的发行版本
原文vi ./Get_Dist_Name.sh #!/bin/bash Get_Dist_Name() { if grep -Eqii "CentOS" /etc/issue || ...
- go defer注意点,很容易出错的!!!
1:defer是在return之前执行的 函数返回的过程是这样的:先给返回值赋值,然后调用defer表达式,最后才是返回到调用函数中 返回值 = xxx 调用defer函数 空的return fun ...
- 使用Eclipse进行SWT编程
使用Eclipse进行SWT编程 1. 为什么要使用SWT? SWT是IBM开发一套跨平台的GUI开发框架.为什么IBM要创建另一种GUI呢?为什么他们不使用现有的JavaGUI框架呢?要回答这些问题 ...
- (转)javap 指令集
栈和局部变量操作将常量压入栈的指令aconst_null 将null对象引用压入栈iconst_m1 将int类型常量-1压入栈iconst_0 将int类型常量0压入栈iconst_1 将int类型 ...
- [DeeplearningAI笔记]序列模型3.7-3.8注意力模型
5.3序列模型与注意力机制 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.7注意力模型直观理解Attention model intuition 长序列问题 The problem of ...
- Material Design 之 TabLayout 使用
记录 (非常详细的 TabLayout用法), 学习 http://www.jianshu.com/p/13f334eb16ce
- Struts2版本更新报错:>>> ActionContextCleanUp <<< is deprecated! Please use the new filters!
因低版本Struts2存在漏洞,更新为较新的版本.启动时,报如下警告信息: ************************************************************** ...
- [ERROR] Too many connections 尚未解决
[ERROR] - com.alibaba.druid.support.logging.Log4j2Impl.error(Log4j2Impl.java:53) - create connection ...
- 基本控件文档-UIView属性---iOS-Apple苹果官方文档翻译
本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/Ch ...