传智播客——Jquery

1.JQuery是一个非常优秀的JavaScript库,具有写得少,做得多的优点。

2.JQuery对象:(1)jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象,是JQuery独有的(2)JQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法(3)JQuery对象是一个数组对象,可以通过 [index] 的方法得到对应的 DOM对象.

3.JQuery选择器:(1)基本选择器:JQuery中最常用的选择器

 

(2)层次选择器:通过DOM元素之间的层次关系获取特定元素的选择器:

 

(3)过滤选择器:通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以":"开头

 

(1)基本过滤选择器:

 

(2)内容过滤选择器:

 

(3)可见性过滤选择器:

 

(4)属性过滤选择器:

 

(5)子元素过滤选择器:

 

(6)表单对象属性过滤选择器:

     

4. jQuery 中的 DOM 操作

(1)查找节点:使用JQuery选择器查找到所需要的元素对象后,调用JQuery对象的attr()方法获取它的各种属性值

(2)创建节点:使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回

(3)插入节点:

方法一:append()向每个匹配的元素的内容的结尾处追加内容

方法二:appendTo()将每个匹配的元素追加到指定的元素中的内容的结尾处

方法三:prepend()将每个匹配元素的内容的开始处插入内容

方法四:prependTo()将每个匹配的元素插入到指定的元素内容的开始处

方法五:after()向每个匹配的元素的后面插入内容

方法六:insertAfter()向每个匹配的元素插入到指定的元素之后

方法七:before()向每个匹配的元素的之前插入内容

方法八:insertBefore()向每个匹配的元素的插入到指定的元素之前

(4)删除节点:

方法一:remove()删除匹配元素节点及其后代节点

方法二:empty()清空节点

(5)复制节点:
方法一:clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为

方法二:clone(true): 复制元素的同时也复制元素中的的事件

(6)替换节点:

方法一:replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素

方法二:replaceAll(): 颠倒了的 replaceWith() 方法

(7)包裹节点:

方法一:wrap(): 将指定节点用其他标记包裹起来. 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义

方法二:wrapAll(): 将所有匹配的元素用一个元素来包裹. 而 wrap() 方法是将所有的元素进行单独包裹

方法三:wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来

5.属性操作:attr(): 获取属性和设置属性;当为该方法传递一个参数时, 即为某元素的获取指定属性;当为该方法传递两个参数时, 即为某元素设置指定属性的值;removeAttr(): 删除指定元素的指定属性。

6.样式操作:追加样式: addClass();移除样式: removeClass();切换样式: toggleClass();判断是否含有某个样式: hasClass()

7.读取和设置某个元素中的HTML内容:html();读取和设置某个元素中的文本内容: text();读取和设置某个元素中的值: val()

8. 取得匹配元素的所有子元素组成的集合: children();取得匹配元素后面紧邻的同辈元素的集合:next();取得匹配元素前面紧邻的同辈元素的集合:prev();取得匹配元素前后所有的同辈元素: siblings().

9.JQuery中的事件:

(1)加载DOM:$(document).ready()

(2)事件绑定:bind()

(3)合成事件:hover(): 模拟光标悬停时间;toggle(): 模拟鼠标连续单击事件;toggle() 的另一个作用: 切换元素的可见状态

(4)事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了;event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标

(5)移除事件:unbind()

(6)one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除

10.JQuery动画:

(1)显示:show();隐藏:hide();

(2)fadeOut(): 改变元素的透明度

(3)slideDown(), slideUp(): 改变元素的高度

(4)toggle(): 切换元素的可见状态

(5)fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间)

 

终于完了,JQuery内容不少啊!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值