DAY62-前端入门-javascript（九）jQurey高级
JQ高级
一、选择器
1、css语法匹配
标签 | 类 | id | 交集
群组 | 后代 | 兄弟
伪类 | 属性
2、索引匹配
:eq(index) 匹配index索引值的元素
:gt(index) 匹配所有大于index索引值的元素
:lt(index) 匹配所有小于index索引值的元素
:even() 匹配所有偶数索引值的元素
二、文本、属性与类
1、文本
<script type="text/javascript">
//text操作
//无参就是获取原有的文本
$ele.text()
//有参就是对文本的修改
$ele.text(‘。。。’)
//html操作
//会对添加文本里的标签解析
$ele.html()
//val操作
//表单元素的内容
$ele.val()
</script>
2、样式
// 赋值
// 链式赋值
$('div').css("width", "200px").css("height", "200px");
// 对象赋值
$('div').css({
width: 300, // 默认添加单位
height: "300px",
"background-color": "pink", // key为css连接语法,js不支持这样的标识符,用字符串形式表示
borderRadius: '50%' // 小驼峰命名
})
// 取值: 行间式 | 计算后样式
console.log($('div').css("width"));
console.log($('div').css("background-color"));
3、属性
attr(name|pro|key,val|fn)设置或返回被选元素的属性值。
removeAttr(name) 从每一个匹配的元素中删除一个属性
prop(n|p|k,v|f) 获取在匹配的元素集中的第一个元素的属性值。
removeProp(name) 用来删除由.prop()方法设置的属性集
4、类
addClass(class|fn) 追加一个新类名
removeClass([class|fn]) 删除指定类名
toggleClass(class|fn[,sw]) 切换类名
三、事件
1、on绑定
on(事件名, {key:value}参数, 回调函数)
$('.box').on('click', {num: 10}, function(ev) {
console.log(ev.data.num)
})
// 数据由ev.data存储
2、非on事件
事件名({key:value}参数, 回调函数)
$('.box').click({num: 10}, function(ev) {
console.log(ev.data.num)
})
// 数据由ev.data存储
3、解绑
解绑所有
$('.box').off()
四、文档操作
1、内部插入
append(content|fn)
向每个匹配的元素内部追加内容。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
<p>I would like to say: <b>Hello</b></p>
appendto(content)
把所有匹配的元素追加到另一个指定的元素元素集合中。
HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>
prepend(content|fn)
向每个匹配的元素内部前置内容
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
<p><b>Hello</b>I would like to say: </p>
prependTo(content)
把所有匹配的元素前置到另一个、指定的元素元素集合中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>
2、外部插入
after(content|fn)
在每个匹配的元素之后插入内容
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>
before(content|fn)
在每个匹配的元素之前插入内容。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
<b>Hello</b><p>I would like to say: </p>
insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>
insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>
3、包裹
wrap(html|ele|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来
HTML 代码:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrap(function() {
return '<div class="' + $(this).text() + '" />';
});
结果:
<div class="container">
<div class="Hello">
<div class="inner">Hello</div>
</div>
<div class="Goodbye">
<div class="inner">Goodbye</div>
</div>
</div>
unwrap()
这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。
HTML 代码:
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
jQuery 代码:
$("p").unwrap()
结果:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
wrapAll(html|ele)
将所有匹配的元素用单个元素包裹起来
html描述:
用一个生成的div将所有段落包裹起来
jQuery 代码:
$("p").wrapAll("<div></div>");
elem描述:
用一个生成的div将所有段落包裹起来
jQuery 代码:
$("p").wrapAll(document.createElement("div"));
wrapInner(html|ele|fn)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
HTML 代码:
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
jQuery 代码:
$('.inner').wrapInner(function() {
return '<div class="' + $(this).text() + '" />';
});
结果:
<div class="container">
<div class="inner">
<div class="Hello">Hello</div>
</div>
<div class="inner">
<div class="Goodbye">Goodbye</div>
</div>
</div>
4、替换
replaceWith(content|fn)
将所有匹配的元素替换成指定的HTML或DOM元素。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
5、删除
empty()
删除匹配的元素集合中所有的子节点。
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
remove([expr])
从DOM中删除所有匹配的元素。除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>
detach([expr])
从DOM中删除所有匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach(".hello");
结果:
how are <p>you?</p>
6、复制
clone([Even[,deepEven]])
克隆匹配的DOM元素并且选中这些克隆的副本。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
五、动画
1、基本
show([s,[e],[fn]]) 显示隐藏的匹配元素。
hide([s,[e],[fn]]) 隐藏显示的元素
toggle([s],[e],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
2、滑动
slideDown([s],[e],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([s,[e],[fn]]) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn]) 通过高度变化来切换所有匹配元素的可见性
3、淡入淡出
fadeIn([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn]) 通过不透明度的变化来实现所有匹配元素的淡出效果
fadeTo([[s],o,[e],[fn]]) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度
fadeToggle([s,[e],[fn]]) 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
4、自定义
animate(p,[s],[e],[fn]) 用于创建自定义动画的函数。
六、结构关系
children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合
next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll([expr]) 查找当前元素之后所有的同辈元素。
prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll([expr]) 查找当前元素之前所有的同辈元素
siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
