锋利的jQuery第2版学习笔记1~3章
第1章,认识jQuery
注意:使用的jQuery版本为1.7.1
目前流行的JavaScript库
jQuery优势
jQuery代码的编写
jQuery对象和DOM对象的相互转换
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
var $cr = $("#cr"); //jQuery对象
var cr = $cr.get(0); //DOM对象
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
解决jQuery和其它库的冲突
<!-- 引入prototype库 -->
<script type="text/javascript" src="lib/prototype.js"></script>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="lib/jQuery.js"></script>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权移交给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert(jQuery(this).text());
});
});
$('pp').style.display = 'none'; //使用prototype.js隐藏元素
</script>
(2)想确保jQuery不与其他库冲突,又想自定义快捷方式:
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义快捷方式
$j(function(){ //使用jQuery,利用自定义快捷方式 $j
$j("p").click(function(){
alert.($j(this).text());
});
});
$('pp').style.display = 'none'; //使用prototype.js隐藏元素
</script>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权移交给prototype.js
jQuery(function($){ //使用jQuery设定页面加载时执行的函数
$("p").click(function(){ //函数内部继续使用$()
alert.($(this).text());
});
});
$('pp').style.display = 'none'; //使用prototype.js隐藏元素
</script>
<2>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权移交给prototype.js
(function($){ //定义匿名函数
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){
alert.($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$('pp').style.display = 'none'; //使用prototype.js隐藏元素
</script>
第2章,jQuery选择器
jQuery选择器的优势
if($("#tt")){ /* do something */ }
应根据获取的元素长度来判断:
if($("#tt").length > 0){ /* do something */ }
或转换成DOM对象:
if($("#tt")[0]){ /* do something */ }
选择器 | 描述 | 返回 | 示例 |
#id | 根据给定id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据给定类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据给定元素名匹配元素 | 集合元素 | $("p") |
* | 匹配所有元素 | 集合元素 | $("*") |
selector1,selector2... | 将每个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myClass") |
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 | $("div span")选取div里所有span元素 |
$("parent>child") | 与CSS的子选择器一样 | 集合元素 | $("div>span") |
$("prev+next") | 与CSS的相邻同胞选择器一样 | 集合元素 | $(".one+div") |
$("prev~sibling") | 与CSS的通用的同胞组合选择器一样 | 集合元素 | $("#two~div") |
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("div:first")选取所有<div>元素中第1个<div>元素 |
:last | 选取最后一个元素 | 单个元素 | $("div:last")解释类似:first |
:not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(.myClass)") |
:even | 选取索引是偶数的元素,索引从0开始 | 集合元素 | $("input:even") |
:odd | 选取索引是奇数的元素,索引从0开始 | 集合元素 | $("input:odd") |
:eq(index) | 选取索引是index的元素,index从0开始 | 单个元素 | $("input:eq(1)") |
:gt(index) | 选取索引大于index的元素,index从0开始 | 集合元素 | $("input:gt(1)") |
:lt(index) | 选取索引小于index的元素,index从0开始 | 集合元素 | $("input:lt(1)") |
:header | 选取所有标题元素,例h1,h2 | 集合元素 | $(":header") |
:animated | 选取正在执行动画的元素 | 集合元素 | $("div:animated") |
:focus | 选取获得焦点的元素 | 集合元素 | $(":focus") |
选择器 | 描述 | 返回 | 示例 |
:contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 | $("div:contains('me')")选取所有含有文本"me"的div元素 |
:empty | 选取不包含子元素或文本的空元素 | 集合元素 | $("div:empty") |
:has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有p元素的div元素 |
:parent | 选取含有子元素或文本元素的元素 | 集合元素 | $("div:parent") |
选择器 | 描述 | 返回 | 示例 |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden")选取所有不可见元素 |
:visible | 选取所有可见元素 | 集合元素 | $("div:visible")选取可见的div元素 |
选择器 | 描述 | 返回 | 示例 |
[attribute] | 选择拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有id属性的div元素 |
[attribute=value] | 选择拥有属性值为value的元素 | 集合元素 | $("div[title=test]") |
[attribute!=value] | 选择属性值不等于value的元素 | 集合元素 | $("div[title!=test]"),没有属性title的元素也会被选取 |
[attribute^=value] | 选择属性值以value开始的元素 | 集合元素 | $("div[title^=test]") |
[attribute$=value] | 选择属性值以value结束的元素 | 集合元素 | $("div[title$=test]") |
[attribute*=value] | 选择属性值含有value的元素 | 集合元素 | $("div[title*=test]") |
[attribute|=value] | 选择属性等于给定字符串或以该字符串为前缀(该字符串后 跟一个连字符‘-’)的元素 |
集合元素 | $("div[title|="en"]")选取title属性等于en 或以en为前缀的元素 |
[attribute~=value] | 选取属性用空格分隔的值中包含一个给定值的元素 | 集合元素 | $("div[title~="uk"]") |
[attribute1] [attribute2] ... |
用属性选择器合并成复合选择器,满足多个条件,缩小范围 | 集合元素 | $("div[id][title$="test"]")选取拥有属性 id并且属性title以"test"结束的div元素 |
选择器 | 描述 | 返回 | 示例 |
:nth-child(index/even /odd/equatioin) |
选取每个父元素下第index个子元素或奇偶元素, index从1开始 |
集合元素 | 将为每一个父元素匹配子元素 |
:first-child | 选取每个父元素的第一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:last-child | 选取每个父元素的最后一个子元素 | 集合元素 | 将为每一个父元素匹配子元素 |
:only-child | 若某个元素是其父元素唯一的子元素,则被匹配 | 集合元素 | $("ul li:only-child")在<ul>中选取是唯一 子元素的<li>元素 |
选择器 | 描述 | 返回 | 示例 |
:enabled | 选取所有可用元素 | 集合元素 | $("#form1 :enabled") |
:disabled | 选取所有不可用元素 | 集合元素 | $("#form1 :disabled") |
:checked | 选取所有被选中元素,单选,复选 | 集合元素 | $("input:checked") |
:selected | 选取所有被选中选项元素,下来列表 | 集合元素 | $("select option:selected") |
|
|
|
|
:input | 选取所有<input><textarea><select><button> | 集合元素 | $(":input") |
:text | 选取所有单行文本框 | 集合元素 | $(":text") |
:password | 选取所有密码框 | 集合元素 | $(":password") |
:radio | 选取所有单选框 | 集合元素 | $(":radio") |
:checkbox | 选取所有复选框 | 集合元素 | $(":checkbox") |
:submit | 选取所有提交按钮 | 集合元素 | $(":submit") |
:image | 选取所有图像按钮 | 集合元素 | $(":image") |
:reset | 选取重置按钮 | 集合元素 | $(":reset") |
:button | 选取所有按钮 | 集合元素 | $(":button") |
:file | 选取所有上传域 | 集合元素 | $(":file") |
:hidden | 选取所有不可见元素 | 集合元素 | $(":hidden") |
选择器中的注意事项
第3章,jQuery中的DOM操作
DOM操作分类
jQuery中的DOM操作
方法 | 描述 | 示例 |
append() | 向每个匹配的元素内部追加内容 | <p>我想说:</p> $("p").append("<b>你好</b>"); <p>我想说:<b>你好</b></p> |
appendTo() | 将所有匹配元素追加到指定元素中,与append方法颠倒 | <p>我想说:</p> $("<b>你好</b>").appendTo("p"); <p>我想说:<b>你好</b></p> |
prepend() | 向每个元素内部前置内容 | <p>我想说:</p> $("p").prepend("<b>你好</b>"); <p><b>你好</b>我想说:</p> |
prependTo() | 将所有匹配元素前置到指定元素中,与prependTo方法颠倒 | <p>我想说:</p> $("p").prependTo("<b>你好</b>"); <p><b>你好</b>我想说:</p> |
after() | 在每个匹配元素之后插入内容 | <p>我想说:</p> $("p").after("<b>你好</b>"); <p>我想说:</p><b>你好</b> |
insertAfter() | 将所有匹配元素插入到指定元素之后 | <p>我想说:</p> $("<b>你好</b> ").insertAfter("p"); <p>我想说:</p><b>你好</b> |
before() | 在每个匹配的元素之前插入内容 | <p>我想说:</p> $("p").before("<b>你好</b>"); <b>你好</b> <p>我想说:</p> |
insertBefore() | 将所有匹配元素插入到指定元素之前 | <p>我想说:</p> $("<b>你好</b> ").insertBefore("p"); <b>你好</b> <p>我想说:</p> |
$("ul li:eq(1)").remove();
$("ul li").remove("li[title!=test]");
$("p").replaceWith("<strong>hello</strong>");
$("<strong>hello</strong>").replaceAll("p");
<strong>hello</strong>
$("strong").wrap("<b></b>"); //用b标签把strong元素包裹起来
<b><strong>hello</strong></b>
<strong>hello</strong>
<strong>hello</strong>
$("strong").wrap("<b></b>");
<b><strong>hello</strong></b>
<b><strong>hello</strong></b>
<b>
<strong>hello</strong>
<strong>hello</strong>
</b>
<strong>hello</strong>
$("strong").wrapInner("<b></b>");
<strong><b>hello</b></strong>
var $p = $("p");
var p_txt = $p.attr("title");
$("p").attr("title","value"); //用于设置单个属性
$("p").attr({"title":"you title","name":"you name"}); //用于设置多个属性,使用对象传递
$("p").removeAttr("title");
$("p").addClass("another");
$toggleBtn.toggle(function(){
//代码1
},function(){
//代码2
});
$("p").toggleClass("another");
$("p").css("color","red"); //设置单个
$("p").css({"color":"red","fontSize":"30px"); //设置多个
$("p").height();
锋利的jQuery第2版学习笔记1~3章的更多相关文章
- 锋利的jQuery第2版学习笔记8~11章
第8章,用jQuery打造个性网站 网站结构 文件结构 images文件夹用于存放将要用到的图片 styles文件夹用于存放CSS样式表,个人更倾向于使用CSS文件夹 scripts文件夹用于存放jQ ...
- 锋利的jQuery第2版学习笔记4、5章
第4章,jQuery中的事件和动画 注意:使用的jQuery版本为1.7.1 jQuery中的事件 JavaScript中通常使用window.onload方法,jQuery中使用$(document ...
- 锋利的jQuery第2版学习笔记6、7章
第6章,jQuery与Ajax的应用 Ajax的优势和不足 Ajax的优势 1.不需要插件支持 2.优秀的用户体验 3.提高Web程序的性能 4.减轻服务器和带宽的负担 Ajax的不足 1.浏览器对X ...
- 神经网络与机器学习第3版学习笔记-第1章 Rosenblatt感知器
神经网络与机器学习第3版学习笔记 -初学者的笔记,记录花时间思考的各种疑惑 本文主要阐述该书在数学推导上一笔带过的地方.参考学习,在流畅理解书本内容的同时,还能温顾学过的数学知识,达到事半功倍的效果. ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
- HTML5与CSS3基础教程第八版学习笔记1~6章
第一章,网页的构造块 网页主要包括三个部分: 1.文本内容(纯文字) 2.对其他文件的引用:图像,音频,视频,样式表文件,js文件 3.标记:对文本内容进行描述并确保引用正确地工作 注:所有这些成分都 ...
- c#高级编程第七版 学习笔记 第三章 对象和类型
第三章 对象和类型 本章的内容: 类和结构的区别 类成员 按值和按引用传送参数 方法重载 构造函数和静态构造函数 只读字段 部分类 静态类 Object类,其他类型都从该类派生而来 3.1 类和结构 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- poj 3635 Full Tank? ( bfs+dp思想 )
Full Tank? Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 5857 Accepted: 1920 Descri ...
- 栈的应用2——超级计算器(中缀与后缀表达式)C语言
输入中缀表达式输出结果(结果可以是小数,但输入必须是整数) #include<stdio.h> #include<stdlib.h> //需要两个栈,一个储存结果,一个储存运 ...
- UVa712 S-Trees
// UVa712 S-Trees // Rujia Liu // 题意:给一棵满二叉树,每一层代表一个01变量,取0时往左走,取1时往右走.给出所有叶子的值,以及一些查询(即每个变量的值),求最后到 ...
- C# 钩子HOOK专题(1)
目录 基本概念 运行机制 钩子类型 作者 基本概念 钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程 ...
- 整数矩阵CMO 2102回馈(gauss整数解)
PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 本题是CMO(数学 Olympics) 2012 第二题 所以还是很坑的…… ...
- php 算法之切割数组,不用array_chunk(),算法之二,取数组的差值,不用array_diff()
用php写算法切割数组,不用array_chunk();算法例如以下所看到的. <?php //$array 数组 //$size 每一个数组的个数 //每一个数组元素是否默认键值 functi ...
- Android-L-Samples
https://github.com/s3xy4ngyc/Android-L-Samples
- MySQL锁系列2 表锁
http://www.cnblogs.com/xpchild/p/3789068.html 上一篇介绍了MySQL源码中保护内存结构或变量的锁,这里开始介绍下MySQL事务中的表锁. 注1: 在表 ...
- HOW MYSQL USES INTERNAL TEMPORARY TABLES
HOW MYSQL USES INTERNAL TEMPORARY TABLES Table of Contents [hide] 1)UNION queries 2)Some views 3)SQL ...
- Metadata Lock原理2
同事说开发机更改一个表结构,加字段,但是一直挂在那里,没反应.一开始以为表测试数据量很大,因为mysql增加表字段会重写表,后来看了下数据量很小,就另外查看过程.原因分析和处理如下: 一.环境 m ...