1、jquery选择器和css选择器的关系:

jquery的选择器是源于css,jquery支持css1和css2的全部和css3 的部分选择器,同时它也有少量独有的选择器。

2、常用jquery选择器:一定要注意子元素和后代元素的区别 (以及子选择器和后代选择器的区别)。

#id  .className  div(id 类  标签)就不解释啦

后代选择器:  $("div p")   相当于   var d=$("div")    var p=$("p",d) (很有用)

相对应的是祖先元素的筛选方法:$("p").parents("div")    //一定要区分祖先选择器和父选择器的区别

父选择器筛选法:  $("p").parent()  只选择父元素  不包括父元素的父元素

子选择器:$("form > input")    只选择是form的子元素的input元素,不包括是form后代的input的元素(是和后代选择器的区别)

相邻选择器:$("prev+next")一个有效选择器并且紧接着第一个选择器  如$("label + input")   选择前面紧挨着label元素的input的元素。

同辈选择器:匹配 prev 元素的所有同辈 siblings 元素

$("form ~ input")

第一个元素:

$('li:first');

排除选择器:
:not(selector) 如
查找所有未选中的 input 元素

$("input:not(:checked)")

3、相当于live()

$(document).on("click","#liveID",function(){alert("live click");});

4、$.data(obj,name,value)方法:

给obj对象上添加缓存  取值方法$.data(obj,name)  obj可以是Dom元素  jquery对象不行。

$("#DivDemo").data()是一个key-value的obj对象

设置值:可以在Html元素设置属性,以data-开头,如:data-name='lxf'  或者用js设置:$("#DivDemo").data(“name”,'lxf')

取值:$("#DivDemo").data(“name”)  或者 $("#DivDemo").data().name或者$("#DivDemo").data()["name"]

5、阻止事件冒泡:jquery不支持事件捕获阶段(大多数浏览器都不支持)

event.stopPropagation();//event为事件参数

6、用映射方式一次绑定多个事件:

$("#txtId").on({focus:function(){ alert("focus"); },change:function(){ alert("change"); }});

7、事件绑定函数的第二个参数 是作为 event.data属性传过去的:

$("#txtId").on("focus",{dd:"111"},function(event){ alert(event.data.dd)});

8、判断复选框是否选中 或 设置复选框:请用 prop("checked") 方法 返回bool 型  选中为true ,未选中为false。不要用 attr("checked")  ,attr("checked")  始终返回页面初始加载时的状态 不管以后怎么改变, 而且返回的时 undefined或checked 而不是bool值。

如:

<input type="checkbox" id="test" value="非洲">非洲<br/>

$("#test").prop("checked")  //获取是否选中

$("#test").prop("checked",true/false)  //设置是否选中

或者用DOM属性 .checked (bool型)

document.getElementById("test").checked //获取值

document.getElementById("test").checked =true/false 设置值

9、$.each()和 $().each()区别:

$().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来处理多个checkbook,例如:

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码

}

回调函数是可以传递参数,i就为遍历的索引。

对于遍历一个数组,用$.each()来处理,简直爽到了极点。例如:

$.each([{“name”:”limeng”,”email”:”xfjylimeng”},{“name”:”hehe”,”email”:”xfjylimeng”},function(i,n)
{
alert(“索引:”+i,”对应值为:”+n.name);
});

参数i为遍历索引值,n为当前的遍历对象.

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});
输出:one   two  three  four   five
var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
输出:1   4   7
var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
输出:1   2  3  4  5

总结:

$.each(数组或对象,function(i,v){})   // 遍历的对象为数组是 i为 索引 从0~n  v为数组元素,遍历对象为对象时,i为对象的属性  v为对象的对应属性的值。

function中this指向:数组元素值或对象属性值。等效function第二个参数。

10、跳出循环:

for循环中我们使用continue;终止本次循环计入下一个循环,使用break终止整个循环。 
而在jquery中 $.each则对应的使用return true 和return false。

jquery基础篇的更多相关文章

  1. 前端之jQuery基础篇

    jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery 安装 网页中添加 jQuery 可以通过多种方法在 ...

  2. [jquery]基础篇--this与$this区别

    参考: http://www.cnblogs.com/hannover/p/4109779.html 1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(t ...

  3. 前端之jQuery基础篇02-事件

    什么是事件: 在元素上移动鼠标. 选取单选按钮 点击元素 常见的DOM事件: 鼠标事件:click() 当鼠标单击发生click事件 : <!DOCTYPE html> <html& ...

  4. jquery 基础汇总---导图篇

    最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...

  5. jQuery事件篇---基础事件

    写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...

  6. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  7. ABP框架实践基础篇之开发UI层

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...

  8. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  9. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

随机推荐

  1. inflate方法与findViewById的区别

    LayoutInflater作用是将layout的xml布局文件实例化为View类对象. 对于一个没有被载入或者想要动态载入的界面,都需要使用LayoutInflater.inflate()来找 re ...

  2. Tomcat下server.xml中context介绍

    conf/Context.xml是Tomcat公用的环境配置;若在server.xml中增加<Context path="/test" docBase="D:\te ...

  3. POJ2418——Hardwood Species(map映射)

    Hardwood Species DescriptionHardwoods are the botanical group of trees that have broad leaves, produ ...

  4. 新建一个struts2项目

    1,新建-动态web项目: 2,将struts2的必要jar包复制到WEB-INF\lib文件夹下,一共有9个,如图一所示. 图一 3,配置web.xml文件,将以下内容写到web.xml文件中. & ...

  5. String.IndexOf String.IndexOf String.Substring

    String.IndexOf String.IndexOf 方法 (Char, Int32, Int32)报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. ...

  6. hdu4745Two Rabbits(dp)

    链接 哎..比赛中一下想到了公共子序 之后思维就被局限了 一直在这附近徘徊 想着怎么优化 怎么预处理.. 观看了众多神牛的代码 ..以前觉得自己能写出个记忆化的最长回文长度 还挺高兴的...现在觉得好 ...

  7. 学习Android之内部类

    java语言允许在类中再定义类,这种在其它类内部定义的类就叫内部类.内部类又分为:常规内部类.局部内部类.匿名内部类和静态嵌套类四种.我们内部类的知识在Android手机开发中经常用到. 一.常规内部 ...

  8. poj 1836 Alignment(dp)

    题目:http://poj.org/problem?id=1836 题意:最长上升子序列问题, 站队,求踢出最少的人数后,使得队列里的人都能看到 左边的无穷远处 或者 右边的无穷远处. 代码O(n^2 ...

  9. js匿名函数

    <script type="text/javascript"> $(function () { $("#btn").mousedown(functi ...

  10. 【 D3.js 高级系列 — 5.1 】 颜色插值和线性渐变

    颜色插值指的是给出两个 RGB 颜色值,两个颜色之间的值通过插值函数计算得到.线性渐变是添加到 SVG 图形上的过滤器,只需给出两端的颜色值即可. 1. 颜色插值 在[高级 - 第 5.0 章]里已经 ...