1. 没写window.onload，xxx.getElementByTagName会报错， xxx必须有ID或者为document。
2.jQuery.noConfict() :
①先导其他库：
~
jQuery(function(){...用jQuery(" ").xxx...})
$(" ")..其他库
~
jQuery(function($){...用$(" ").xxx...})
$(" ")..其他库
var $j = ~
$j(function(){...用$j(" ").xxx...})
$(" ")..其他库
~
(function($){
$(function(){ ...用$(" ")})
});
$(" ")..其他库
②先导jQuery:
jQuery(function(){ 直接用jquery})
$(" ")..其他库
3.选择器
(1). 基本选择器
(# ) (. ) ( ) (*) ( , , , ) ： id / class / 标签 / 多种标签
(2). 层次选择器（xxOyy）
( )(>)(+)(~): xx所有的后代yy / xx的子元素yy / xx后的弟弟yy / xx后的所有弟弟yy
(3). 基本过滤选择器 （div: xx 索引从0开始）
:first/last : 组内第一个 / 最后一个元素
:not(selector) : 不为selector的div
:even/odd :组内偶数 / 奇数
:eq / gt / lt (index) :组内等于 / 大于 / 小于index的
:header / animated / focus ： 标题/动画/获取焦点
(4). 内容选择过滤器
:contains("string") ：文本包括string的
:empty / parent : 不含 / 含有子元素或文本的
:has(selector) ：后代有selector的父
(5). 可见性过滤选择器
:hidden ： 不可见得: input type="hidden" / div style="display:none / visibility:hidden"
:visible ： 可见
(6). 属性过滤选择器
[attr] ： 有attr属性的
[attr = / != value] ：attr值为 / 不为value的；
[attr ^= / $= value ] ：attr值以value开始 / 结束
.. *= .. ： 含有
... |= .. ： 等于value 或前缀为前缀（value-xxx）
... ~= ... ：值为以空格分隔的数组且数组中包含value字符串
[attr1][attr2][attr3] : 多个
(7).子元素过滤选择器（索引从1开始，：前加空格）选子元素
：nth-child( index / even / odd / 3n / 3n+1) ： 每个父亲索引为 index / 偶 / 奇 / 3倍数 / 3倍加一 的子元素
：first /last /only -child ： 每个父亲 第一个 / 最后一个 / 唯一 的子元素
(8). 表单对象属性过滤选择器
：enable / disable ： 可用 / 不可用元素
：checked ： 被选中的（单选框 复选框）
：selected ： 被选中的（下拉列表）
(9).表单选择器
：input : 所有（input textarea select button）
：text : 单行文本框
：password / radio / checkbox : 密码框 / 单选框 / 多选框
：submit / image / reset / button ：提交按钮 / 图像按钮 / 重置按钮 / 所有按钮
：file ：上传域
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4.选择器中. # ( ] 等特殊字符需要转义 ： \\[1\\]
5.伪类清除浮动
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{zoom:1} //兼容ie67
7.text-decoration:none;
8. 给宽； margin : 上空高 auto；
9.fontsize可%
三。dom
1.创建节点：
元素文本属性 var $xx = $("<li tittle='香蕉'>香蕉</li>")
2.插入节点(可用作移动：2插到3后)
$("p").append("xx") : <p>啊啊啊xx<p>
$("xx").appendTo("p") :<p>啊啊啊xx<p> （都是插在本标签的最后，区别：主被动）
$("p").prepend("xx") :<p>xx啊啊啊<p>
$("xx").prependTo("p") :<p>xx啊啊啊<p> （都是插在本标签的最前，区别：主被动）
$("p").after("xx") :<p>啊啊啊<p>xx
$("xx").insertAfter("p") :<p>啊啊啊<p>xx （都是插在标签外的后，区别：主被动）
$("p").before("xx") :xx<p>啊啊啊<p>
$("xx").insertBefore("p") :xx<p>啊啊啊<p> （都是插在标签外的前，区别：主被动）
3.删除节点
detach： 同remove但再用后绑定事件还有效
empty： 清空的意思 不返回
remove :返回被删除的节点（可留以后用：绑定事件无效）
4.复制节点
clone(boolean) : 默然false， true意为同时复制元素中所绑定的事件。
5.替换节点
$(a).replaceWith（b） = $(b).replaceAll(a) :用b替换a 绑定事件会消失。
6.包裹节点
$(a).wrap(b) :用b标签（"<b></b>"）把a包裹起来
$(a).wrapAll(b) :所有a合并到第一个a后,用b包裹所有a
$(a).wrapInner: a内加b包裹所有子元素
7.获取设置删除属性
获取 .attr("属性名")；
设置 .attr("属性名”，"属性值"） / .attr("名1":"值1" ，"名2":"值2"）；
删除 .removeAttr("属性名")；
1.6：prop():获取或设置匹配集里第一个元素的属性，removeProp删除
8.样式操作
可以class为属性名用attr获取更改 也可用 。addClass（“class名”）添加新类。（attr是覆盖，addClass是添加）
removeClass("类名1 类名2 类名3...")
toggleClass("类名1")：切换类名1（有/无）
hasClass("类名2")：有无类名2(true / false)
9.html 、文本、值
获取设置标签里所有内容（包括标签）：.html()
获取设置标签里所有文本（不包括标签） ：text()
值: 获取设置值。
.defaultValue 默认值;
选中select checkbox radio的选项：
$(select).val("option里的内容")；多选数组：(["op1","op2","op3"]);
$(":checkbox").val(["value1","value2","value3"]);
$(":radio").val(["value2"]);
也可用attr将要选中的选项的selected/checked属性设置为true
10.遍历节点
.children() ：子元素
.next():紧接着的弟弟
.prev() ： 紧接着的哥哥
.siblings() ：所有兄弟
.closest() ：从自身开始向上匹配，匹配到就返回，若一直没找到 返回空的jQuery对象 区别parent(父亲) 和 parents（众祖先）
11.CSS-DOM
.css() ： 可获取设置，用法同attr.多个： （{"background-color":"#666", ...}）不加引号需要用驼峰式 。.height/.width 取得直接宽高，css方法取得auto
.offset() ：元素在当前视窗的偏移 ：.left / .top
.position ：元素相对于最近的一个为relative或absolute的祖先节点的偏移 ： .left / .top
获取和设置滚动条的位置 ：.scrollTop() 距离顶端 .scrollLeft() 距离左侧。
四。事件和动画
1.widow.onload 和 $(document).ready()区别
1)执行时机
window.onload = function(){//..} 在所有元素加载完后执行 == $(window).load(function(){//...})，$(document).ready()在DOM节点加载完后执行 ；
2)执行次数
window.onload = one会覆盖前面的函数，只能写成window.οnlοad=function(){one();two();..}; ready可以写很多次；
3）ready可简写
$(document).ready(function(){//..}) == $(function(){ //..}) == $().ready(function(){ //...}) $()不写默认document
2.事件
1）绑定 ：
.bind（/事件类型["click"]/, /event.data[可选]/，/绑定函数[fn]/） click、mouseover等经常用的可简写 .click(function(){});
2)合成 ：
hover(fn1,fun2); 悬停 / 离开 替代mouseenter / mouseleave； toggle(fn1,fn2,fn3...)第n次点击
3）冒泡（从下到上）：
事件对象：绑定事件function（event）{}里的event在事件响应后被创建只对该函数有效，函数执行完后销毁。
停止事件冒泡： event.stopPropagation()
阻止默认行为：event.preventDefault()
同时阻止冒泡事件和默认行为： return false;
利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。ul e.target比li this更好：少遍历、新增li不用重新绑定。
4）捕获（从上到下）：
5)对象属性：
event.pageX/Y ：鼠标当前相对于页面的坐标
event.which ：在鼠标事件中获取鼠标左1、中2、右3键；在键盘事件中获取键盘的按键。
event.metaKey：键盘事件中获取<ctrl>键。
6）移除：
unbind（）： 1）无参数，全删2）事件类型，删该类型["click"] 3）事件类型+处理函数，则只删该函数。
one（）：一次性，用法同bind。
7）模拟操作：
$(a).trigger(b) ：模拟用户触发a的b操作。b可为浏览器支持操作也可为自定义操作；还可传参给响应函数 ： .trigger("myclick", ["aaa","ooo"]); 此方法不仅会触发事件还会执行默认操作，例：focus不仅触发绑定事件也会让目标元素获得焦点。 如果不想触发默认操作可用triggerHandler() 。
8） 其他
write less, do more: .bind("mouseover moueseout",function(){$(this).toggleClass("over");});
命名空间： .bind("click.plugin",function...) 。。。.unbind(".plugin")
同事不同名： .bind("click",..) 。。。.bind("click.plugin") 。。。.trigger("click!") ：有！ ：只触发click。 无！：都触发
3.动画
显示/隐藏 ：
淡入/淡出 ：
伸/缩：
自定义动画方法：
停止元素动画 ：
判断元素是否处于动画状态：
延迟动画：
切换隐现：
切换伸缩：
变不透明度：
切换不透明度：
五 表单表格：
1.表单
$("[name=items]:checkbox")
.each(function(){ //遍历选中集})
反选：原生DOM: this.checked = !this,checked;
1.6 prop()方法：只添加属性名称该属性就会生效； 只存在true/false的属性
$("option:selected",this);
e-mail：!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)
2.表格
$("tbody>tr:odd").
$("tr:contains('王五')").
$(this).addClass(。。).siblings().removeClass(。。).end().find(。。。).attr(。。。) : 加end：当前对象是this，siblings后对象变了，加end后返回this ;可先写完同对象的所有操作
$(this)[hasSelected?"removeClass":"addClass"]('leiming').find(':checkbox').attr('checked',!hasSelected) ;用boolean值和三目运算符简写
扫一扫
725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
