2. 软件开发
    3. JQuery （简化dom操作）

    JQuery （简化dom操作）

    xiaoxiao2026-05-23  10

    简介

    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); 做到滚动条总是在最下面的效果 相关资源：敏捷开发V1.0.pptx
    最新回复(0)