关于jQuery

div表示元素//#div表示元素id//.div表示元素class属性

jQuery 语法是$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

1.隐藏方法
$(this).hide() 表示隐藏当前的html元素;
$("#div").hide()表示隐藏当前id为div的元素;
$(“div”).hide() 表示隐藏所有div元素;
$(".div")hide() 表示隐藏所有class属性为test的元素; show( ) 、hide( )、toggle()都是隐藏方法，如果传number类型的参数，则代表执行时间

2.防止文档在加载前运行jQuery代码
$(document).ready(function(){});

3.选取指定元素和过滤
$(“div”)选取div元素;
$(“div.name”) 选取所有的class属性为name的div元素;
$(“div#name”) 选取所有的id属性为name的div的元素;
$(“div:frist”) 选取所有的div第一个div元素;
$(“div:last”) 选取所有的div最后一个div元素;
$(“div:even”) 选取所有偶数的div元素;
$(“div:odd”) 选取所有奇数数的div元素;
$(“div:eq(n)”) 选取列表中的第(n+1)个元素 此处按下标号算;
$(“div:gt(n)”) 选取前(n+1)个之后的所有div元素;
$(“div:lt(n)”) 选取前n个div元素;
$(“div:not(:empty)”) 选取所有不为空的div元素;
$(“div:header”) 选取所有标题元素;
$(":animated") 选取当前的动画元素;
$(“div:contains(‘W3School’)”) 选取包含div指定字符串的所有元素;
$(“div:empty”) 选取无子（元素）节点的所有元素;
$(“div:hidden”) 选取无所有隐藏的div元素;
$(‘div:visible’) 选取无所有可见的div元素;
$(‘div’).find() find方法里面有一个参数，就是想要找到的后代(可以是标签，类名，ID);
$(‘div’).children() children和find方法不同，只能找到子代 ;
$(‘div’).next() 选取后一个元素;
$(‘div’).nextAll() 选取后面所有元素 ;
$(‘div’).has(’.red’) 选择子元素含有类red的div;
$(“div”).text() 选取div文本内容;
$(“div”).parent() 选取当前元素的父元素;
$(“div”).parents(“body”) 选取当前元素的所有祖先，一路向上直到文档的根元素html，可选参数，过滤祖先元素;
$("span).parentsUntil(“div”) 方法返回介于两个给定元素之间的所有祖先元素;
$(“div”).siblings() 获得匹配集合中每个元素的同胞,可筛选;
$(“div”).prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素;
$(“div”).prevall() 一个 div 之前的所有 div;
$(“div”).prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素;

4.属性选择器
$("[href]")选取所有带有href属性的元素;
$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
$("[href$=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。

5.CSS选择器
$(“div”).css(“background-color”,“red”);

6.滑动方法:传参数值代表执行时间
$(“div”).slideUp()：向上滑动（隐藏）
$(“div”).slideDown():向下滑动（显示）
$(“div”).slideToggle()：滑动（自动）slideUp与slideDown的结合

7.淡入淡出:传参数值代表执行时间
$(“div”).fadeOut()//淡出（隐藏）
$(“div”).fadeIn()//淡入（显示）
$(“div”).fadeToggle()//显示隐藏（）自动

8.设置透明度固定值
$(“div”).fadeTo()

9.动画animate 使用方法：
animate({ ‘width’:‘200px’， ‘height’:‘200px’ })
当用连缀方法定义动画出现异步执行时：可用类似于回调函数的方法
.queue(function(next){ $(this).css(“background”,“yellow”); next() })

10.延迟执行。传参是延迟执行
$(“div”).delay()

11.动画递归的高级写法
$(‘div’).slideToggle(2000,function(){
$(this).slideToggle(2000,arguments.callee) }
arguments.callee：常用在匿名函数中， 代表当前的函数

12.动画的全局方法
$.fx.interval=1000 属性可以调整动画每秒的运行帧数
$.fx.off=true;动画关闭。

13.jQuery里的AJAX异步和同步
jQuery对Ajax采用了三层封装,其中最底层的是
$.ajax()中层封装是.load()，$.get()，$.post 最顶层是getScript和getJSON();

13.1 load()方法
load()方法是局部方法,.load()方法中共有三个参数
一个是url，链接地址
eg. $(“div”).load(‘data/text.html .box’)>>>筛选功能
第二个是发送的数据data，第二个参数为非必选参数
eg. $(“div”).load(‘data/test.html’,{ data:‘admin’ })
第三个是回调函数callback
eg. $().load(‘data/test.html’,{ data:‘admin’ } ,function(response,status,xhr){})
response ：返回结果，和页面里内容一样
status ：状态，success，或者error
xhr ：XMLHttpRequest，他是一个对象

13.2 $.get()和$.post()
$.get(‘data/test.html’,{ name:‘admin’ },‘html’)
$.get()和$.post()有四个参数，
第一个地址参数为必填参数
第二个参数data
第三个callback函数和.load()方法一样
第四个参数为type 这是格式转换–最好禁止自己设置

13.3 $.ajax():有三个参数,与$.get()和$.post()方法，前三个参数相同。
eg. $.ajax({ url:’’, 链接路径
type:‘post/get’, 用什么方式提交
data:{键:值}, 传入数据用键值对方式传入
success:function(){ 成功是传入的参数 } })

14.表单序列化
$(‘form’).serialize()把整个表单内容提取出来，组成一个键值对，并且对URL进行编码。

15.跨域调用接口的方法之一

$.ajaxSetup({   
			url:"demo_ajax_load.txt",        
  			 success:function(result){            
  			 $("div").html(result);       
   	 		}    
 });    

调用别人的接口，而产生了跨域,即使在本地更改了请求的域名或IP地址也不能直接使用 $.ajax()中的get或post，会直接报跨域请求失败，解决的办法是使用：$.ajaxSetup()

17.DOM元素的操作
$(“div”).html() 可以获取该元素的标签和内容
$(“div”).html(text)
$(“div”).text(text) 只可以获取该元素的文本内容；
$(“div”).text()
$(“div”).val(text) 输入的值
$(“div”).val()
$(“div”).addClass（class） 给元素添加一个class
$(“div”).addClass( ‘class1 class2 class3’ )给元素添加多个class
$(“div”).removeClass(class) 给元素删除一个class
$(“div”).removeClass(‘class1 class2 class3’)给元素删除多个class
$(“div”).toggleClass(class) 如果元素没有当前class那么添加，如果有那么删除

18.操作元素属性
$(‘div’).attr(‘type’)获取该属性属性值
$(‘div’).attr(‘type’,‘value’)设置属性值
$(‘div’).attr({ 设置一组属性值； ‘data’:‘value1’, ‘data2’:‘value2’})
$(‘div’).removeAttr(‘title’)； 删除属性
18.1 操作元素样式css()；不仅能获取行内样式，也能获取非行内样式css(name) 获取某个元素的行内样式css(‘name’,value)
设置行内样式css({ 设置多个行内样式 name1:value1, name2:value2})

18.2 CSS方法
width()
height()
innerWidth() 包含内边距（padding）
outerWidth()包含内边距和边框( padding border)
offset() 获取某个元素相对于浏览器窗口(可视区域的距离)
position()获取某个元素相对于父元素的偏移距离
scrollTop()获取垂直滚动条的值；
scrollTop(value)设置垂直滚动条的值;
scrollLeft()获取水平滚动条的值；
scrollLeft(value)设置水平滚动条的值;

18.3创建节点
append("$(‘

节点

’)") 向指定元素内部后面插入节点
appendTo(content) 将指定元素移入到指定元素
prepend(content) 向指定元素 content 内部的前面插入节点
prependTo(content) 将指定元素移入到指定元素 content 内部前面
after(content) 向指定元素的外部后面插入节点
contentbefore(content) 向指定元素的外部前面插入节点 content

18.4复制节点
${(}^{\prime }bod{y}^{\prime }).append($(‘div’).clone(true));
复制一个节点添加到 HTML 中clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true 参数的话，这个元素附带的事件处理行为也复制出来。

18.5替换
$(‘div’).replaceWith(‘节点’); //将 div 替换成 span 元素

19.jquery事件绑定；
$(‘input’).bind(‘click’,[data],fn)
$(‘input’).bind(‘click’,[1,2,4,5],function(evt) { alert(evt.data)})

19.1同时绑定多个事件，公用一个事件处理函数

$('input').bind('mouseover mouseout',function(){     
			alert(1)
})

19.2同时绑定多个事件，并使用不同事件处理函数

$('input').bind({            
	mouseout:function(){ 
		alert('移出')
	 }, 
	 mouseover:function(){              
  	 alert('移入')            
  	 } 
})

（mouseover）当事件发生在当前元素外的元素上的时候，会立即触发mouseout；（mouseenter）只要事件还在当前元素内，无论是否移动到子集元素上，都不会触发mouseleave事件
（hover事件）相当于给元素同时绑定了mouseenter 和 mouseleave

19.3同一事件绑定不同事件处理函数；
$(‘input’).bind(‘click’,fn1)
$(‘input’).bind(‘click’,fn2)
function fn1(){ alert(1) }
function fn2(){ alert(2) }
执行顺序为事件绑定的顺序。

19.4事件解绑
$(‘input’).unbind() 不传参数的时候默认移除该DOM元素上所有事件。
$(‘input’).unbind(‘mouseover’) 移出该DOM元素上参数（‘mouseover’）的事件。

19.5事件对象
JavaScript事件对象是浏览器默认传入的，但是对于浏览器的兼容问题，我们需要对事件对象进行兼容。jQuery帮我们解决了所有兼容性的烦恼，并且给我们添加了很多有用的方法。
event.target 获取绑定事件的DOM元素
event.type 获取事件的类型
event.data 获取事件中传递的数据
event.pageX/pageY 获取根据页面原点的X,Y值
event.screenX/screenY 获取根据显示器窗口的X,Y值
event.offsetX/offsetY 获取根据父元素X,Y值
event.which 获取当前鼠标点击的键1,2,3
event.altKey/shiftKey/ctrlKey/ 返回 true、false

19.6事件冒泡处理
preventDefault() //阻止默认行为 >>>> contextmenu
stopPropagation() //取消事件冒泡
return false 阻止默认事件和事件冒泡 双层阻止

19.7模拟事件
$(‘input’).trigger(‘click’);（jquery对象）
.trigger方法(事件名)；模拟用户触发事件：同时触发事件冒泡。
$（‘input’）.triggerHandler(‘click’)（jquery对象）
.triggerHandler方法(事件名)模拟用户触发事件：不触发事件冒泡。
计时器自动执行事件时可用

19.8事件的命名
eg.$（‘input’）.bind(‘click.abc’,function(){ alert(1)})

19.8事件委托新方法on

 $('div').on('click','input',function(evt){    
	// alert(evt.target)        
 	$('div').append($('input').eq(0).clone(true))  
 }) 

对应删除事件用off