详解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 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP的加密方式及原理
2012/06/14 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
php实现的生成排列算法示例
2019/07/25 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
11款基于Javascript的文件管理器
2009/10/25 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
浅谈Python中数据解析
2015/05/05 Python
python实现复制整个目录的方法
2015/05/12 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
linux面试题参考答案(10)
2013/11/04 面试题
物流仓储计划书
2014/01/10 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
交通事故私了协议书
2014/04/16 职场文书
学生会干部任命书
2015/09/21 职场文书
导游词之襄阳古城
2019/09/27 职场文书