好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[HTML5] 好程序员web前端培训分享jQuery学习技巧

[复制链接]
345 0
叶子老师 发表于 2019-8-12 15:13:18 | 只看该作者 |阅读模式 打印 上一主题 下一主题
  好程序员web前端培训分享jQuery学习技巧,jQueryweb前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧!
  1、关于页面元素的引用
  通过jquery$引用元素包括通过idclass、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
  2jQuery对象与dom对象的转换
  只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$转换成jquery对象。
  如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
  由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
  如:$("#msg")[0]$("div").eq(1)[0]$("div").get[1]$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
  以下几种写法都是正确的:
  $("#msg").html;
  $("#msg")[0].innerHTML;
  $("#msg").eq(0)[0].innerHTML;
  $("#msg").get(0).innerHTML;
  3、如何获取jQuery集合的某一项
  对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eqget(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个
  元素的内容。
  有如下两种方法:
  $("div").eq(2).html;//调用jquery对象的方法
  $("div").get(2).innerHTML;//调用dom的方法属性
  4、同一函数实现setget
  Jquery中的很多方法都是如此,主要包括如下几个:
  · $("#msg").html;//返回idmsg的元素节点的html内容。
  · $("#msg").html("new content");
  · //将“new content” 作为html串写入idmsg的元素节点内容中,页面显示粗体的new content
  · $("#msg").text;//返回idmsg的元素节点的文本内容。
  · $("#msg").text("newcontent");
  · //将“new content” 作为普通文本串写入idmsg的元素节点内容中,页面显示new content
  · $("#msg").height;//返回idmsg的元素的高度
  · $("#msg").height("300");//idmsg的元素的高度设为300
  · $("#msg").width;//返回idmsg的元素的宽度
  · $("#msg").width("300");//idmsg的元素的宽度设为300
  · $("input").val(");//返回表单输入框的value
  · $("input").val("test");//将表单输入框的value值设为test
  · $("#msg").click;//触发idmsg的元素的单击事件
  · $("#msg").click(fn);//idmsg的元素单击事件添加函数
  · 同样blur,focus,select,submit事件都可以有着两种调用方法
  5、集合处理功能
  · $.extend({
  · min:function(a, b){return a < b?a:b; },
  · max:function(a, b){return a > b?a:b; }
  · });//jquery扩展了min,max两个方法
  · 使用扩展的方法(通过“$.方法名”调用)
  · alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
  6、支持方法的连写
  所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
  例如:
  $("p").click(function{alert($(this).html)})
  .mouseover(function{alert('mouseover event')})
  .each(function(i){this.style.color=['#f00','#0f0','#00f'][i ]});
  7、操作元素的样式
  主要包括以下几种方式:
  · $("#msg").css("background");//返回元素的背景颜色
  · $("#msg").css("background","#ccc")//设定元素背景为灰色
  · $("#msg").height(300);$("#msg").width("200"); //设定宽高
  · $("#msg").css({color: "red", background:"blue" });//以名值对的形式设定样式
  · $("#msg").addClass("select");//为元素增加名称为selectclass
  · $("#msg").removeClass("select");//删除元素名称为selectclass
  · $("#msg").toggleClass("select");//如果存在(不存在)就删除(添加)名称为selectclass
  8、完善的事件处理功能
  Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
  如:
  $("#msg").click(function{alert("good")})//为元素添加了单击事件
  $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i ]})
  //为三个不同的p元素单击事件分别设定不同的处理
  jQuery中几个自定义的事件:
  (1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
  //当鼠标放在表格的某行上时将class置为over,离开时置为out
  $("tr").hover(function{
  $(this).addClass("over");
  },
  function{
  $(this).addClass("out");
  });
  (2)ready(fn):DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
  $(document).ready(function{alert("Load Success")})
  //页面加载完毕提示“Load Success,相当于onload事件。与$(fn)等价
  (3)toggle(evenFn,oddFn):每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
  //每次点击时轮换添加和删除名为selectedclass
  $("p").toggle(function{
  $(this).addClass("selected");
  },function{
  $(this).removeClass("selected");
  });
  (4)trigger(eventtype):在每一个匹配的元素上触发某类事件。
  例如:
  $("p").trigger("click");//触发所有p元素的click事件
  (5)bind(eventtype,fn)unbind(eventtype): 事件的绑定与反绑定
  从每一个匹配的元素中(添加)删除绑定的事件。
  例如:
  $("p").bind("click",function{alert($(this).text);}); //为每个p元素添加单击事件
  $("p").unbind;//删除所有p元素上的所有事件
  $("p").unbind("click")//删除所有p元素上的单击事件
  9、几个实用特效功能
  其中toggleslidetoggle方法提供了状态切换功能。
  toggle方法包括了hideshow方法。
  slideToggle方法包括了slideDownslideUp方法。
  10、几个有用的jQuery方法
  $.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera,msie,mozilla。如检测是否ie$.browser.isie,是ie浏览器则返回true
  $.each(obj,fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)
  如
  $.each([0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});
  等价于:
  vartempArr=[0,1,2];
  for(vari=0;i
  alert("Item#"+i+": "+tempArr[ i ]);
  }
  也可以处理json数据,如
  $.each({ name: "John", lang: "JS" }, function(i, n){ alert("Name: " + i + ", Value: " + n ); });
  结果为:
  Name:name,Value:John
  Name:lang,Value:JS
  $.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
  如:
  $.extend(settings,options);
  //合并settingsoptions,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
  var settings =$.extend({}, defaults, options);
  //合并defaultsoptions,并将合并结果返回到setting中而不覆盖default内容。
  可以有多个参数(合并多项并返回)
  $.map(array,fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
  如:
  vartempArr=$.map( [0,1,2], function(i){ return i + 4; });
  tempArr内容为:[4,5,6]
  vartempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
  tempArr内容为:[2,3]
  $.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
  如:$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]
  $.trim(str):删除字符串两端的空白字符。
  如:$.trim(" hello, how are you? "); //返回"hello,how are you? "
  11、解决自定义方法或其他类库与jQuery的冲突
  很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
  使用jquery中的jQuery.noConflict;方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")
好程序员web前端培训官网:http://wzxxcl.com/bigdata.shtml

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启