jquery note--czx

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

月光宝盒与你的jQuery
--------------2016.8.6 19：22

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

jQuery之样式篇

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

1获取对象
eg：
var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');
//通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组的对象这个对象里面其实是包含了DOM对象的信息的然后封装了很多操作方法，调用自己的方法html与css处理，得到的效果与标准的JavaScript处理结果是一致的。

2$(document).ready(function() {
//等document的节点执行完毕再执行后面的代码

3jQuery词典网址
http://code.jquery.com/jquery-1.11.3.js

4jQuery和DOM的区别
DOM对象，即是我们用传统的方法(javascript)获得的对象，jQuery对象即是用jQuery类库的选择器获得的对象;

5通过标准JavaScript处理：
var p = document.getElementById('imooc');
p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';

6jQuery的处理：
var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

---------------------------------------------------------------

7把jQuery对象转成DOM对象？
1var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

2var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

---------------------------------------------------------------
8id选择器：一个用来查找的ID，即元素的id属性

$( "#id" )
//id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。id是唯一的，所以是getElementById

9类选择器：通过class样式类名来获取节点
$（'.class'）
//jQuery使用JavaScript的原生getElementsByClassName()函数来实现

10元素选择器：根据给定（html）标记名称选择所有的元素

$("element")
//搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持
//不同于class，element是选择的元素，如<p>中的p，而不像class，选择的是class

11 原生与jQuery方法比较
var elements1 = document.getElementsByTagName('*');
var elements2 = $("*");

12层级选择器
$("parent>child")--------------直接子后代
$("ancestor descendant")-------所有子后代
$("prev+next")-----------------所有紧跟着prev的next元素
$("prev~siblings")-------------prev后的所有兄弟元素，并匹配siblings过滤器

13筛选选择器
$(":first")--------------匹配第一个的元素
$(":last")---------------匹配最后一个的元素
$(":not(selector)")------选择所有元素，去除给定的选择器的元素
$(":eq(index)")----------在匹配的集合中选择索引值为index的元素
$(":gt(index)")---------选择匹配集合中所有大于给定index的元素
$(":even")---------------选择索引值为偶数的元素
$(":odd")----------------选择索引值为奇数的元素
$(":lt(index)")----------选择匹配集合中所有索引值小于给定index参数的元素
$(":header")-------------选择所有标题元素，像h1,h2,h3等
$(":lang(language)")-----选择制定语言的所有元素
$(":root")---------------选择该文档的根元素
$(":animated")-----------选择所有正在执行动画效果的元素

14我们有几种方式可以隐藏一个元素：

1CSS display的值是none。
2type="hidden"的表单元素。
3宽度和高度都显式设置为0。
4一个祖先元素是隐藏的，该元素是不会在页面上显示
5CSS visibility的值是hidden
6CSS opacity的指是0

15<script type="text/javascript">
//查找所有div中，属性name=p1的div元素
$('div[name=p1]').css("border", "3px groove red");
</script>

//查找所有div中，有属性p2的div元素
$('div[p2]').css("border", "3px groove blue");

//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]').css("border", "3px groove #00FF00");

//查找所有div中，有属性name中的值包含一个连字符“空”的div元素
$('div[name~="a"]').css("border", "3px groove #668B8B");

//查找所有div中，属性name的值是用imooc开头的
$('div[name^=imooc]').css("border", "3px groove red");

//查找所有div中，属性name的值是用imooc结尾的
$('div[name$=imooc]').css("border", "3px groove blue");

//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]').css("border", "3px groove #00FF00");

//查找所有div中，有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]').css("border", "3px groove #668B8B");

16//查找所有class="last-div"下的a元素,选择第二个
$('.last-div a:nth-child(2)').css("color", "#CD00CD");

//查找所有class="last-div"下的a元素,选择第倒数第二个
$('.last-div a:nth-last-child(2)').css("color", "red");

//查找所有class="first-div"下的a元素，如果只有一个子元素的情况
$('.first-div a:only-child').css("color", "blue");

17attr()有4个表达式

attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

18.html(),.text()和.val()的差异总结：
1
.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上
另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
3
.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

19.addClass( className )方法

.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

eg：

20.removeClass( )方法

.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

21切换样式.toggleClass( )方法
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

22.css() 方法：
获取元素样式属性的计算值或者设置元素的CSS属性

23多种写法设置字体大小
$('.fourth').css('font-size','20px')
$('.fifth').css('fontSize','1.1em')
多种写法设置颜色
$('.fourth').css("background-color","red")
$('.fifth').css('backgroundColor','blue')

24通过处理这个value，重新设置新的宽度
css("width",function(index,value){
//value带单位，先分解
value = value.split('px');
//返回一个新的值，在原有的值上，增加50px
return (Number(value[0]) + 50) + value[1];
})

25合并设置,通过对象传设置多个样式
css({
'font-size' :"15px",
"background-color" :"#40E0D0",
"border" :"1px solid red"
})

26 css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下

外部样式 < 内部样式 < 内联样式
通过.css方法设置的样式属性优先级要高于.addClass方法

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

jQuery之DOM篇

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

1DOM
文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理 可扩展置标语言的标准编程接口。

2创建节点及节点属性流程：

创建节点(常见的：元素、属性和文本)
添加节点的一些属性
加入到文档中
--------------------------------------
流程中涉及的一点方法：

创建元素：document.createElement
设置属性：setAttribute
添加文本：innerHTML
加入文档：appendChild

3加入父子元素
append()前面是要选择的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是要选择的对象

4加入兄弟元素
before与after都是用来对相对选中元素外部增加相邻的兄弟节点
2个方法都是都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码

注意点：
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

eg：

$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')

5内部操作的四个方法
append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中

6remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据

7---remove：移除节点---------

无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据
有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

---detach：移除节点---------

移除的处理与remove一致
与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

8clone复制操作
//clone处理一
$("div").clone() //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

9replacewith和replaceAll()
.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

10 .wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
$('p').wrap('<div></div>')

11 $('a').wrap(function() {
return '<div class="' + $(this).text() + '" />';
})

12unwrap()删除父级元素的方法
<script type="text/javascript">
$(".aaron1").on('click', function() {
//找到所有p元素，删除父容器div
$('p').unwrap('<div></div>')
})
</script>

<script type="text/javascript">
$(".aaron2").on('click', function() {
//找到所有p元素，回调方法删除父容器div
$('a').unwrap(function() {
return '<div></div>';
})
})
</script>

13后代遍历语句
.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点

14父代遍历语句
1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

15父辈查找之.closet
parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

起始位置不同：.closest开始于当前元素 .parents开始于父元素
遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

jQuery之事件篇

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

1
mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

2
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

3

<script type="text/javascript">

//不同函数传递数据
function fn(e) {
$(this).val(e.data)
}

function a() {
$("input:last").focusout('慕课网', fn)

}
a();
//this指向script元素。

4 input元素是否获取焦点，blur和focus绑定的事件都不会发生，但是focusin和focuseout绑定的事件是只要div元素（包括后代元素）获得或失去焦点就会发生。

5focus、focusin
<script type="text/javascript">
$(".aaron").focus(function() {
$(this).css('border', '2px solid red')
})
$(".aaron1").focusin(function() {
$(this).find('input').val('冒泡捕获了focusin事件')
})
</script>

6blur、focusout

<script type="text/javascript">
$(".aaron3").blur(function() {
$(this).css('border', '2px solid red')
})
$(".aaron4").focusout(function() {
$(this).find('input').val('冒泡捕获了focusout事件')
})

</script>

7
focus()在元素本身产生，focusin()在元素包含的元素中产生

8select事件
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

select事件只能用于<input>元素与<textarea>元素

9
keypress事件与keydown和keyup的主要区别

keypress对中文输入法支持不好，无法响应中文输入
无法响应系统功能键（如delete，backspace）
由于前面两个限制，keyCode与keydown和keyup不是很一致

10on()的委托机制

<div class="left">
<p class="aaron">
<a>目标节点</a> //点击在这个元素上
</p>
</div>
再给出如下代码：

$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

11 卸载事件off()方法
通过.on()绑定的事件处理程序
通过off() 方法移除该绑定

12jQuery事件对象event的作用

<script type="text/javascript">

//多事件绑定一
$("ul").on('click',function(e){
alert('触发的元素是内容是: ' + e.target.textContent)
})

</script>

13
event.type：获取事件的类型
event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
event.preventDefault() 方法：阻止默认行为
event.stopPropagation() 方法：阻止事件冒泡
event.which：获取在鼠标单击时，单击的是鼠标的哪个键
event.currentTarget : 在事件冒泡过程中的当前DOM元素
this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换，为jquery对象：$(this)和$(event.target);

14.trigger是什么？

简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
eg:$("button:last").click(function() {
$("button:first").trigger('click','last');
});

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

jQuery之动画篇

-------------------------------------------------------
+++---------------------------------------------------------+++++
-------------------------------------------------------

1隐藏元素方法.hide
.hide(fast / slow)
这是一个动画设置的快捷方式，'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后在隐藏
eg: $("button:last").click(function() {
$("#a2").hide({
duration: 3000,
complete: function() {
alert('执行3000ms动画完毕')
}
})
});
2显示元素方法.show
$('elem').hide(3000).show(3000)
//让元素执行3秒的隐藏动画，然后执行3秒的显示动画。
show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置
如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法才能正常工作，必须使用.css('display', 'block !important')重写样式
如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

3显示与隐藏切换方法toggle()
基本的操作：toggle();
提供参数：.toggle( [duration ] [, complete ] )
直接定位：.toggle(display)

4slidedown下拉动画
<script type="text/javascript">
$("button:last").click(function() {
$("#a2").slideDown(3000,function(){
alert('动画执行结束')
})
});

5slideup上卷动画
<script type="text/javascript">
$("button:last").click(function() {
$("#a2").slideUp(3000,function(){
alert('动画执行结束')
})
});
</script>

6上卷下拉切换slideToggle
<script type="text/javascript">

$("button").click(function() {
$("#a1").slideToggle(3000)
});

</script>

7淡入动画fadeIn和淡出动画fadeOut
淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%
如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见

8淡入淡出切换fadeToggle
eg:if (v == "4") {
$("p").fadeToggle(1000, function() {
alert("切换完毕!");
});

9淡出至效果
.fadeTo( duration, opacity [, complete ] )
eg： if (v == "3") {
$("p").fadeTo(1000, 0.9, function() {
alert('完成')
});
}

10 toggle与slideToggle细节区别：
toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性
slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

11动画animate
所有用于动画的属性必须是数字的，这些属性如果不是数字的将不能使用基本的jQuery功能。比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只能动画效果的。
注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

12动画animate
else if (v == "3") {
$aaron.animate({
fontSize: "5em"
}, 2000, function() {
alert("动画 fontSize执行完毕!");
});

else if (v == "4") {
//通过toggle参数切换高度
$aaron.animate({
width: "toggle"
});
}

13.animate( properties, options )

options参数

duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调

$('#elem').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});

14查找数组中的索引inArray
语法：jQuery.inArray( value, array [, fromIndex ] )
jQuery.inArray()函数用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。
eg: if (v == "1") {

var index = $.inArray('Aaron',['test','Aaron', 'array','慕课网']);

$aaron.text('Aaron的索引是: '+ index)

} else if (v == "2") {

//指定索引开始的位置
var index = $.inArray('a',['a','b','c','d','a','c'],2);

$aaron.text('a的索引是: '+ index)
}

15去空格神器trim方法
移除字符串开始和结尾处的所有换行符，空格(包括连续的空格)和制表符（tab）
如果这些空白字符在字符串中间时，它们将被保留，不会被移除

<script type="text/javascript">
$("#exec1").click(function() {
alert("值的长度：" + $("#results1").val().length)
});

$("#exec2").click(function() {
alert("值的长度：" + $.trim($("#results2").val()).length)
});
</script>

16DOM元素的获取index方法
语法：参数接受一个jQuery或者dom对象作为查找的条件

.index()
.index( selector )
.index( element )

如果要快速找到第二个li在列表中的索引,可以通过如下2种方式处理

$("li").index(document.getElementById("test2")) //结果：1
$("li").index($("#test2")) //结果:1