jquery基础篇
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 设置值
$().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基础篇的更多相关文章
- 前端之jQuery基础篇
jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery 安装 网页中添加 jQuery 可以通过多种方法在 ...
- [jquery]基础篇--this与$this区别
参考: http://www.cnblogs.com/hannover/p/4109779.html 1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(t ...
- 前端之jQuery基础篇02-事件
什么是事件: 在元素上移动鼠标. 选取单选按钮 点击元素 常见的DOM事件: 鼠标事件:click() 当鼠标单击发生click事件 : <!DOCTYPE html> <html& ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- jQuery事件篇---基础事件
写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程 第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几 ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- ABP框架实践基础篇之开发UI层
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
随机推荐
- redis其他问题
如何解决redis高并发客户端频繁time out? 现在业务上每天有5亿+的请求,平时redis的操作在2K+每秒左右.到了高峰有3K+,这时候客户端就会频繁的报connect time out的异 ...
- ripple
ripple模拟器非常好用,chrome上的插件
- IE Web 开发支持将迁移到 StackOverflow
http://stackoverflow.com/questions/tagged/internet-explorer
- linux下关于程序性能和系统性能的工具、方法
观察性能/状态的方法:top free netstat /pro/目录下的信息 其中/pro/meminfo下的信息相当丰富 ------------------------------------- ...
- poj2月题解
竟然生日前一天poj破百,不错不错,加速前进! poj2437 由于泥泞不重叠,所以按其实左边排个序再统计一遍即可(如果不是刚好盖满就尽量往后盖) poj2435 细节bfs poj2230 求欧拉回 ...
- IDE模式下安装Windows 7强行改回ACHI后不断重启的解决方法
问题描述:用U盘启动进PE装的Win7,由于PE认不出硬盘,只好进BIOS设置硬盘模式为IDE才安装上.结果安装完系统后,在BIOS中强行修改硬盘模式为ACHI模式后,Win7开机不断重启,进不了系统 ...
- (转载)关于gcd的8题
发现其实有关gcd的题目还是挺多的,这里根据做题顺序写出8题. [bzoj2818: Gcd] gcd(x,y)=质数, 1<=x,y<=n的对数 做这题的时候,懂得了一个非常重要的转化: ...
- amoeba-mysql配置安装(收集整理)
本文收集整理自: Amoeba搞定mysql主从读写分离 http://blog.chinaunix.net/uid-20639775-id-154600.html Amoeba非常好用的mysql集 ...
- 打印web页面指定区域的三种方法
本文和大家分享一下web页面实现指定区域打印功能的三种方法,一起来看下吧. 第一种方法:使用CSS 定义一 个.noprint的class,将不打印的内容放入这个class内. 代码如下: <s ...
- java惯用法转载
目录 实现: equals() hashCode() compareTo() clone() 应用: StringBuilder/StringBuffer Random.nextInt(int) It ...