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); 做到滚动条总是在最下面的效果
目录
相关文章
|
29天前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
29天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
5天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
5天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
N..
|
25天前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
13 1
|
30天前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
30天前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
前端开发 JavaScript
Jquery常用操作:checkbox、select取值,radio、checkbox、select选中及其相关
常用Jquery操作:checkbox取值、select取值、radio选中、checkbox选中、select选中及其相关: 1、影藏页面元素 使用jquery真的很方便,比如要控制div的显示与隐藏,一句话就搞定了,请看下面使用说明。
1275 0
|
6月前
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
36 0
|
7月前
|
JavaScript
jQuery 插件自用列表
jQuery 插件自用列表
29 0