jQuery常用方法和练习例子

要点：

1、jQuery方法内置循环:

$('div').css('backgroundColor','red'):给所有DIV标签添加红色背景

2、this出现在jQuery的function中，代表循环时，当前正在处理的DOM对象

3、$(this)，把当前DOM对象转换在JQuery，以便使用jQuery方法

4、隐式条件判断语句：

var result=条件表达式?真返回值:假返回值;

5、each(function) 对象的每个元素都做操作。

收藏：jQuery样式。https://www.layui.com/demo/rate.html

常用方法：

1、筛选器：

next('筛选条件') 当前的下一个

nextAll('筛选条件') 当前的后面所有

nextUntil('筛选条件') 从下一个，到满足'筛选条件'的前一个标签，

prev('筛选条件') 当前的上一个

prevAll('筛选条件') 当前位置前面的所有同级标签

prevUntil('筛选条件') 从上一个，到满足‘筛选条件’的前一个标签

parent('筛选条件') 父标签

parents('筛选条件') 向上一直找，直到html

parentsUntil('筛选条件') 向上一直找到'满足筛选条件的标签'

children('筛选条件') 子标签

siblings('筛选条件') 除自已外，其它兄弟标签

find('筛选条件') 遍历自已包含的所有标签，找到‘符合条件的所有标签’

first() 结果里的第一个

last() 结果里的最后一个

eq(数值)/ eq('数值') 结果的表列里，第几个值

2、内容方法：

text() 取值/赋值，无参数，获取文本内容；text('this a text'),赋值

html() 取值/赋值，无参数，获取文本内容；text('<p>this is a html</p>'),赋值

val() input标签，取值/赋值，无参数，获取value；val('value新值'),赋值。jQuery版本3以前，checkbox和radio会出现不同步，必须使用prop

prop(属性，值) 设置或返回被选元素的属性和值。使用字典同时多值，设置：prop('checked','checked')，获取属性值：prop('checked')，结果undefine，代表没有此属性。

attr(属性，值) 设置被选元素的属性和值。可以接受字典值。

prop与attr区别：prop 对于HTML元素本身就带有的固有属性 attr 对于HTML元素我们自定义的加在标签中的属性。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

$("img").attr("width",function(n,v){ \\n当前对象在筛选器里的索引，v是获取到width的值。

return v-50;

});

3、样式方法：

hasClass('样式名') 判断是否包含样式名

addClass('样式名'): 添加calss样式

removeClass('样式名'): 删除class样式

toggleClass('样式名'): 不存在则添加，存在则删除

4、文档处理：

append(htmlstring) :在指定标签内部的最后添加内容

prepend(htmlstring):在指定标签内部的最前面添加内容

after(htmlstring):在指定标签结束符后，外面添加

before(htmlstring):在指定标签开始符前，外面添加

remove()：删除当前元素

empty():清空所有子元素

clone()：返回复制的元素html

//添加

$('#s1').click(function(){

var s='<li>我是新来的</li>';

$('#uli').after(s)

})

//remove()

$('#r1').click(function(){

$('#uli').remove();)}

//empty();清空所有子元素

$('#e1').click(function(){

$('#uli').empty();

})

//clone，复制id=uli的元素，并追加到body

$('body').append($('#uli').clone())

5、鼠标坐标

scrollTop(值) 设置/获取当前对象的滚动条上下位置。

scrollLeft(值) 设置/获取当前对象的滚动务左右位置。

offset().left 获取元素左上角的当前X坐标

offset().top 获取元素左上角的当前Y坐标

offset({left:0,top:0}) 设置当前元素的坐标

event.x 获取鼠标当前X坐标

event.y 获取鼠标当前Y坐标

$(document.body).mousemove(function(){

$('#xx').text(event.x);

$('#yy').text(event.y);

})

$('#divmove').offset({left:100,top:100})

6、jQuery绑定四种事件。

直接绑定:.click

bind绑定：

$('c1').bind('click',function(){....})

delegate/undelegate绑定：在jQuery1.7中 .delegate()已被.on()取代

$('c1').delegate('a','click',function(){ .... })

$( elements ).delegate( selector, events, data, handler );

on/off绑定

$( elements ).on( events, [selector], data, handler );

$('c1').on('click',function (){...})

<style>

.d1{

height:300px;

width:300px;

border:1px solid sandybrown;

}

.d2{

height:200px;

width:200px;

margin:40px 40px;

border:1px solid rebeccapurple;

}

</style>

</div>

$('.d1').on('click','span',function(){

alert($(this).text())

})

</script>

7、元素高度和宽度：

image.png

height/width:获取/设置元素高度/宽度-内容高、宽

innerHeight/innerWidth:获取/设置元素高度/宽度-内容高\宽+padding

outerHeight/outerWidth:获取/设置元素高度/宽度-内容高\宽+padding+border

outerHeight(true)/outerWidth(true):获取/设置元素高度/宽度-内容高\宽+padding+border+margin

<style>

#out{

height:300px;

width:300px;

border:10px solid darkred;

padding:20px;

}

#in{

height:100px;

width:100px;

border:10px solid rebeccapurple;

padding:5px;

margin-top:30px;

}

</style>

lalalalala

</span>

</div>

var height_in=$('#in').width();

t="height:"+height_in+'<br>';

height_in=$('#in').innerWidth();

t=t+"height:"+height_in+'<br>';

height_in=$('#in').outerHeight();

t=t+"height:"+height_in+'<br>';

height_in=$('#in').outerHeight(true);

t=t+"height:"+height_in+'<br>';

$('#nei').html(t);

</script>

8、return false阻止事件发生

以下程序，不跳转到href这个网址

</div>

function doNot(){

alert($('a').text());

return false;

}

</script>

9、jquery扩展

.extend

.fn.extend

1、左侧弹出菜单，点击出现子菜单，其它隐藏

HTML

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

jQuery:

$(document).ready(function (){$('.bg').next().hide()}); //文档加载完隐藏所有标签

$('.bg').click(function(){$(this).next().toggle().siblings('ul').hide()}) //点击展开，再点隐藏效果，链式编程。

</script>

2、弹出窗口,窗口其它元素不可操作。点叉关闭

CSS样式

.header-menu{

display:inline-block;

margin-right:20px;

height:40px;

}

.zhezhao{

display:none;

position:fixed;

left:0;

top:0;

right:0;

bottom:0;

background-color:gray;

z-index:8;

opacity:0.7;

}

.regedit{

display:none;

width:400px;

height:600px;

position:fixed;

background:white;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-300px;

z-index:9;

}

.login{

display:none;

width:400px;

height:400px;

position:fixed;

background:white;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-300px;

z-index:9;

}

.divouter{

width:100%;

background:gray;

text-align:right;

}

.close_flag{

padding-right:10px;

padding-top:10px;

width:30px;

}

.show{

display:block;

}

HTML

</div>

</div>

</div>

jQuery

//显示注册/登陆框

$('.header-menu').click(function(){

$('.zhezhao').addClass('show');

var sh = $(this).attr('name'); //使用获取到的属性值进行二次定位，达到动态效果。

var s='.'+sh;

$(s).addClass('show');

})

//关闭显示/登陆框

$('.close_flag').click(function(){

$('.zhezhao').removeClass('show');

var hi=$(this).attr('name');

var h='.'+hi;

$(h).removeClass('show');

})

3、鼠标移入和移出背景变色：

HTML：

<style>

.header{

background-color:#1c97f5;

height:40px;

width:100%;

min-width:960px;

margin:0 auto;

line-height:40px;

text-align:right;

}

.header-menu{

display:inline-block;

margin-right:20px;

height:40px;

}

</style>

</div>

jQuery：

$('.header-menu').mouseover(function(i,v){$(this).css({'backgroundColor':'#2550aa','color':'white'})})

$('.header-menu').mouseout(function(i,v){$(this).css({'backgroundColor':'','color':''})})

4、TAB式菜单：

HTML

<style>

.tab_div{

background:gray;

height:30px;

width:100%;

}

.tab_div span{

color:white;

line-height:30px;

display:inline-block;

height:30px;

padding-right:10px;

padding-left:10px;

}

.tab_content{

display:none;

position:absolute;

background:#dde0e3;

width:100%;

top:52px;

bottom:0px;

}

.tab_over{

background-color:#4e5154;

}

</style>

</div>

</div>

jQuery

//tab菜单脚本，实现方法千千万~这里没有选择Addclass，因为class有前后定义的毛病~

$("[name='t1']").show()

$('.tab_div').children().mouseover(function(){

$(this).addClass('tab_over').siblings().removeClass('tab_over');

var d=$(this).addClass('tab_over').attr('id');

var n = "[name='"+d+"']"

$(n).show().siblings().each(function(){

$(this).hide()

})

});

//方案二：可以删除子菜单ID，省代码~更简洁~

$(document).ready(function(){

$(".tab_div").children().mouseover(function(i){

$(this).addClass('tab_over').siblings().removeClass('tab_over');

$('.tab_content').eq($(this).index()).show().siblings().hide();

})

5、点赞动态效果

html:

<style>

#zan{

position: relative;

width: 30px;

cursor:pointer;

}

.jiayi{

color:red;

position:absolute;

}

</style>

jQuery:

$(document).ready(function () {

$('#zan').click(function(){

var font_size=14;

var top=0;

var right=0;

var opacity=1;

var ta=document.createElement('span');

$(ta).addClass('jiayi');

$(ta).css('font-size',font_size+'px');

$(ta).css('top',top+'px');

$(ta).css('right',right+'px');

$(ta).css('opacity',opacity);

$(ta).text('+1');

$(this).append(ta);

var inter=setInterval(function(){

font_size+=1;

top-=2;

right-=2;

opacity-=0.1;

$(ta).css('font-size',font_size+'px');

$(ta).css('top',top+'px');

$(ta).css('right',right+'px');

$(ta).css('opacity',opacity);

if (opacity<0){

$(ta).remove();

clearInterval(inter);

}

},20)

});

})

</script>

6、注册框判断是否为空，为空返回并提示：

本质是用return跳出函数，并给标签返回一个False。

HTML

</div>

</div>

<div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<div>

</div>

</div>

CSS

.tab_div span{

color:white;

line-height:30px;

display:inline-block;

height:30px;

padding-right:10px;

padding-left:10px;

background-color:#4e5154;

}

table{

width:100%

}

.close_flag{

padding-right:10px;

padding-top:10px;

width:30px;

}

.header-menu{

display:inline-block;

margin-right:20px;

height:40px;

}

.zhezhao{

display:none;

position:fixed;

left:0;

top:0;

right:0;

bottom:0;

background-color:gray;

z-index:8;

opacity:0.7;

}

.regedit{

display:none;

width:400px;

height:600px;

position:fixed;

background:white;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-300px;

z-index:9;

}

.login{

display:none;

width:400px;

height:400px;

position:fixed;

background:white;

left:50%;

top:50%;

margin-left:-200px;

margin-top:-300px;

z-index:9;

}

.divouter{

width:100%;

background:gray;

text-align:right;

}

.close_flag{

padding-right:10px;

padding-top:10px;

width:30px;

}

jQuery

($('#submit').click(function(){

var flag=true;

var dic=[];

$('#reg_tb').children().each(function(){

var input_box=$(this).children().eq(1).children().eq(0).val();

console.log(input_box);

if (input_box.length<=0) {

flag = false;

$(this).children().eq(2).html('<span style="color:red">*必填项</span>');

return flag;

}else{

dic.push(input_box);

$(this).children().eq(2).html('');

}

});

if (flag){

console.log(dic);

}

return flag;

}));

\\控制遮罩

$(document).ready(function (){$('.bg').next().hide()}); //文档加载完隐藏所有标签

$('.bg').click(function(){$(this).next().toggle().siblings('ul').hide()}) //点击展开，再点隐藏效果，链式编程。

$('.header-menu').mouseover(function(i,v){$(this).css({'backgroundColor':'#2550aa','color':'white'})})

$('.header-menu').mouseout(function(i,v){$(this).css({'backgroundColor':'','color':''})})

//显示注册/登陆框

$('.header-menu').click(function(){

$('.zhezhao').addClass('show');

var sh = $(this).attr('name');

var s='.'+sh;

$(s).addClass('show');

})

//关闭显示/登陆框

$('.close_flag').click(function(){

$('.zhezhao').removeClass('show');

var hi=$(this).attr('name');

var h='.'+hi;

$(h).removeClass('show');

})

深圳网站建设 www.sz886.com

最后编辑于：2019.08.21 10:56:09

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,752评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,100评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,244评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,099评论 1赞 286
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,210评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,307评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,346评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,133评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,546评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,849评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,019评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,702评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,331评论 3赞 319
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,030评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,260评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,871评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,898评论 2赞 351

jQuery常用方法和练习例子

推荐阅读更多精彩内容