jQuery常用方法和练习例子
要点:
成都创新互联是一家专注于网站设计制作、成都做网站与策划设计,襄阳网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:襄阳等地区。襄阳做网站价格咨询:13518219792
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('
this is a html
'),赋值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='
5、鼠标坐标
scrollTop(值) 设置/获取当前对象的滚动条上下位置。
scrollLeft(值) 设置/获取当前对象的滚动务左右位置。
offset().left 获取元素左上角的当前X坐标
offset().top 获取元素左上角的当前Y坐标
offset({left:0,top:0}) 设置当前元素的坐标
event.x 获取鼠标当前元素相对于父元素的X坐标
event.y 获取鼠标当前元素相对于父元素的Y坐标
event.clientX 获取鼠标相对于整个文档的X坐标,其中客户区域不包括窗口自身的控件和滚动条
event.clientY 获取鼠标相对于整个文档的Y坐标,其中客户区域不包括窗口自身的控件和滚动条
event.screenX 获取鼠标相对于整个显示屏的X坐标
event.screenY 获取鼠标相对于整个显示屏的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 (){...})
lala
7、元素高度和宽度:
height/width:获取/设置元素高度/宽度-内容高、宽
innerHeight/innerWidth:获取/设置元素高度/宽度-内容高\宽+padding
outerHeight/outerWidth:获取/设置元素高度/宽度-内容高\宽+padding+border
outerHeight(true)/outerWidth(true):获取/设置元素高度/宽度-内容高\宽+padding+border+margin
lalalalala
8、return false阻止事件发生
以下程序,不跳转到href这个网址
9、jquery扩展
.extend
.fn.extend
1、左侧弹出菜单,点击出现子菜单,其它隐藏
HTML
菜单一
- sub11
- sub12
- sub13
菜单二
- sub21
- sub22
- sub23
菜单三
- sub31
- sub32
- sub33
jQuery:
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
注册 登陆✖✖
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:
注册 登陆
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
标签一标签二标签三1111112222222333333
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:
赞
jQuery:
6、注册框判断是否为空,为空返回并提示:
本质是用return跳出函数,并给标签返回一个False。
HTML
注册 登陆✖
用户名: 密码: 确认密码: 111 邮箱: 电话: 爱好: ✖
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
当前文章:jQuery常用方法和练习例子
当前路径:http://pwwzsj.com/article/pipgdi.html