|
基础内容的api
? 1.1 jquery中的选择器
? ? ?基本选择器：
? ? ?p标签等 id选择器 class类选择器 后代选择器(ul li) *通配符选择器
? ? ?...
? ? ?内容过滤选择器：
? ? ?:contains() ?选择出包含某个字符串的元素
? ? ?:empty() 选择内容为空的元素
? ? ?:parent() ?选择内容不为空的元素
? ? ?...
? ? ?子元素过滤选择器：
? ? :nth-child() 选择出父亲第几个孩子
? ? :first-child ? ?选择出每家第一个孩子
? ? :last-child ? ?选择出每家最后一个孩子
? ? :nth-last-child() 取出每家倒数的第几个孩子
? ? :nth-of-type() ?选择出每家同类孩子中的第几个
? ? :first-of-type ?选择出每家同类孩子中的第一个
? ? :last-of-type ? 选择出每家同类孩子中的最后一个
? ? ...
? ? ?基本过滤选择器：
? ? ?eq:() 过滤指定索引的那一个
? ? ?:first 过滤第一个
? ? ?:last ?过滤最后一个
? ? ?:gt() ?选择索引值大于某个数
? ? ?:lt() ?选择索引值小于某个数
? ? ?:even() ? 选择所有索引值为偶数的
? ? ?:odd() 选择所有索引值为奇数的
? ? ?:not() 除了某个索引值之外的
? ? ?...
? ? 表单元素属性过滤选择器：
? ? :input ?选中所有的表单元素
? ? :text ? 选择所有的文本框
? ? :checkbox ? 选择所有的复选框
? ? :button 同标签选择器button
? ? :submit 选择所有的提交按钮
? ? :checked ? ?选择选中的单选框和复选框
? ? :selected ? 选择选中的下拉列表的选项
? ? ...
? ? 查找筛选选择器：
? ? .parent() 选择父亲
? ? .children() ?选择孩子
? ? sibling() ? 选择兄弟
? ? .next() 选择元素紧挨着的弟弟妹妹
? ? .nextAll() ?选择元素所有的弟弟妹妹
? ? .prev()选择选中元素的哥哥姐姐
? ? .prevAll()选择元素中所有的亲哥哥姐姐
? ? .find(选择器) 选择选中元素的后代
? ? ...
? ? 串联筛选选择器:
? ? .index() ?选中元素在其兄弟姐妹中的索引值 ? ?
? ? ...
? 1.2 jquery属性的获取
? ? ?节点.attr
? ? ?attr(name|pro|key,val|fn)
? ? ?节点.removeattr
? ? ?removeAttr(name)
? ? ?节点.prop
? ? ?prop(n|p|k,v|f)
? ? ?节点.removeprop
? ? ?removeProp(name)
? ? jquery中,节点.attr()和节点.prop()之间的区别?
????prop不能获取自定义属性
? ? 1) attr获取的属性更接近于标签的本质 该是什么就是什么
? ? 2) prop会对attr的数据做二次加工,会对数据强转
? ? 3) 其他的用法都是一样的
? ?
? 1.3 jquery相关的动画
? ? ?jquery已经定义好的动画
? ? ? ? 隐藏/显示动画
? ? ? ? ? ? 节点.hide() ? ?隐藏
? ? ? ? ? ? 节点.show() ? ?显示
? ? ? ? ? ? 节点.toggle() ?动画队列?
? ? ? ? 滑动动画
? ? ? ? ? ? slideDown([s],[e],[fn]) 滑下来
? ? ? ? ? ? slideUp([s,[e],[fn]]) ?滑上去
? ? ? ? ? ? slideToggle([s],[e],[fn]) slideDown+slideUp
? ? ? ? 显示隐藏
? ? ? ? ? ? fadeIn([s],[e],[fn]) 淡入 $().fadeIn(1000, .5)
? ? ? ? ? ? fadeOut([s],[e],[fn]) 淡出
? ? ? ? ? ? fadeTo([[s],o,[e],[fn]])
? ? ? ? ? ? fadeToggle([s,[e],[fn]])
? ? ? jquery中的自定义动画
? ? ? ? ?animate() 自定义动画效果 $("xxx").animate({...});
? ? ? ? ?stop() ? ?停止动画 ?动画序列的概念
? ? ? ? 什么是动画序列？ 连续的触发动画动作 形成一组动画 一组动画的集合我们称之为动画序列
? ? ? ? $("#box").stop() ? 没有参数的情况下 立即停止当前动画 执行下一个动画 [变宽,左,复杂]
? ? ? ? 立即停止当前动画 并清空动画序列 把所有的动画全部清空 不再执行
? ? ? ? $("#box").stop(true,false)
? ? ? ? 立即停止当前动画 并且到这次动画的目的地 继续执行下一动画 默认
? 1.4 jquery操作DOM节点
? ? ? 插入?
? ? ? ? ?在子节点之前插入 prepend() 把新的元素作为孩子插入到某个元素内部(在最前面插入)
? ? ? ? ?在子节点之后插入 append() 把新的元素节点插入到某个元素的内部(在最后面插入)
? ? ? ? var h1=$("<h1>我是h1元素</h1>") ?创建一个元素节点
? ? ? ? 在demo的内部最前面插入h1
? ? ? ? h1.prependTo($("#demo"))
? ? ? ? // prependTo的作用和prepend的作用一模一样
? ? ? ? $("#demo").prepend(h1)
? ? //在demo的内部坐后面插入h1
? ? $("#demo").append(h1)
? ? // appendTo的作用和append的作用一模一样
? ? h1.appendTo($("#demo"))
? ? ? 包裹 wrap()
? ? ? 使用一个元素去包裹另一个元素 wrap() wrapAll()
? ? ? var div = $("<div></div>") ?定义一个用来包裹的标签
? ? ? 使用div 分别去包裹ul和ol
? ? ? $("ul,ol").wrap(div)
? ? ? 使用div 把ul和ol整体包裹起来
? ? ? $("ul,ol").wrapAll(div)
? ? ? 修改(替换)
? ? ? 使用一个元素替换另一个元素 replaceWith() ?replaceAll()
? ? ? var ?ul = $("<ul><li>xxx</li></ul>") ?定义一个ul li
? ? ? replaceWith 表示使用新的节点替换老的节点
? ? ? 已存在的元素.replaceWith(新节点) replace替换
? ? ? $("ol").replaceWith(ul)
? ? ? 新节点.replaceAll(已存在的元素) ?自行查询这个api的使用
? ? ? ul.replaceAll($("ol"))
? ? ? 删除
? ? ? ? ?remove() 删除当前节点
? ? ? ? ?empty() ?清空内容
? ? ? ? ?表示把ol也删除了
? ? ? ? $("ol").remove()
? ? ? ? empty表示清空ol中的所有的内容，但是ol还存在
? ? ? ? $("ol").empty()
? 1.5 jquery操作盒子
? ? ? ? 一 ?jquery操作盒子
? ? ? ?*offset() ? ?相对页面左上角的坐标
? ? ? ?*position() ?相对父元素左上角的坐标 ; jquery新增的 ?js原生没有的
? ? ? ? 二 对原生js的client、offset系列 jquery对他进行函数化的重构
? ? ? ? * 内容尺寸 与css中设置的相应的属性相同
? ? ? ? ? ? height()
? ? ? ? ? ? width()
? ? ? ? * 内部尺寸
? ? ? ? ? ? innerHeight() ?height + padding
? ? ? ? ? ? innerWidth() ? width + padding
? ? ? ? * 外部尺寸 ?默认是false
? ? ? ? ? ? outerHeight(false/true): height+padding+border ?如果是true 加上margin
? ? ? ? ? ? outerWidth(false/true): ?width +padding+border ?如果是true 加上margin
? ? ? ? 三 scroll系列
? ? ? ? 1 scrollTop()?
? ? ? ? 读取/设置滚动条Y轴坐标
? ? ? ? 2 $(document.body).scrollTop+ $(document.documentElement).scrollTop()
? ? ? ? 读取页面滚动条的Y轴坐标 (兼容chrome和IE)
? ? ? ? 3 节点.scrollTop(60) ? ?
? ? ? ? 滚动到指定的位置(兼容chrome和IE)
? 1.6 jquery中的事件
? ? ??
? ? ? 补充表单事件
? ? ? ? ? focusin ?当元素获取焦点的时候触发
? ? ? ? ? focusout 当元素失去焦点的时候触发
? ? ? ? ? change ? 触发改变事件
? ? ? 主动触发?
? ? ? ? ? select()
? ? ? ? ? trigger() ?
? ? ? mouseenter和mouseover之间的区别
? ? ? mouseenter: ?进入
? ? ? mouseover: ?覆盖
? ? ? * mouseover: ?在移入子元素也会触发,对应mouseout 会触发冒泡
? ? ? * mouseenter: 只有移入当前元素才会触发,对应的mouseleave 只会触发一次 不会产生冒泡
? ? ?jQuery中的api hover()
? ? ? ? hover() 使用的就是mouseenter()和mouseleave()结合
? ? ? 事件委托：
? ? ? 绑定事件会出现这样一个问题 新加的元素没有监听
? ? ? 将多个元素的事件委托给父亲来处理
? ? ? 当操作任何一个子元素的时候事件就会冒泡到父辈元素
? ? ? Jquery事件委托的Api
? ? ? ? 设置事件委托
? ? ? ? $(parentSeclector).delegate(childrenSelector,eventName,callback)
? ? ? ? 移出事件委托
? ? ? ? $(parentSeclector).undelegate(eventName)
? ? ? 事件委托的另外一种写法 使用on同样可以实现事件委托
? ? ? ? ?on有两个作用: 1) 事件绑定 ?2）事件委托
? ? ? ?$("ul").on("click","span",function(){
? ? ? ? ? ?//this不再表示事件源了 表示span元素
? ? ? ? ? ?$(this).parent().remove()
? ? ? ?})
? ?1.7 扩展
? ?扩展插件：jQuery中可以自己定义函数方法
? ? $.extend ? ?对工具的扩展
? ? $.fn.extend(object) 对对象的扩展
? ? 自调用函数：
? ? 03 自调用函数 语法：(function(){})() 在第一个()内部加了一个匿名函数?
?
|