1、jQuery常用选择器 筛选： $('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').eq(5); //选择第6个div元素 选择器的转移： $('#box').prev(); //选择id是box的元素前面紧挨的同辈元素 $('#box').prevAll(); //选择id是box的元素之前所有的同辈元素 $('#box').next(); //选择id是box的元素后面紧挨的同辈元素 $('#box').nextAll(); //选择id是box的元素后面所有的同辈元素 $('#box').parent(); //选择id是box的元素的父元素//通过儿子找爸爸 $('#box').children(); //选择id是box的元素的所有子元素//通过爸爸找儿子（可指定）children('li') $('#box').siblings(); //选择id是box的元素的同级元素//可以找到同级中的一个（可指定）siblings('li')具有很强的排他性 $('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素 .eq 根据下标找元素 与 .index获取元素下标 一般是一起使用 还有一类选择器就是css中的选择器 2、具备jQuery特有的方法 jQuery对象.css() jQuery对象.addClass() 设置class等属性 jQuery对象.addClass() 添加类名 jQuery对象.removeClass() 删除的是类名中的一个值 jQuery对象.toggleClass() 切换类 特点：在removeClass()中不写参数表示全部删除 3、jQuery动画的实现 1、jQuery对象.animate() jQuery对象.animate(参数一：要改变的样式属性值，写成字典的形式，参数二：动画持续的时间，单位为毫秒，一般不写单位， 参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动，参数四：动画回调函数， 动画完成后执行的匿名函数) 2、更便捷的动画实现 jQuery对象.hide() 隐藏 jQuery对象.show() 显示 jQuery对象.toggle() 切换隐藏显示 jQuery对象.fadeIn() 淡入 jQuery对象.fadeOut() 淡出 jQuery对象.fadeToggle() 切换淡入淡出 jQuery对象.slideUp() 卷起 jQuery对象.slideDown() 展开 jQuery对象.slideToggle() 切换卷起展开 jQuery对象.fadeTo(时间，透明度（写成小数）) 设置透明度 4、对元素的操作 jQuery对象.prop("src") 根据src获取src的值 jQuery对象.prop("src","具体的值") 设置src的值 jQuery对象.prop({}) 可以写多个键值对 jQuery对象.val() 把value单独提出来，获取value的值 jQuery对象.val("具体的值") 设置value的值 5、jq中的循环 $('li').each(function(aa){ //形参表示的就是标签的索引值 alert() }) js中参数非常的随意 获取焦点 focus 失去焦点 blur 拥有更多的时机做事情 进入的子元素或者触发或者不触发命令 推到：标签父子级，命令绑定到父级 hover(function(){},function(){}) 进入 移出 6、jQuery对象.submit()提交表单 表单提交不会直接选择form标签选择器html5中一个HTML页面可以有很多个form标签，为了保证一致性都是id的形式选择器 工作中不是直接的提交需要条件判断：如果所有表单控件合法提交否则报错不能提交数据 preventDefault()和return false 都是阻止默认时间的发生 7、事件冒泡： 父子级标签且都绑定相同的事件，触发子级的命令会逐层像父级触发 event.stoppropagation() 和 return false 都是阻止事件冒泡 事件的冒泡是客观存在的现象，不会因为没有响应表示没有冒泡 根据自己的需求来确定在哪return false 阻止冒泡 看不见的遍历是隐式迭代浪费资源 8、事件委托/事件代理：委托给这个标签的父标签 $('ul').delegate(事件实际发生在谁身上,事件属性,匿名函数写命令) 作用：1、提高代码的执行效率 2、可以给未来元素绑定命令 拓展：on(事件属性，匿名函数)只能给未来元素绑定命令 DOM 文档对象模型 document object model js内置：内置的一个结构化表现手法，通过结构化表现手法把所有标签实现了一个倒置的树状结构图 针对性的寻找标签 标记 == 标签 == 元素 小于 节点(标签，标签的属性，标签的内容) 增加删除 增加标签：子级和同级 删除标签：1、声明变量保存节点标签数据 2、使用追加函数节点变量追加到相应的位置 var $li = $('<li>666</li>') 子级： $('ul')append($li) 添加到子级之后 $li.appendTo($('ul')) $('ul').prepend($li) 添加到子级之前 $li.prependTo($('ul')) 同级： $('ul').after($div) 添加到同级之后 $div.insertAfter($('ul')) $('ul').before($div) 添加到同级之前 $div.insertBefore($('ul')) 删除： $('ul').remove() 删除节点 $('ul').empty() 清空节点 $(function(){}) 匿名函数 $('div')选择器 $('<li>666</li>')标签 $(this)原函数 9、$.ajax使用方法 常用参数： 1、url请求地址 2、type请求方式，默认是'GET'，常用的还有'POST' 3、dataType设置返回的数据格式，常用的是'json'格式，也可以设置为'html ' 4、data设置发送给服务器的数据 5、success设置请求成功后的回调函数 6、error设置请求失败后的回调函数 7、async设置是否异步，默认值是'true'，表示异步 $.ajax({ url: '/change_data',接口的请求地址接口：为了得到数据的叫接口 type: 'GET', dataType: 'json',通用数据格式 success:function(dat){ alert(dat.name); }, error:function(){ alert('服务器超时，请重试！'); } });