JQ初学总结一

作者:未知 / 来源:网络 / 整理:脚本之家如果知识不能与人分享,这不算是真正的知识了。
Jquery是最火的JavaScript库,大部分web开发都会用到就jquery,而作为初学者看了一些jq的用法总结自己的学习以增强自己的认知。普通的javascript的缺点是:每种控件的操作方式可能不统一,不同浏览器下也会有区别。用javasript编写跨浏览器的程序非常麻烦。而是用jquery可以很好的做到兼容大多数浏览器:ie、firefox、谷歌。...

JQ初学总结一

脚本之家收集整理这篇JQ初学总结一内容希望可以帮到你。

jQuery是最火的javascript库,大部分web开发都会用到就jQuery,而作为初学者看了一些jq的用法总结自己的学习以增强自己的认知。

普通的javascript的缺点是:每种控件的操作方式可能不统一,不同浏览器下也会有区别。用javasript编写跨浏览器的程序非常麻烦。而是用jQuery可以很好的做到兼容大多数浏览器:ie、firefox、谷歌。

但别认为jq是一种新的语法,因为jQuery就是javascript语法写的一些函数类,内部仍然是调用javascript实现的,所以并不是代替javascript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要javascript的技术,jQuery本身就是一堆javascript函数。要知道用JQ能实现的我们也可以自己编写javascript+dom实现,只是jq帮我们封装了一堆函数,使用者直接调用要实现的函数即可;

 jQuery的优点:尺寸小、使用简单方便(Write Less,Do More,吃得少干得多。链式编程($("#div1").draggble().show().hide().fly())、隐式迭代(自动对于多个元素进行迭代方法调用))、屏蔽浏览器差异跨浏览器兼容性好(ie 6.0+,FF 2+,Safari 3.0+,Opera 9.0+,Chrome)、插件丰富、开源、免费。

下面说说jq的简单使用:

一、页面元素加载完毕事件:

$(document).ready(function() {

    alert("加载完毕!");
});//注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。
也可以简写为$(functions(){ alert("加载完毕!");});
在dom树中有一个onload事件也是实现页面加载完后执行。
但两者又有区别:1)、onload只能注册一次。(window.onload=function(){....})后注册的会取代先注册的函数。而ready可以多次注册都会被执行;
                       2)、onload是在所有DOM元素创建完毕、图片、css等都加载完毕后才会被触发。JQ ready却是在DOM元素创建完毕后就触发。ready的方式可以提高页面的响应速度;在JQ中也可以用$(window).load(function(){....});来实现dom 的onload那种事件调用的时机。(*在JQ中采用$(domObj)方式把dom对象转化为JQ对象load是JQ自己的内部的函数
 
二、选择器
1、基本选择器
jQuery选择器用于查找满足条件的元素,比如可以用$("#Id")来根据控件id获得控件的jQuery对象,相当于dom中的getElementById;
$("TagName")来获取所有指定标签名的jQuery对象,相当于getElementsByTagName;
$(function() {
         $("#btnTest").click(function() {
              $("div").html("天朝是一个民主自由的国家");
          });
      });
(*当使用匿名函数嵌套过多的时候可以把匿名函数写在外面用一个变量指向他,推荐这样使用 这样可以避免命名函数与jq中的内部函数名冲突 引发未知错误,但如果你喜欢也是可以将命名函数传进去的)
上面是id 和标签选择器,在jq选择器也可以组合选择(下面也会提到),jq中是选择器跟css中的选择器非常相似而且大部分是可以想通的。正如上面提到的.
在jq中也有对于元素类的选择器。用法跟css的一样$(".className").click(...),获得类名为className的对象
JQ中还有非常多的选择器下面简单写一下:
  多条件选择器:$("p,div,span.menuitem"),同时选择p标签、div标签和拥有menuitem样式的span标签元素(类似于css选择器);
l层次选择器:
   (1)$("div li")获取div下的所有li元素(后代,子、子的子……);
   (2)$("div > li")获取div下的直接li子元素;
   (3)$(".menuitem + div")获取样式名为menuitem之后的第一个div元素(不常用);
   (4)$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素(不常用);
在此得注意空格不能多写和少写不然找不到元素的。
2、过滤选择器
:first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
:even、:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>(可以做表格奇偶行的背景不同)
:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
:header选取所有的h1……h6元素
:animated正在执行动画的元素。
组合选择器是按照表达式从前向后进行数据过滤
3、属性过滤选择器:
$("div[id]")选取有id属性的<div>
$(“div[title=test]”)选取title属性为“test”的<div>,jQuery中没有对getElementsByName进行封装,用$(“input[name=abc]”)。
$("div[title!=test]")选取title属性不为“test”的<div>
还可以选择开头、结束、包含等,条件还可以复合。
$(":radio[name=groupName]")可以获得同一组的radiobutton 然后在可以进行操作。
4、表单对象选择器(过滤器):
$("input:checked")选取所有选中的元素(Radio、CheckBox)
$("select option:selected")选取所有选中的选项元素(下拉列表)
$(“:input”)选取所有<input>、<textarea>、<select>和<button>元素。和$(“input”)不一样, $(“input”)只获得<input>。$("input,textarea,select,button")等价于$(":input")
$(":text")选取单行文本框,等价于$("input[type=text]")
$(“:password”)选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
即使没有这些表单选择器,也能用属性过滤器实现。如:选择页面的radio元素$("input[type=radio]")

总结

以上是脚本之家为你收集整理的JQ初学总结一全部内容,希望找个程序文章能够帮你解决所遇到的程序开发困惑。

如果觉得脚本之家网站还不错,麻烦将脚本之家网站推荐给好友。

你可能在找的问题:

jQuery教程

jq 与原生js 方法互相转换

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的。虽然jq很简单,但是也有兼容问题,js基础是很重要的,jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不...

jQuery教程

jQuery中this与$(this)的区别总结

这里就谈谈this与$(this)的区别。1、jQuery中this与$(this)的区别$("#textbox").hover(function() {this.title = "Test";},fucntion() {this.title = "OK”;});这里的this其实是一个html 元素(textbox),textbox有text属性,所以这样写是...

  • 友情链接:微信小游戏
  • 微信扫一扫

    微信扫一扫

    微信扫一扫,分享到朋友圈

    标题
    返回顶部