详解Jquery的事件操作和文档操作

对于熟悉前端开发的小伙伴，相信对于Jquery一定不陌生，相对于JavaScript的繁琐，Jquery更加的简洁，当然简洁不意味着简单，我们可以使用Jquery完成我们想要实现全部功能，这里为小白们分享一下关于Jquery的事件和文档操作，便于小白们快速上手。

一、事件操作：

<html>
 <head>
  <title>Jquery事件操作测试</title>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
  <style>
   .ul{min-width:300px;height:25px;}
   .ul2{margin-top:20px;}
   .ul li{float:left;min-width:50px;height:25px;line-height:25px;margin-left:10px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}
  </style>
 </head>
 <body>
  <ul class="ul ul1" id="ul1">
   <li class="li li1" id="li1">第一项</li>
   <li class="li li2" id="li2">第二项</li>
   <li class="li li3" id="li3">第三项</li>
   <li class="li li4" id="li4">第四项</li>
   <li class="li li5" id="li5">第五项</li>
  </ul>
  <ul class="ul ul2" id="ul2">
   <li class="li li1" id="li1">第一项<span>span</span></li>
   <li class="li li2" id="li2">第二项</li>
   <li class="li li3" id="li3">第三项</li>
   <li class="li li4" id="li4">第四项</li>
   <li class="li li5" id="li5">第五项</li>
  </ul>
  <input type='text' value="text" id="text">
  <input type='password' value="password" disabled="disabled">
  <input type='number' value="number">
  <input type='radio' value="radio">radio
  <input type='checkbox' value="checkbox">checkbox
 </body>
 <script>
  var jq = jQuery.noConflict();//jQuery 名称冲突
  jq(document).ready(function(){
   alert("页面加载完成");
  });
  jq(".ul li").click(function(){
   //alert(jq(this).text());//不带格式输出
   //alert(jq(this).html());//带格式输出
  });
  jq("#ul1 li").click(function(){
   //alert(jq(this).attr("class"));
   if(jq(this).hasClass("li1")){//元素是否包含指定的class
    alert(true);
   }else{
    alert(false);
   }
  });
  jq("#ul1 li.li1").click(function(){
   alert("#ul1 li.li1-----------" + jq(this).attr("class"));
  });
  jq(".ul1 li:first").click(function(){
   alert(".ul1 li:first-----------" + jq(this).attr("class"));
  });
  jq(".ul1 li:last").click(function(){
   alert(".ul1 li:last-----------" + jq(this).attr("class"));
  });
  jq(".ul1 li:even").click(function(){
   alert(".ul1 li:even-----------" + jq(this).attr("class"));
  });
  jq(".ul1 li:odd").click(function(){
   alert(".ul1 li:odd-----------" + jq(this).attr("class"));
  });
  jq(".ul1 li:eq(1)").click(function(){
   alert(".ul1 li:eq(1)-----------" + jq(this).attr("class"));
  });
  jq(":input").click(function(){
   alert(":input-----------" + jq(this).val());
  });
  jq(":text").click(function(){
   alert(":text-----------" + jq(this).val());
  });
  jq(":enabled").click(function(){
   alert(":enabled-----------" + jq(this).val());
  });
  jq(":disabled").click(function(){
   alert(":disabled-----------" + jq(this).val());
  });
  jq("#text").change(function(){//控件失去焦点后，检查内容是否变化，变化激活
   alert(".change()-----------" + jq(this).val());
  });
  jq("#text").focus(function(){//控件获得焦点
   alert(".focus()-----------" + jq(this).val());
  });
 </script>
</html>

二、文档操作：

<html>
 <head>
 <title>jQuery文档操作</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
 <style>
  ul{display:inline-block;}
  li{float:left;min-width:80px;height:40px;line-height:40px;margin-right:20px;border-radius:5px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}
  p.select{color:#f54372;}
 </style>
 </head>
 <body>
 <p class="p p1" id="p1">第一段文字</p>
 <p class="p p2" id="p2">第二段文字</p>
 <ul class="ul1">
  <li>addClass()</li>
  <li>after()</li>
  <li>before()</li>
  <li>append()</li>
  <li>attr()</li>
  <li>empty()</li>
  <li>hasClass()</li>
  <li>html()</li>
 </ul>
 <br/><br/>
 <ul class="ul2" style="position:relative;">
  <li>css()</li>
  <li>height()</li>
  <li>offset()</li>
  <li>offsetParent()</li>
  <li>position()</li>
  <li>scrollLeft()</li>
  <li>scrollTop()</li>
  <li>width()</li>
 </ul>
 </body>
 <script>
 $(".ul1 li:eq(0)").click(function(){
  $(".p1").addClass("select");
 });
 $(".ul1 li:eq(1)").click(function(){
  $(".p1").after("after");
 });
 $(".ul1 li:eq(2)").click(function(){
  $(".p1").before("before");
 });
 $(".ul1 li:eq(3)").click(function(){
  $(".p1").append("append");
 });
 $(".ul1 li:eq(4)").click(function(){
  alert($(".p1").attr("id"));
 });
 $(".ul1 li:eq(5)").click(function(){
  $(".p1").empty();
 });
 $(".ul1 li:eq(6)").click(function(){
  alert($(".p1").hasClass("第一段文字"));
 });
 $(".ul1 li:eq(7)").click(function(){
  $(".p1").html("html");
 });

 $(".ul2 li:eq(0)").click(function(){
  $(".p1").css("color","red");
  $(".p2").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});
 });
 $(".ul2 li:eq(1)").click(function(){
  alert($(this).height());
  $(this).height("50px");
 });
 $(".ul2 li:eq(2)").click(function(){
  alert("left:"+$(this).offset().left+" top:"+$(this).offset().top);
 });
 $(".ul2 li:eq(3)").click(function(){
  $(this).offsetParent().css("background-color", "red");
 });
 $(".ul2 li:eq(4)").click(function(){
  alert("left:"+$(this).position().left+" top:"+$(this).position().top);
 });
 $(".ul2 li:eq(5)").click(function(){
  alert("scrollLeft:"+$(this).scrollLeft());
 });
 $(".ul2 li:eq(6)").click(function(){
  alert("scrollTop:"+$(this).scrollTop());
 });
 $(".ul2 li:eq(7)").click(function(){
  alert("widht:"+$(this).width());
  $(this).width("200px");
 });
 </script>
</html>

以上便是我总结的Jquery中我们经常使用到的操作。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jquery移除了live()、die(),新版事件绑定on()、off()的方法

    jquery移除了live()、die(),新版事件绑定on()、off()的方法

    我蛋疼了快10分钟,怎么调用都是报错,最后一查,原来jquery已经移除了live()和die()方法.使用了新的事件绑定方法on().解除绑定方法off(). 新的绑定方法on()和比live()相比,效率比之前的高.因为live()是固定在document节点上的.如果绑定的元素嵌套在很深的层中,那么事件一级级的传递必将影响到效率.而on()是绑定在$()选择的元素上,嵌套深度可自由选择. on()的参数 on( events [, selector ] [, data ], handler

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • jquery文档操作wrap()方法实例简述

    本文实例讲述了jquery文档操作wrap()方法.分享给大家供大家参考.具体实现方法如下: wrap()方法:是指用某个标签将某个元素包起来,即在外面多加一层标签. 复制代码 代码如下: <html> <head> <title>jquery文档操作:wrap()方法</title> <script type="text/javascript" src="jquery-1.8.2.min.js"><

  • jQuery EasyUI API 中文文档 - DataGrid数据表格

    扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

  • jQuery绑定事件的四种方式介绍

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪些. jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(type,[data],function(eventObject)) bind是使用频率较高的一

  • 浅谈jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

  • Lazy Load 延迟加载图片的jQuery插件中文使用文档

    什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助

  • 详解jQuery中的事件

    详解jQuery中的事件

    大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 jQuery中的事件 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完

  • jQuery EasyUI API 中文文档 - Tree树使用介绍

    用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点.下面是一个示例: 复制代码 代码如下: <ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> &

  • 基于jQuery的select下拉框选择触发事件实例分析

    本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

随机推荐