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


Posted in Javascript onDecember 19, 2016

对于熟悉前端开发的小伙伴,相信对于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中我们经常使用到的操作。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
javascript数据类型验证方法
Dec 31 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 #Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 #Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 #Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 #Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 #Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 #Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 #Javascript
You might like
php curl_init函数用法
2014/01/31 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
js分页工具实例
2015/01/28 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
收集的几个Python小技巧分享
2014/11/22 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
python适合做数据挖掘吗
2020/06/16 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
美术专业学生个人自我评价
2013/09/19 职场文书
摄影实习自我鉴定
2013/09/20 职场文书
机关节能减排实施方案
2014/03/17 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis