重新复习jQuery的一些知识点(2)

  今天来复习jQuery的DOM操作。jQuery中DOM的操作是很常见的,简单的创建一个元素,就直接在$()中写入需要创建的标签,如$("<div></div>")就是创建了一个空的div元素。对元素的属性进行操作,用的是attr()这个方法,可以对单个属性进行操作,也可以对多个属性进行操作,单个操作时传入的就是单个键值对,多个操作就传入多个键值对的对象,删除元素属性用removeAttr()方法。

  操作元素内容的方法,有html()和text(),区别在于,前者获取的是HTML内容,后者获得的是文本内容。如果元素有value属性,如input,则val()方法就是获取元素的value值,值得注意的是,如果获取select标签中的多个选项值,则可以用val().join(",")来将获取的值转换成用逗号隔开的字符串。

  操作元素的类时,可以用addClass()或removeClass()来实现增加或删除某个类,也可以用toggleClass()来切换某个类。removeClass()如果不传参数,则会删除该元素上所有的类。

  内部插入节点的方法,有append(),appendTo(),prepend(),prependTo()。其中append和appendTo是将节点插入到元素内部的最后,不同之处就是一个是追加,一个是被追加;prepend()和prependTo()跟append()的不同之处是,prepend()追加的位置是元素的头部,即在最开始的地方插入。

  外部插入节点的方法,用到的则是after(),insertAfter(),before(),insertBefore()。这与内部插入节点的方法是相似的,只是一个是在节点内部操作,一个是在节点外部操作。节点内部操作的结果是产生新的子节点,节点外部操作的结果是产生新的兄弟节点。

  对节点的操作,还有克隆节点clone(),这只是潜复制,如果要将节点的所有行为都复制,则传入"true"即可(clone(true))。

  还有一个操作是对节点的替换,用的方法是replaceWith()和replaceAll(),它将会用相关节点来替换被操作的节点,不同点就是一个是替换别人,一个是被人替换。

  还有一个不是很常用的包裹元素方法,wrap()、unwrap()和wrapInner(),wrap()包裹外部元素,unwrap()去掉外部包裹的元素,wrapInner()包裹元素内部的文本字符。

  最后,删除页面元素,一个是用remove(),一个是用empty(),两者的区别是,remove将直接把该元素及后代元素都删除,empty则保留该元素,清空其所有后代元素。

  

时间: 2024-10-13 16:29:22

重新复习jQuery的一些知识点(2)的相关文章

重新解读jQuery的一些知识点

从今天开始,坚持每天写一篇学习记录,看看能坚持多久. 今天开始重新学习jQuery.对于web开发人员,jQuery基本众人皆知.但是百密必有一疏,总有一些知识点是平时没怎么注意的.最近我重新开始看<jQuery权威指南>,发现有一些挺实用的和一些容易混淆的知识点,记录备忘. 选择器 1.兄弟选择器是比较容易混淆的,pre + next 表示紧接在pre后的相邻的元素,可以用.next()来替代:pre ~ next 表示接在pre后的所有相邻的元素,可以用.nextAll()来替代:如果要选

由 preventDefault()方法 复习jQuery 事件方法

今天看到了 preventDefault() 方法,就复习了一下jQuery 事件方法,记下随记 jQuery 参考手册 - 事件 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件. 绑定实例: $("button#demo").click(function(){$("img

复习jquery的选择器部分

最近工作比较忙,以至于好多东西感觉要忘记似得,今天复习了一些选择器部分的内容,暂时记下~! 没有详细的注释,感觉看到就应该想个差不多就行~! jQuery 常规选择器 1.简单选择器 2.进阶选择器 3.高级选择器 4.属性选择器 一.简单选择器 ID 类(class) 二.进阶选择器 群组选择器 $('ul,li,a')  选取页面标签为 ul,li,a的对象集合 后代选择器 ul li a {}  ul中li下面的a的对象集合 通配选择器 * 选择所有的页面标签 三.高级选择器 后代选择器

关于JQuery的一些知识点

1.jQuery的入口函数 1.1 语法jQuery(document).read(function(){ }); $(function(){ });// ** window.onlaod = function(){} $ === jQuery // $是jQuery全局函数的别名. 1.2注意事项: (重点) document ready: 是html文档准备就绪,也就是dom树创建完成了.可以进行dom操作了.重要的是:html页面下载完成,并准备就绪window.onload: 是整个页面

关于jquery方面的知识点

jquery向上查找父元素 用到的方法:closest() parents() parent() closest() 方法获得匹配选择器的第一个祖先元素 [*]parent()函数是只往父级找一层:[*]parents()函数是往父级找多层,一直找到body标签. 向下查找子元素 用到的方法:find() children() 通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素. 获得元素相对于选择器的 index 位置. 该元素可以通过 DOM 元素或 j

jquery的常用知识点

一.用jquery寻找元素 1.选择器 基本选择器: $("*") $("#id") 用id匹配 $(".class") 用class名匹配 $("element") 用标签名匹配 $(".class,p,div") 组合匹配 层级选择器: $(".outer div") $(".outer>div") $(".outer+div") $(&

[Java复习05] 多线程&amp;并发 知识点补充

0. wait/notify/notifyAll的理解? wait:让持有该对象锁的线程等待: notify: 唤醒任何一个持有该对象锁的线程: notifyAll: 唤醒所有持有该对象锁的线程: 它们 3 个的关系是,调用对象的 wait 方法使线程暂停运行,通过 notify/ notifyAll 方法唤醒调用 wait 暂时的线程. 它们并不是 Thread 类中的方法,而是 Object 类中的,为什么呢? 因为每个对象都有监视锁,线程要操作某个对象当然是要获取某个对象的锁了,而不是线程

jquery学习总结1

本文仅针对jquery的部分知识点做总结,后续会有其他的学习心得分享.   window.onload $(document).ready() 执行时机 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 编写个数 不能同时编写多个,以下代码无法正确执行:window.onload =function({alert("test1");}window.onload = function(){alert(&qu

jQuery总结

jQuery 零散的知识点 什么是jQuery jQuery是一个快速.简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架). DOM对象与jQuery对象的互相转化 ① DOM对象转jQuery对象 jQuery对象 = $(DOM); ② jQuery对象转DOM对象 DOM对象 = jQuery对象[索引]; 或 DOM对象 = jQuery对象.get(索引); jQuery中的事件切换 hover(over,out) :鼠标悬浮与鼠标离开