《锋利的jQuery》心得笔记--Two Sections
第三章
1、 DOM操作(节点)
1) 查找节点可以查找元素节点和属性节点
2) 创建节点:
(1) 创建元素节点
var addLi = $(“<li></li>”);或者var addLi = $(“</li>”)不可以是var addLi = $(“<li>”);
$(“ul”).append(addLi);
(2) 创建文本节点:var addLi = $(“<li>文本节点</li>”);
(3) 创建属性节点:var addLi = $(“<li class=””>属性节点</li>”);
3) 插入节点:
var add = $(“<b>插入节点</b>”);
(1) $(“p”).append(add)和add.appendTo(“p”);添加到内部
(2) $(“p”).prepend(add)和add. prependTo(“p”); 添加到内部
(3) $(“p”).after(add)和add.insertAfter (“p”);添加到外部
(4) $(“p”).before(add)和add. insertBefore (“p”); 添加到外部
4) 删除节点
(1) remove()//可以带属性
(2) detach()//与remove()不同的是:所绑定的事件和附加的数据等都会保留下来
(3) empty()//清空节点
5) 复制节点
(1) clone()
(2) clone(true)是让复制元素的同时也复制元素所绑定的事件,同时也具备复制的功能
6) 替换节点
(1) replaceWith();比如:$(“p”). replaceWith (add)
(2) replaceAll;比如:add. replaceAll (“p”)
7) 包裹节点
(1) wrap();比如:$(“p”). wrap (“<b></b>”)把p标签用b标签包裹起来
(2) wrapAll()比如$(“p”). wrapAll (“<b></b>”)把所有匹配的每个p标签用b标签包裹起来
(3) wrapInner()比如$(“p”). wrapAll (“<b></b>”)把所有匹配的所有p标签用b标签包裹起来
2、 DOM操作(属性)
1) 属性
(1) 获取属性:$(“p”).attr(“title”)
(2) 设置属性:$(“p”).attr({“title”:”myTitle”,”class”:”pItem”})
(3) 既能获取属性也能设置属性的还有:html()、text()、height()、width()、val()、css()
(4) 删除属性:$(“p”).removeAttr(“title”)
2) 样式
(1) 获取样式:$(“p”).attr(“class”)
(2) 设置样式:$(“p”).attr(“class”,”main”)
(3) 追加样式:$(“p”).addClass(“other”)
(4) 移除样式:
(1st) 删除一个:$(“p”). removeClass(“other”)
(2nd) 删除多个:$(“p”). removeClass(“other”) . removeClass(“main”)或者
$(“p”). removeClass(“other main”)
(5) 切换样式
(1st) toggle(function(){},function(){})
(2nd) $(“p”). toggleClass(“other”)//如果类名存在则删除,不存在则添加
(6) $(“p”). hasClass(“other”)判断是否含有某个样式
3) html():
(1) 获取html()
$(“p”). html() 获取p里面的html内容
(2) 设置html()
$(“p”). html(“<b>设置html()</b>”)设置p里面的html内容
4) text()
(1) 获取text ()
$(“p”). text () 获取p里面的文本内容
(2) 设置text ()
$(“p”). text (“设置html()”)设置p里面的文本内容
5) val()【相当于js的value属性】
(1) 能获取属性也能设置属性
(2) 能使select()、checkbox()、radio()相应的选项被选中
3、 DOM操作(遍历节点)
1) childer() 子元素集合
2) next() 匹配元素后面紧邻的同辈元素
3) prev() 匹配元素前面紧邻的同辈元素
4) silbings() 匹配元素前后紧邻的同辈元素
5) closest(“xx”) 取得最近的匹配元素
6) parent()、parents()
4、 DOM操作(CSS)
1) 单个样式:$("p”).css(“color”,”red”);
2) 多个样式:$("p”).css({“color”:”red”,” opacity”:”0.5”});
3) offset();获取元素在当前视窗的相对位移
4) position();
5) scrollTop()、scrollLeft()
第四章
1、 事件绑定:bind(“click”, fn);有三个参数,但是第二个参数一般作为event.data属性传递给对象的额外数据对象,一般没用它。
2、 合成事件:hover()【替代的是mouseenter、mouseout】、toggle()
3、 事件冒泡
1) 事件对象【单击p标签时,事件对象就会被创建,事件对象只有事件处理函数能访问到,事件处理完毕,事件对象就会被销毁】:$("p”).bind(“click”,function(event){})
2) 防止事件冒泡:加上event.stopPropagation()
3) 阻止默认行为:event.preventDefault();【比如有时候提交按钮时,检查到表单不合法,阻止表单提交】
4) 阻止事件冒泡和默认行为可以直接简写成:return false;
5) jQuery不支持事件捕获
4、 事件对象的属性:
1) event.type 获取事件类型
2) event. preventDefault()
3) event. stopPropagation()
4) event.target
5) event.relatedTarget
6) event.pageX和event.pageY
7) event.which鼠标单击时,获取鼠标的左(1)、中(2)、右(3)键
8) event.metaKey
5、 移除事件
1) unbind(【事件类型】,【要移除的函数】)
(1) $("p”).unbind(“click”);
(2) $("p”).unbind(“click”,function(){});
(3) 如果前面的$("p”).bind(“click”,mgFn=function(){});
这样的话:$("p”).unbind(“click”, mgFn);
2) one(【事件类型】,【数据,可不传】,【函数】)//处理函数只执行一次
6、 模拟操作
1) 当用户一进入页面后就触发事件:$("p”).trigger(“click”)或者$("p”). click()
2) 触发自定义事件:$("p”).trigger(“myclick”)
3) 传递数据:trigger (【事件类型】,【要传递的附加数据】)
eg: $("p”).trigger(“myclick”,function(event,msg1,msg2){})
4) 执行默认操作
(1) trigger()触发事件后,会执行浏览器默认操作$("input”).trigger(“focus”)
(2) 不执行浏览器默认操作$("input”).triggerHandler(“focus”)
7、 其他方法:
1) 绑定多个事件bind(“mouseover mouseout ”, fn);
2) 添加事件命名空间(可以多个事件用同一个命名空间)
bind(“mouseover.plugin ”, fn);
3) 元素绑定相同事件,以不同命名空间进行调用
bind(“mouseover ”, fn); bind(“mouseover.plugin ”, fn);
8、 动画
1) show()和hide()-----------------------toggle()
2) fadeIn()和fadeOut()-----------------fadeToggle()
3) slideUp()和slideDown()-----------------slideToggle()
4) animate(【样式属性与值】,【速度参数可选】,【动画完成时的函数,可选】)
(1) $("p”). animate({left:”+=50px”,opacity:”0.5”},3000)
(2)
$("p”). animate({left:”+=50px”,opacity:”0.5”},3000,function(){ $(this).css(“border”:”1px solid blue”);//最后一步执行 })
5) 停止动画:stop(【是否清空为执行完的动画队列,(true/false),可选】,【是否直接将正在执行的动画跳转到末状态,(true/false),可选】)
PS:如果直接使用stop()就会立即停止正在执行的动画
6) 判断是否处于动画状态:is(“: ”)
eg:$("p”).is(“:animate”)
7) 延迟动画:delay(1000)
8) 其他动画方法:
(1) toggle(speed,[callback])
(2) fadeToggle(speed,[easing] ,[callback])
(3) fadeTo(speed,opacity ,[callback])
(4) slideToggle(speed,[easing] ,[callback])
第五章
1、 IE6不支持除超链接元素之外的:hover伪类选择符,可以使用css中设置样式,然后再脚本中使用addClass
2、 复选框
1) 反选操作:
$(‘[name=item]:checkbox’).each(function(){ this.checked = !this.checked; })
2) 全选/全不选用同一个复选框:
$(‘[name=item]:checkbox’).attr(“checked”,this.checked);
3、 表格的索引$(“tr:【odd/even】”)从0开始,所以第1行是偶数,
不过当$(“tbody>tr:【odd/even】”)时1是奇数
4、 end()可以让一个事件从回$(this)对象
5、 表格:
1) 带有复选框:
$("tbody>tr").click(function(){ //判断当前是否选中 var hasSelected = $(this).hasClass("selected"); //如果选中,则移出selected类,反之 $(this)[hasSelected?"removeClass":"addClass"]("selected"); //查找内部的checkbox,设置对应的属性 $(this).find(":checkbox").attr("checked",!hasSelected); })
2) 表格的展开和关闭
通过控制tr的class和id
(1) 比如父行的class=”parent”和id=”row_01/02……”
子行的class=”child_ row_01/02……”
(2) jQuery代码为:
$(“tr.parent”).click(function(){ $(this).toggleClass(“selected”).sibling(“.child_”+this.id).toggle(); })
(3) 当有父行是默认展开的话,当用户进入页面时,默认需要收起来,只要在上面那个代码后面再加上.click()
3) 表格内容筛选:搜索框里面输入变量值
$(“#filterName”).keyup(function(){ $(“table tbody tr”).hide().filter(“:contains(‘”+( $(this).val() )+”’)”).show(); }). keyup ();//DOM加载完了之后,绑定事件完成时候触发
《锋利的jQuery》心得笔记--Two Sections的更多相关文章
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 《锋利的jQuery》心得笔记--Four Sections
第八章 1. 当父元素设置position:relative的时候,子元素设置position:absolute.这个子元素设置在父元素的任何位置. 第九章 1. 对可视区进行纠正,通知浏 ...
- 《锋利的jQuery》心得笔记--Three Sections
第六章 1. JavaScript的Ajax的实现步骤: 1) 定义一个函数用来异步获取信息 function Ajax(){ } 2) 声明: var xmlH ...
- 《锋利的jQuery》心得笔记--One Sections
第一章 1. $是jQuery的一个简写形式 2. 在jQuery中无法使用DOM对象的任何方法:比如:$ (“#id”).innerHTML.$ (“#id”).checked, 可以使 ...
- 锋利的JQuery 学习笔记
第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);} ...
- 锋利的jquery学习笔记
1.$("#tt")获取的永远都是一个jquery对象,所以要判断页面上是否存在某个对象不能像js中 if($("#tt")){ } 而是通过: ){ } ps ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
随机推荐
- TP复习16
'APP_GROUP_LIST' => 'Home,Admin', //项目分组设定'DEFAULT_GROUP' => 'Home', //默认分组 开分组复制上面 AjaxReturn
- iOS开发——实用技术OC篇&单例模式的实实现(ACR&MRC)
单例模式的实实现(ACR&MRC) 在iOS开发中单例模式是一种非常常见的模式,虽然我们自己实现的比较少,但是,系统却提供了不少的到来模式给我们用,比如最常见的UIApplication,No ...
- 自增锁ID复用问题
mysql> select * from pp; +----+------+ | id | name | +----+------+ | xx | | xx | | xx | | xx | | ...
- 理解Linux系统中的load average(图文版)转
一.什么是load average? linux系统中的Load对当前CPU工作量的度量 (WikiPedia: the system load is a measure of the amount ...
- DB2 重新设定表自增字段的当前值
转自:http://blog.csdn.net/jionghan3855/article/details/2709073 1.ALTER TABLE UKEY_INFO_TAB ALTER COLUM ...
- Spark SQL - DataFrame
1 Overview Spark SQL is a Spark module for structured data processing. It provides a programming abs ...
- 终端I/O之行控制函数
下列4个函数提供了终端设备的行控制能力.其中,filedes引用一个终端设备,否则出错返回,errno设置为ENOTTY. #include <termios.h> int tcdrain ...
- PEAR:使用PHPDoc轻松建立你的PEAR文档
对于一个开发人员,文档总是最感到头疼的事情之一.而且,很可能你对待文档会采取截然不同的2种态度: 当你使用别人的代码库的时候,最希望得到的是它的技术文档,尤其是当时间很紧,而你又不得不硬着头皮去读那些 ...
- solr 范围查询
[]表示查询一个包括边界范围, {}表示查询一个不包括边界范围 A TO * 表示没有上界即>=A或是>A ,视使用的是[]还是{}而定 * TO A 表示没有下界即<=A或是< ...
- ios uitableviewcell动态计算高度
#import <UIKit/UIKit.h> @interface TestCell : UITableViewCell @property (weak, nonatomic) IBOu ...