sdre

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)捕获(从上到下):

原生。       .addEventListener("click",function(e){ alert("parent事件被触发,"+e.target.id);},true) :第三个参数false为冒泡,true为捕获,默认false

5)对象属性:

event.type: 事件属性[click]
event.preventDefault() :阻止默认事件
event.stopPropagation():阻止事件冒泡
event.target :获取出发事件的元素
event.relatedTarget :存在过渡的事件的相关主体之一,对于mouseout:event.relatedtarget指向将进入的页面元素==event.toElement;而mouseover, 指向的是刚掠过的页面元素 == event.fromElement。

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.动画    

显示/隐藏 :

show/hide(可选毫秒单位「1000」,可选回调函数) :同时减少内容的宽度高度不透明度。

淡入/淡出 :

fadeIn/fadeOut(可选毫秒单位「1000」,可选回调函数) :只改变透明度。

伸/缩: 

 slideUp / slideDown(可选毫秒单位「1000」,可选回调函数) :只改变高度。

自定义动画方法:

 animate(params:属性名:”属性值”「left:"10px",height:"50px",opacity:"1"」,speed可选:速度「3000」,callback可选: 动画完成时执行的函数)               

停止元素动画 : 

stop(「clearQueue」,「gotoEnd」) true/false; stop():结束正在进行的动画执行下一阶段 ;clearQueue1:结束正在执行的动画并清空队列;gotoEnd:直接达到结束状态。

判断元素是否处于动画状态: 

.is(":animated")

延迟动画:

.animate(..).delay(1000);

切换隐现:

toggle()

切换伸缩:

slideToggle()

变不透明度:

fadeTo(speed,0.2);

切换不透明度:

fadeToggle();

                                                                                                                                                                                                                                                                                        


五 表单表格:

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值和三目运算符简写






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值