链式操作
$(".hasclass").click(function(){
$(this).addClass("highlight").children('a').show().end().siblings().removeClass
("highlight").children("a").hide();
});
对于同一个对象不超过3个操作的,可以直接写成一行,对于同一个对象的较多操作,建议每行写一个操作。
$("#table>toby>tr:has(td:last:has(:checkbox))").css("background","red");
:has匹配含有选择器所匹配的元素的元素 // 第一个元素值得是#table>toby>tr 类似于这样的
第二个“元素”指的是:has(selector) 参数是一个用于筛选的选择器
jquery对象是一个数组对象,可以通过[index]|get(index),转换成dom对象
如果是id的话 虽然不能重复 只有唯一的一个 但是也是 数组对象 ,但是如果是class 的话 dom也是一个
数组对象了
js:
var items = document.getElementsByTagName("p");//获取页面中的所有元素
for(var i=0;i<items.lenght;i++){
items[i].onclick = function(){
//doing something
}
}
js中的window.onload 是等dom 文件及图片都加在后才能触发事件 $(function(){});只要dom树加载完毕后就
能触发事件;
平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂
$(document).ready(function(){
var $cr=$("#cr");
var cr=$cr[0];
$cr.click(function(){
if(cr.checked){//dom方式判断 //jquery $cr.is(:checked)
alert('gagag');
}
});
});
is() 参数可以是函数 , 选择器 , 一个dom对象,
jquery选择器的写法于css选择器的写法相似 只是一个是执行行为,一个是添加样式 jquery也操作css
需要注意的是:$("#tt")获取的永远是对象,即使网页上没有此元素,因此当用jquery检查某个元素在网页上是
否存在时,不能使用代码:
if($("#tt")){
//do something
}
应该使用:
if($("#tt").length>0){
//do something
}
var item = document.getElementById('td');
var tbody = item.getElementsByTagName('tbody')[0];//获取表格的第一个tbody元素
var trs =tbody.getElementsByTagName('tr');//获取tbody元素下的所有tr元素
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor = "#888";
}
}
在层次选择其中 $("prev~siblings") 于nextAll() 是等价的 都是去prev 后面siblings的元素
$('prev').nextAll(siblings); 选取prev 后面siblings所有的同辈元素
$(prev+next);于 next() 相等
:选择器
:not (selector) 去除所有与(给定选择器 指的就是selector)的元素
:animagte 筛选正在动画的元素
内容选择器
:contains(text)
:empty()选取不包含子元素的空元素 与它相反地是 :parent()
:has(p) $("div:has(p)") 选取含有<p>元素的div元素
可见性选择器:
:hidden 可见
:visible 不可见
$("div .class:visbile').css('bgcolor','red');
在可见性的选择器中,需要注意选择器:hidden,它不仅包括样式属性display为none的元素,
<input type='hidden'/>和 visibility:hidden之类的元素
show ()是jquery的方法,它的功能是显示元素,2000是时间 单位:毫秒
属性选择器:
$("div[id][title$='test'])选取拥有属性的id,并且属性title以test结束的<div>元素
注意:选择器是行为与文档内容之间的链接的纽带,选择器最终的目的就是能够轻松的找到文档中的元素;
Dom Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网
页,也可以来处理任何一种使用标记语言编写出来的文档,列如xml.
HTML_DOM 和DOMCore都可以获取对象、属性 但是HTML_DOM只能用来处理web文档。
CSS_DOM 是针对css的操作:
element.style.color = 'color';
对文本节点的一些操作:
prepend()将文本节点放入此内容的前面 $('p')/prepend('<b>你好</b>') 结果:<p><b>你好</b>我想说
:</p>
insertbefore before after afterbefor 这几个查手册去
var $one_li = $("ul li:eq(1)")//获取第一个ul对象节点中的第二个li元素节点
remove()是删除节点 但是返回值是自己删除的那几个节点
empty() 是清空节点,它能清空元素中的所有后代节点。是清空元素里的内容:注意是元素里
clone 用的比较少,有的商品网站上用这个 把东西直接拉入购物车用的就是clone(true)复制 里面有个参
数
replaceWith()是将所有匹配的元素都替换成指定的html或者dom元素。
replaceAll()与上面的相同只是颠倒了操作
注意:如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新
元素上重新绑定事件。
wrap() ;$('strong').wrap("<b></b>")//用<b>标签把<strong>元素包裹起来
这个是把匹配的单独包裹起来 wrapAll()是总体包裹起来
wrapInner 是把每个匹配的元素节点的内容包裹起来
$('p').attr({'key':'value'});
jquery中的很多方法都是同一个函数实现获取和设置的,列如上面的attr(),类似的还有html()text()height()
widht()val()css()
toggle () toggleClass() 两者的性质是一样的 只是执行的行为不一样
html()方法可以用于xhml 但不能用于xml
javascript中的innerText属性并不能在Firefox浏览器下运行,而jquery的text()方法支持所有的浏览器
text()方法对html文档和xml文档都有效
this.datevalue 指的就是当前文本框的默认值
大家知道val()能获取对象的值,设置对象的值 ,它也能是select 、checkbox、radio相应的对象被选中,在
表单操作中会经常用到。
如果要是两个都选中的话,$('#multiple').val(['2号','3号']);以数组的形式复制
在jquery中,val()方法是从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会被选中
<option value='2号'>2号</option>
<option value='1号'>2号</option>
sibling()获取此对象的前后同辈元素
Css-Dom 方法:
$('p').css({'fontSize':'30px','backgroundColor':'#88888'})
注意:如果是数字,将会被自动转化为像素值。
在css方法中,如果属性中带有‘-’符号,列如 font-size和background-color属性,如果在设置这些属
性的值的时候不带引号,那么就要用驼峰写法,列如:$('p').css
({fontSize:'30px',backgroundColor:'#888888'});如果键带上引号写成这两种都行
offsect() 获取某个元素的相对位置
position() 获取元素相对于最近的一个position样式属性设置的relative或者absolute的祖父节点的相对偏移
,
window.onload 的dom和图片加载完后才触发事件 $(function(){});dom加载完后就触发
$(window).load(function(){}) 等价于(不是全等于) window.οnlοad= function(){}
$(document).ready(function(){}); == $().ready(function(){}); ==$(function(){});
bind(1can,2can,3can) 第一个参数是事件类型:blur focus load resize scroll unload click dblclick
mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown
keypress keyup error 也可以是自定义名称 第二个参数作为event.data属性值传给对象 第三个处理函数
$(function(){
$("pan h5.head").bind('click',function(){
$(this).next('div.content').show();
})
})
这里的this引用的是携带相应行为的DOm元素。为了使该dom元素能够使用jquery中的方法,可以使用$(this)将
其转换为jquery对象
jquery中的合成事件 hover和toggle 都属于jquery自定的方法
toggle方法用于模拟鼠标连续单机事件。第一次单机元素,触发指定的第一个函数;再次单机同一个元素时,触
发指定的第二个函数,依次触发 轮番调用
toggle()方法另一个作用是切换元素的可见状态。
事件冒泡:
<div><span>内部span的内容</span>内部div的内容</div>
当div span 上都绑定click事件时 当点击span时 也会触发div事件 (从里往外 )
这就是事件冒泡,
防止事件冒泡的方法是event.stopPropagation()事件的一个方法
event.preventDefault();方法来阻止元素的默认行为。
event.target() //获取触发事件的元素
$("a[href=http://google.com]").click(functiton (event){
alert(event.target.href);
return false;
});
event.pageX() event.pageY() 获取到相对于页面的x和 y的坐标 如果页面上有滚动条,还要加上滚动条的
宽度或高度,IE还要减去默认的2px的边框。
event.which()是获取单机事件的左 中 右
one() 与bind 类似 执行一次 随后就不执行了
trigger()可以模拟事件去执行 比如进入页面就执行
它不仅能触发浏览器的具有相同名称的事件,也可以触发自定义名称的事件。
$("#bnt").trigger("click"); $("#bnt").click();
触发自定义事件
$("#bnt").bind("myClick",function(event, 参数1,参数2,参数3){
$("#test").append("<p>我的自定义事件</p>");
});
$("#bnt").trigger("myClick");
它有两个参数 类型 数组 ['as','gd','ew'] 这样的格式
trigger触发事件后,会执行浏览器的默认操作 列如 input 元素会得到焦点。
triggerHander()可以取消默认行为
$(".hasclass").click(function(){
$(this).addClass("highlight").children('a').show().end().siblings().removeClass
("highlight").children("a").hide();
});
对于同一个对象不超过3个操作的,可以直接写成一行,对于同一个对象的较多操作,建议每行写一个操作。
$("#table>toby>tr:has(td:last:has(:checkbox))").css("background","red");
:has匹配含有选择器所匹配的元素的元素 // 第一个元素值得是#table>toby>tr 类似于这样的
第二个“元素”指的是:has(selector) 参数是一个用于筛选的选择器
jquery对象是一个数组对象,可以通过[index]|get(index),转换成dom对象
如果是id的话 虽然不能重复 只有唯一的一个 但是也是 数组对象 ,但是如果是class 的话 dom也是一个
数组对象了
js:
var items = document.getElementsByTagName("p");//获取页面中的所有元素
for(var i=0;i<items.lenght;i++){
items[i].onclick = function(){
//doing something
}
}
js中的window.onload 是等dom 文件及图片都加在后才能触发事件 $(function(){});只要dom树加载完毕后就
能触发事件;
平时用到的jquery对象都是通过$()函数制造出来的,$()函数就是一个jquery对象的制造工厂
$(document).ready(function(){
var $cr=$("#cr");
var cr=$cr[0];
$cr.click(function(){
if(cr.checked){//dom方式判断 //jquery $cr.is(:checked)
alert('gagag');
}
});
});
is() 参数可以是函数 , 选择器 , 一个dom对象,
jquery选择器的写法于css选择器的写法相似 只是一个是执行行为,一个是添加样式 jquery也操作css
需要注意的是:$("#tt")获取的永远是对象,即使网页上没有此元素,因此当用jquery检查某个元素在网页上是
否存在时,不能使用代码:
if($("#tt")){
//do something
}
应该使用:
if($("#tt").length>0){
//do something
}
var item = document.getElementById('td');
var tbody = item.getElementsByTagName('tbody')[0];//获取表格的第一个tbody元素
var trs =tbody.getElementsByTagName('tr');//获取tbody元素下的所有tr元素
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor = "#888";
}
}
在层次选择其中 $("prev~siblings") 于nextAll() 是等价的 都是去prev 后面siblings的元素
$('prev').nextAll(siblings); 选取prev 后面siblings所有的同辈元素
$(prev+next);于 next() 相等
:选择器
:not (selector) 去除所有与(给定选择器 指的就是selector)的元素
:animagte 筛选正在动画的元素
内容选择器
:contains(text)
:empty()选取不包含子元素的空元素 与它相反地是 :parent()
:has(p) $("div:has(p)") 选取含有<p>元素的div元素
可见性选择器:
:hidden 可见
:visible 不可见
$("div .class:visbile').css('bgcolor','red');
在可见性的选择器中,需要注意选择器:hidden,它不仅包括样式属性display为none的元素,
<input type='hidden'/>和 visibility:hidden之类的元素
show ()是jquery的方法,它的功能是显示元素,2000是时间 单位:毫秒
属性选择器:
$("div[id][title$='test'])选取拥有属性的id,并且属性title以test结束的<div>元素
注意:选择器是行为与文档内容之间的链接的纽带,选择器最终的目的就是能够轻松的找到文档中的元素;
Dom Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网
页,也可以来处理任何一种使用标记语言编写出来的文档,列如xml.
HTML_DOM 和DOMCore都可以获取对象、属性 但是HTML_DOM只能用来处理web文档。
CSS_DOM 是针对css的操作:
element.style.color = 'color';
对文本节点的一些操作:
prepend()将文本节点放入此内容的前面 $('p')/prepend('<b>你好</b>') 结果:<p><b>你好</b>我想说
:</p>
insertbefore before after afterbefor 这几个查手册去
var $one_li = $("ul li:eq(1)")//获取第一个ul对象节点中的第二个li元素节点
remove()是删除节点 但是返回值是自己删除的那几个节点
empty() 是清空节点,它能清空元素中的所有后代节点。是清空元素里的内容:注意是元素里
clone 用的比较少,有的商品网站上用这个 把东西直接拉入购物车用的就是clone(true)复制 里面有个参
数
replaceWith()是将所有匹配的元素都替换成指定的html或者dom元素。
replaceAll()与上面的相同只是颠倒了操作
注意:如果在替换之前,已经为元素绑定事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新
元素上重新绑定事件。
wrap() ;$('strong').wrap("<b></b>")//用<b>标签把<strong>元素包裹起来
这个是把匹配的单独包裹起来 wrapAll()是总体包裹起来
wrapInner 是把每个匹配的元素节点的内容包裹起来
$('p').attr({'key':'value'});
jquery中的很多方法都是同一个函数实现获取和设置的,列如上面的attr(),类似的还有html()text()height()
widht()val()css()
toggle () toggleClass() 两者的性质是一样的 只是执行的行为不一样
html()方法可以用于xhml 但不能用于xml
javascript中的innerText属性并不能在Firefox浏览器下运行,而jquery的text()方法支持所有的浏览器
text()方法对html文档和xml文档都有效
this.datevalue 指的就是当前文本框的默认值
大家知道val()能获取对象的值,设置对象的值 ,它也能是select 、checkbox、radio相应的对象被选中,在
表单操作中会经常用到。
如果要是两个都选中的话,$('#multiple').val(['2号','3号']);以数组的形式复制
在jquery中,val()方法是从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会被选中
<option value='2号'>2号</option>
<option value='1号'>2号</option>
sibling()获取此对象的前后同辈元素
Css-Dom 方法:
$('p').css({'fontSize':'30px','backgroundColor':'#88888'})
注意:如果是数字,将会被自动转化为像素值。
在css方法中,如果属性中带有‘-’符号,列如 font-size和background-color属性,如果在设置这些属
性的值的时候不带引号,那么就要用驼峰写法,列如:$('p').css
({fontSize:'30px',backgroundColor:'#888888'});如果键带上引号写成这两种都行
offsect() 获取某个元素的相对位置
position() 获取元素相对于最近的一个position样式属性设置的relative或者absolute的祖父节点的相对偏移
,
window.onload 的dom和图片加载完后才触发事件 $(function(){});dom加载完后就触发
$(window).load(function(){}) 等价于(不是全等于) window.οnlοad= function(){}
$(document).ready(function(){}); == $().ready(function(){}); ==$(function(){});
bind(1can,2can,3can) 第一个参数是事件类型:blur focus load resize scroll unload click dblclick
mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown
keypress keyup error 也可以是自定义名称 第二个参数作为event.data属性值传给对象 第三个处理函数
$(function(){
$("pan h5.head").bind('click',function(){
$(this).next('div.content').show();
})
})
这里的this引用的是携带相应行为的DOm元素。为了使该dom元素能够使用jquery中的方法,可以使用$(this)将
其转换为jquery对象
jquery中的合成事件 hover和toggle 都属于jquery自定的方法
toggle方法用于模拟鼠标连续单机事件。第一次单机元素,触发指定的第一个函数;再次单机同一个元素时,触
发指定的第二个函数,依次触发 轮番调用
toggle()方法另一个作用是切换元素的可见状态。
事件冒泡:
<div><span>内部span的内容</span>内部div的内容</div>
当div span 上都绑定click事件时 当点击span时 也会触发div事件 (从里往外 )
这就是事件冒泡,
防止事件冒泡的方法是event.stopPropagation()事件的一个方法
event.preventDefault();方法来阻止元素的默认行为。
event.target() //获取触发事件的元素
$("a[href=http://google.com]").click(functiton (event){
alert(event.target.href);
return false;
});
event.pageX() event.pageY() 获取到相对于页面的x和 y的坐标 如果页面上有滚动条,还要加上滚动条的
宽度或高度,IE还要减去默认的2px的边框。
event.which()是获取单机事件的左 中 右
one() 与bind 类似 执行一次 随后就不执行了
trigger()可以模拟事件去执行 比如进入页面就执行
它不仅能触发浏览器的具有相同名称的事件,也可以触发自定义名称的事件。
$("#bnt").trigger("click"); $("#bnt").click();
触发自定义事件
$("#bnt").bind("myClick",function(event, 参数1,参数2,参数3){
$("#test").append("<p>我的自定义事件</p>");
});
$("#bnt").trigger("myClick");
它有两个参数 类型 数组 ['as','gd','ew'] 这样的格式
trigger触发事件后,会执行浏览器的默认操作 列如 input 元素会得到焦点。
triggerHander()可以取消默认行为