开发者社区> yichudu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JQuery (简化dom操作)

简介: 简介 JQuery本质是一个js文件,里面是js常用功能的封装。比如绑定事件,修改内容,修改样式等。 $()是一个函数,是jQuery()的简写,它的一些重载函数见下。 $(elements) 将一个或多个dom对象(原生js获取到的dom对象)转化为jQuery对象。 $('#id1').html() //返回id为id1的jQuery对象,然后调用html()方法。此方法依
+关注继续查看

简介

JQuery本质是一个js文件,里面是js常用功能的封装。比如绑定事件,修改内容,修改样式等。

$()是一个函数,是jQuery()的简写,它的一些重载函数见下。

$(elements)
将一个或多个dom对象(原生js获取到的dom对象)转化为jQuery对象。

$('#id1').html()  //返回id为id1的jQuery对象,然后调用html()方法。此方法依然返回jQuery对象,可以链式调用。
document.getElementById(“id1”).innerHTML;//等同于上一句
$(callback)
等同于$(document).redy(callback),dom文档加载完毕后再执行。例 $(function(){alert('hi')});
$(selector)
最常用的,根据选择器选择元素并转化为jQuery对象返回。

获得

引用可以放在<head>标签对内或<body>中最后的位置。

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

一个例子:

$(selector)用法

语法 描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
在同一个元素上可以顺序运行多条 jQuery 命令,这样的话,浏览器就不必多次查找相同的元素。见下行例子。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);//"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动

微笑问:.$("div#intro .head") 选择器选取哪些元素?
正确答案:id="intro" 的首个 div 元素中的 class="head" 的所有元素。

常用动画

$(selector).hide(speed,callback)  //隐藏选择的元素,speed为隐藏动画效果,单位为millisecond;callback为执行完后调用的函数。

fadeIn 淡入;fadeOut淡出;fadeToggle淡入淡出交替;函数参数都一样为$(selector).fadeIn(speed,callback);

slideDown 元素下滑显示 slideUp元素上滑收起  slideToggle 元素下滑显示、上滑收起交替;函数参数都一样为$(selector).slideDown(speed,callback);

$(selector).stop(stopAll,goToEnd);//用于停止所选元素的动画或效果


绑定事件

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).hover(callback1,callback2) 鼠标移到元素上执行callback1,移开时执行callback2
$(selector).hover()可用于实现二级菜单的展示与隐藏。例:

<li class="active" id="gaoKaoID"><a href="#" >高考 <b class="caret"></b></a>
<ul class="dropdown-menu" id="gaoKaoChildID">
	<li><a href="#">高考倒计时</a></li>
	<li><a href="../ngViews/gaoKaoScore.html">高考成绩</a></li>
</ul></li>
<script>						
$('#gaoKaoID').hover(function(){
	$('#gaoKaoChildID').css("height","20px").show();
	$('#gaoKaoChildID').animate({height:"200px"},{
		duration:1000,
		easing:'easeOutBounce'//底部反弹效果
		//需要<script src="http://cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>
	})
},
function(){
	setTimeout(function(){$('#gaoKaoChildID').hide();},500)//鼠标移开后半秒后再消失
});
</script>


操作属性

//设置一个属性
$(selector).attr("href","http://www.w3school.com.cn/jquery");
//设置多个属性
$(selector).attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});


操作class属性

//增添一个类选择器
$("div").addClass("important");
//增添多个类选择器
$("#div1").addClass("important blue");
//删除一个类选择器
$("div").removeClass("important");


操作css样式

//返回css属性中某个属性的值
$("p").css("background-color");
//设置css属性中某个属性的值
$("p").css("background-color","yellow");
//设置css属性中多个属性的值
$("p").css({"background-color":"yellow","font-size":"200%"});


操作内容

$(selector).text("Hello world!");//设置元素的文本值

$(selector).text() //返回所选元素的文本内容

$(selector).html() //设置或返回所选元素的内容(包括 HTML 标记)

操作控件

$(selector).val("Hello world!");//设置输入框的值
$(selector).val();//读取输入框的值

滚动监听

主要用于实时改变导航条的选中状态,见图1。


图1 导航条滚动监听


$(window).scroll(function() {}
//jquery函数,当滚动条发生滚动时(鼠标滚轮也算)得到调用。
document.body.scrollTop;,获得已经滚过去的页面的高度
$("#grade1").offset().top; 指定元素相对于整个html页面的顶部距离
后者减前者就是指定元素离屏幕顶端的距离。小于某个阀值时,比如100px就更新导航条的样式。
$(selector).scrollTop() //设置或读取已经翻过去的内容高度(并不一定是整个页面,比如文本域的竖直滚动条)。
$('#showId')[0].scrollHeight //获取当前节点的高度。

图2 使用$(selector).scrollTop($(selector)[0].scrollHeight); 做到滚动条总是在最下面的效果

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery操作DOM元素案例
jQuery操作DOM元素案例
0 0
使用jQuery操作DOM元素
使用jQuery操作DOM元素
0 0
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
0 0
uiu
【Jquery】 入门、快速上手、DOM/Jquery对象之间互相转换
【Jquery】 入门、快速上手、DOM/Jquery对象之间互相转换
0 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
0 0
学习JQuery的第一天(区分DOM与JQuery)(DOM与JQuery对象互相转换)
学习JQuery的第一天(区分DOM与JQuery)(DOM与JQuery对象互相转换)
0 0
js原生dom对象和jQuery对象可以混合使用吗?
写在前面: 本文主要内容包括js原生dom对象和jQuery对象的区别,联系,相互转换,以及踩坑经历。情况是这样的,今天在实现一个js验证码的功能,需要获取input的值,然后我用jQuery的方法获取到了dom节点,然后用原生js获取input的值,结果就出错了,好在后来场外求助启宸欧巴在师兄的帮助下发现问题所在,并成功解决。将今天的踩坑经历,以及网上查阅的资料,集合成一篇文章,分享一波。 Dom原生对象和jQuery对象的区别: 1.jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类
0 0
jquery对象和dom对象-6
jquery对象和dom对象-6
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
JavaScript异步编程
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载
JavaScript函数
立即下载