《锋利的JQuery》notes

Chapter 1 认识jQuery

jQuery对象和DOM对象的相互转换

获取jQuery对象：

var $variable = JQuery对象;

获取DOM对象：

var variable = DOM对象;

jQuery对象转换成DOM对象：

var $cr = $("#cr");    //jQuery对象
var cr = $cr[0];    //DOM对象

Chapter 2 jQuery选择器

$('#tt') 获取的是对象，即使网页上没有这个元素也不会报错。应该根据获取的元素长度来判断是否存在

if ( $("#tt").length > 0) {//do something
}

过滤选择器：以一个冒号（:）开头

:first 选取第一个元素

:even 选取索引是偶数的所有元素

:odd 选取索引是奇数的所有元素

:eq（index）选取索引等于index的元素，从0开始计算（只匹配一个元素）

内容过滤选择器

:empty 选取不包含子元素或者文本的空元素

:has(selector) 选取含有选择器所匹配的元素的元素

属性过滤选择器

$("div[id]") 选取拥有属性id的元素

子元素过滤选择器

：nth-child(index) 选取每个父元素下的第index个子元素

表单选择器

：input 选取所有的<input>、<textarea>、<select>和button元素

$("form :input").length, （注意和$("form input")的区别）

选择器的注意事项

1、选择器含有特殊符号. 、 [ 等

需要使用转义字符转义

$("#id\\#b") 转义特殊字符“#”，需要两个\\，一个转义用，一个双引号用

2、选择器含有空格

$('.test :hidden') 带空格的，选取class为"test"的元素里面的隐藏元素

$('.test:hidden') 不带空格，选取隐藏的class为"test"的元素

Chapter 3 jQuery中的DOM操作

属性节点attr()

查找属性节点：$("p").attr("title"); 获取<p>元素的节点属性title

删除节点：removeAttr()

插入节点（<p>我想说</p>）

向元素内部追加内容：

$("p").append("<b>你好</b>");        <p>我想说 <b>你好</b></p>

在元素之后插入内容：

$("p").after("<b>你好</b>");        <p>我想说 </p><b>你好</b>

（insertAfter() 则颠倒了操作）

删除节点

remove() 该节点所包含的所有后代节点将同时被删除，这个方法的返回值的一个指向已被删除的节点的引用。

detach() 也是删除所有匹配的元素，但是和remove()不同的是，所有绑定的事件、附加的数据都会留下来。

empty() 清空节点，只是内容被清空

复制节点

$("li").click(function() {$(this).clone().appendTo("ul");
};

复制的新元素并不具有任何行为。在clone()方法中传递一个参数true，则复制元素的同时复制元素所绑定的事件。

样式

addClass()方法：追加class类

removeClass()：移除样式

toggle()：行为的重复切换

toggleClass()：类名的重复切换（类名存在则删除，不存在则添加）

设置和获取HTML、文本和值

html() 读取或设置某个元素的HTML内容（类似innerHTML）

text() 读取或设置某个元素的文本内容（jQuery的text()方法支持所有浏览器）（类似innerText）

val() 设置和获取元素的值（类似value属性）

遍历节点

children() 取得匹配元素的子元素集合（不考虑其他后代元素）

next() 取得匹配元素后面紧邻的同辈元素

siblings() 取得匹配元素前后所有的同辈元素

Chapter 4 jQuery中的事件和动画

$(document).ready()方法: 在DOM载入就绪时，就能对其进行操纵。每次调用都会在现有行为上追加新的行为。

简写方式

$(function(){...})
或 $().ready(function(){...});

《锋利的JQuery》notes相关推荐

《达·芬奇的广博与创新》notes
<达·芬奇的广博与创新> 晓玲编著北京:东方出版社,2008,11达·芬奇(1452-1519)是一位思想深邃.学识渊博.多才多艺的艺术大师.科学巨匠.文艺理论家.哲学家.诗人.音乐家 ...
达芬奇科学特展《穿越·创新·达芬奇：超越时代的创新者》
穿越到500年前,感受科学天才达芬奇的魅力. "穿越·创新-达芬奇科学特展" 作为2020深圳设计周的首个云上艺术展厅,届时将以新技术构筑,以达芬奇的传奇一生为轴,融合深圳创新之都 ...
达芬奇SP型机器人二度获准FDA，可用于特定耳鼻喉手术...
雷锋网消息近日,美国医疗机器人公司Intuitive Surgical(ISRG)宣布,该公司达芬奇SP (Da Vinci SP)型手术机器人已获得FDA批准,可用于经口耳鼻喉科手术中的口咽侧切除 ...
我在达芬奇的笔记本里，找到了用户画像的起源
据说,达芬奇是史上最为人知却又最不为人知的艺术家.小编对大师崇拜有加,仔细研究了达芬奇的笔记内容,发现他能取得如此耀眼的成就,在于他对科学与极致的追求! 为了画好<蒙娜丽莎>, 达芬奇自画 ...
为什么达芬奇能“艺工结合”，要从“T型设计”说起
很高兴在律老师的课上能够观看有关达芬奇的纪录片.达芬奇是我的偶像之一,我曾经阅读过沃尔特·艾萨克森写的<达芬奇传>.读完之后,我领悟到了一个观点:不同于牛顿和爱因斯坦这样的被普通人顶礼膜拜 ...
阿里巴巴大数据平台“达芬奇密码”进化论
阿里巴巴大数据平台"达芬奇密码"进化论 2014-02-11点右侧>>> 海丁活动大数据时代,阿里巴巴集团是最有资本进行烂漫遥想的公司之一.阿里数据平台事业部服 ...
“手术机器人”掀起融资潮，行业正加速打破“达芬奇”神话
机器人,在我们的生活中并不难见,但手术机器人你见过吗? 或许见过的人并不多,但在智能化趋势愈发明显的背景下,这个赛道却已经被各路投资者盯上了. 据药明康德内容部数据库不完全统计,今年以来,手术机器人领 ...
达芬奇的这本“禁书”，竟让全世界顶礼膜拜了 500 年！
转自:http://36kr.com/p/5100305.html 15 分钟,带你精读全球传记写作一哥的重磅新作<达芬奇传>. 编者按:本文来自微信公众号"远读重洋" ...
创造天赋：达·芬奇的7种天才特质
心理学家与专业魔术师迈克尔·格尔博提出了"达·芬奇与众不同的7种天才特质".他阐述为好奇心.悟性.艺术和科学.关联.开阔.细致和合作精神.然而,这些特质本身并没有什么超前性,它们却 ...
艺工交叉之神--达芬奇
前言列奥纳多·达·芬奇(意大利语:Leonardo da Vinci,儒略历1452年4月15日-1519年5月2日,公历1452年4月23日,又译达文西),是意大利文艺复兴时期的一个博学者:除了是 ...

《锋利的JQuery》notes

《锋利的JQuery》notes相关推荐

最新文章

热门文章