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初学总结一的更多相关文章

  1. PHP基础班初学心得:用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

  2. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  3. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  4. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  5. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  6. JQ实现判断iPhone、Android设备

    最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...

  7. jq.validate隐藏元素忽略验证

    jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...

  8. jq.validate 自定义验证两个日期

    jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...

  9. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

随机推荐

  1. 在windows上部署使用redis出现的问题及解决方法

    在windows上部署使用Redis出现问题的解决方法  原文链接:https://www.cnblogs.com/herry52/p/5938902.html 下载Redis 在Redis的官网下载 ...

  2. weichat Small 程序

    微信小程序教程用什么语言  ? 答:php java html5 css, 咫尺微页很棒可以自制 html 它是一套自有的语言(暂且叫 WeLang),使用 WeLang 开发出来的页面. 一个微信页 ...

  3. AllSame.java

    /****************************************************************************** * Compilation: javac ...

  4. PowerDesigner使用(设置继承,实现)

    1.File—New Mode 2添加4个class,1个接口(基本的添加工具都在这里面) 3.class1的设置名字,设置方法 3.设置继承,实现 4.编辑class2,class3继承父类的属性. ...

  5. 个股与指数的回归分析(自带python ols 参数解读)

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  6. golang格式化输出-fmt包用法详解

    golang格式化输出-fmt包用法详解 注意:我在这里给出golang查询关于包的使用的地址:https://godoc.org    声明: 此片文章并非原创,大多数内容都是来自:https:// ...

  7. 学习windows编程 day3 之 设置当前的背景颜色

    LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wParam, LPARAM lParam) { HDC hdc; PAINTSTRU ...

  8. Array map()方法

    这里的map不是“地图”的意思,而是“映射”.“映射”就是原数组被“映射”成对应新数组. [].map()基本用法跟forEach类似. map()方法返回一个新数组,数组中的元素为原始数组元素调用函 ...

  9. jq版轮播图

    html部分 <div class="banner"> <ul class="img"> <li><img src=& ...

  10. 虚方法virtual、抽象方法abstract、接口interface区别

    接口.抽象类.抽象方法.虚方法: 这四个名词时非常容易混淆的: 首先说一下接口 与抽象类 的异同: 相同点: 1.他们都不能实例化自己,也就是说都是用来被继承的. 2.抽象类中的抽象方法和接口方法一样 ...