详解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 tools 系列 scrollable学习
Sep 06 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jquery 删除字符串最后一个字符的方法解析
Feb 11 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
Javascript实现基本运算器
Jul 15 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
turn.js异步加载实现翻书效果
Jul 25 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绘图技术
2013/07/03 PHP
php获取字段名示例分享
2014/03/03 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php算法实例分享
2015/07/14 PHP
PHP pear安装配置教程
2016/05/14 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
jQuery基础框架浅入剖析
2012/12/27 Javascript
Javascript实现鼠标框选操作  不是点击选取
2016/04/14 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
详解重置Django migration的常见方式
2019/02/15 Python
python线程的几种创建方式详解
2019/08/29 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
最新远光软件笔试题面试题内容
2013/11/08 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
React自定义hook的方法
2022/06/25 Javascript
利用Redis实现点赞功能的示例代码
2022/06/28 Redis