JQuery （简化dom操作）-CSDN博客

简介

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 //获取当前节点的高度。