前言
本见书上JavaScript事件一块较为繁琐细节甚多以为是要花上好一段时间才能学完再来做笔记。结果是当天晚上就粗粗看完内容后决定暂且不做笔记，转而在w3cschool上浏览完了jQuery教程昨天来不及做，今天起来就开始补上这篇小记。
效果动画
1.隐藏和显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);//切换
可选的speed参数:可选值为"slow","fast"或者毫秒数
$(selector).hide(1000);
可选的callback参数是在隐藏或显示完成后执行的函数名称
2.淡入淡出：
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);//透明度变化
3.滑动：
$(selector).slideDown(speed,callback);//向下滑动显示元素
$(selector).slideUp(speed,callback);//向上滑动显示元素
$(selector).slideToggle(speed,callback);
4.动画：
语法：$(selector).animate({params},speed,callback);
该语句几乎可以操作所有的css属性，当需要操作元素的位置属性是需将元素的position设置为relative、fixed 或 absolute。同时填写css属性名称使用驼峰形式。
存在动画队列：即一个元素完成多条动画指令：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
有个链接功能：即对于同一个元素的多条语句（动作或方法）可以通过链接连在一起：
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
5.停止动画
单独列出这一条语句是因为该语句存在两个参数需要试验过理解了才能熟练的使用：$(selector).stop(stopAll,goToEnd);
stopAll表示是否停止动画队列里所有动画默认为false
goToEnd只有设置了stopAll才有效，表示是否跳过动画达到当前动画语句的最后的形态
而如果stopAll为false则立马跳过第一条动画立即执行下一条动画指令。
ps:描述并不清楚，若回顾这篇文章还是需要自己动手实践过才知道两个参数的实际意义。
6：捕获
所谓捕获就是获取东西，可以获取的有内容和属性。
1.获取内容：
text()返回所选元素的文本内容
html()返回所选元素的内容包含HTML标记
val()返回表单字段的值（ex:input里的输入值）
<p>名称: <input type="text" id="test" value="someText"></p>
<button>显示值</button>
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());
});
});
同时这三个函数都存在回调函数：
$(element).text(function(i,origText){
return
"The old text: "+origText + "New text : hello world!";
});
return的值就是要写入element中的新值，origText是旧值，i是该元素的的下标
2.获取属性
$(element).attr("attrName");
而attr()方法允许同时设置多个属性：
$("button").click(function(){
$("#w3s").attr({
"href" : "//www.jianshu.com/",
"title" : "简书官网"
});
});
而attr()方法的回调函数用法如下：
$("button").click(function(){
$("#link_test").attr("href", function(i,origValue){
return origValue + "/u/caf9042c3d27";
});
});
个人认为该回调函数更方便的获得了旧属性来进行接下来的操作。
7.删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
remove() 方法也可接受一个参数，允许对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
$("p").remove(".italic");
//不是删除p元素中class为italic的元素而是删除所有class为italic的p元素
8.添加元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
这些方法都可以接受无限数量个新元素
function appendText()
{
var txt1="<p>Text.</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("Text."); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("p").append(txt1,txt2,txt3); // 追加新元素
}
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
9.操作类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css("propertyname") - 返回首个匹配元素的样式属性值
同时可以通过 css("propertyname","value");设置属性值
如需设置多个 CSS 属性，请使用如下语法：
element.css({"propertyname":"value","propertyname":"value",...});
10.遍历DOM
向上遍历DOM树：
parent()//返回所选元素的直接父元素
parents()//返回所选元素的所有祖先元素，一路向上直到文档的根元素,<html>
parentsUntil()
parents()方法存在可选参数(祖先元素的类型)来过滤搜索结果：
$(document).ready(function(){
$("span").parents("ul");
});
parentsUntil()方法返回两个元素之间的所有被选元素的祖先元素（不包括边界元素）:
<body class="ancestors"> body (曾曾祖父元素)
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
ul和li有红色边框显示
而将parentsUntil参数变成parentsUntil(".ancestors")则在上面的基础上div也会拥有红色边框.说明该参数可以是任何 jQuery 选择器的语法。
向下遍历简单了许多：
children()//没有参数则返回直接子元素、也可以有参数对结果进行过滤
find()//有参数对搜索结果进行过滤,该参数可以是任何 jQuery 选择器的语法。
返回div的所有后代：$("div").find("*");
水平遍历：
水平遍历分为两大类：
1.返回所有的兄弟元素：
siblings()
//可以有参数，和遍历祖先和孩子一样填写参数
2.单一方向遍历：
分为向前向后遍历，在此只记录向后遍历：
next()//返回当前元素的下一个兄弟元素只返回一个元素所以没有参数
nextAll()//返回所有跟随元素且可以有参数参数填写同上文
nextUntil()//用法与parentsUntil()类似也可以有参数
向前遍历：
preve(),prevAll(),prevUntil()
11.过滤
在选取DOM中的节点时存在了过滤的方法来缩小搜索范围：
first(),
last()，
eq(n)//第n个元素从0开始计数
filter("")//通过css选择器来缩小范围表示符合filter内的条件的某些元素
not()//与filter正好相反
结尾
内容不算很多，但是记录下来也花了很多时间，本是想分好几天看完，心有愧疚地玩了会游戏又开始逼着自己看完了内容。看的时候就开始记录笔记为了方便写简书，可能是刚开始记录的原因实在是有点烦人有点累，坚持坚持就好。
网友评论