美文网首页Jquery
2018-04-08JQ中DOM的操作

2018-04-08JQ中DOM的操作

作者: 啾咪啾咪啾 | 来源:发表于2018-04-08 22:51 被阅读0次

回顾原生DOM操作

*获取节点                                                      *创建节点

*遍历节点                                                      *替换节点

*删除节点                                                     *插入节点

*复制节点


JQ中的DOM操作

*基本操作

html()      ---      类似于 原生DOM的innerHTML属性    获取/设置     html(html代码)


val()        ---   类似于原生DOM的value属性            获取/设置     val(value


text()       --- 类似于原生DOM的textContent属性   获取/设置 text(文本内容)


attr()       ---获取或设置制定元素的属性     获取/设置       attr(属性名称) /  atrr(属性名,值)


*样式操作 ---css

attr   ---       attr( "class",classValue)       -设置

在#d1的HTML里追加class属性  为one'

addClass( )                     --追加样式     -追加

为#d1的HTML追加class属性 two

removeClass( )              ---移除样式

移除#d1的所有样式,(移除了所有的class)

toggleClass                   ---切换样式

在有样式one与没有样式之间切换

hasClass(" ")                ---判断样式

有one样式true,没有false

css()   --操作样式    设置/获取

$(#d1).css("color","red")  单个

$(#d1).css({"color“:”red"  ,  "font-size“,”18px“  ,  "border":"0"});     多个

$(#d1).css("color","red")  .css("color","red")  .css("color","red")    //链式操作


JQ操作CSS属性           $("d1").css("background","red");

JQonclick事件   $("d1").click(function(){ 

$("d1").css("background","red");  })

      遍历之后,div  变成了DOM类型

多发个选择器并列使用,中间用,分割

$("d1,d2").click(function(){}

相关文章

  • 2018-04-08JQ中DOM的操作

    回顾原生DOM操作 *获取节点 *创建节点 *遍历节点 *替换节点 *删除节点 *插入节点 *复制节点 JQ中的...

  • JQuery 17

    jQuery中的DOM操作 DOM操作的分类 DOM操作分为3个方面,即DOM Core(核心)、HTML-DOM...

  • 会jquery 就能快速快速上手 vue? 你仿佛在说笑

    vue和jquery 操作DOM的区别 jquery 操作Dom 的思维:获取Dom元素 步骤: 1、在dom中输...

  • jQuery中的DOM操作

    jQuery中的DOM操作 DOM操作的分类 一般来说DOM的操作分为3个方面,即DOM Core、HTML-DO...

  • Vue中ref属性获取DOM元素和组件引用

    ref获取DOM元素vue中获取DOM元素不建议用js直接操作DOM,使用ref可达到操作DOM的效果写法:thi...

  • js DOM操作

    DOM 即Document Object Modal。  DOM操作中的property和attribute pr...

  • 虚拟DOM和diff

    标准的dom机制如下: 标准dom机制下,用户在对应用操作的时候是直接对真实的dom进行操作。在react中,用户...

  • 《高性能JavaScript》读书笔记③:DOM编程

    浏览器中的DOM(DOM in Browser World) 文档对象模型(DOM)是用于操作XML、HTML文档...

  • Vue解决了哪些问题

    虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的...

  • 19.DOM 进阶

    学习要点: 1.DOM 类型2.DOM 扩展3.DOM 操作内容 DOM 自身存在很多类型,在 DOM 基础课程中...

网友评论

    本文标题:2018-04-08JQ中DOM的操作

    本文链接:https://www.haomeiwen.com/subject/tfzmhftx.html