JQuery （简化dom操作）

来源：互联网发布：淘宝手机端装修模板编辑：程序博客网时间：2024/05/28 09:32

简介

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); 做到滚动条总是在最下面的效果

1 0