详解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 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
JSONP原理及简单实现
Jun 08 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
TypeScript高级用法的知识点汇总
Dec 17 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP时间函数使用详解
2019/03/21 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Django之PopUp的具体实现方法
2019/08/31 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
python自动化八大定位元素讲解
2021/07/09 Python