码迷,mamicode.com
首页 > 其他好文 > 详细

jqDOM操作

时间:2019-01-12 12:01:59      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:...   选择   dom   add   不同   on()   dom操作   color   元素   

什么是jquery?jquery是一个js库,想要用jquery必须先引用,jquery大体与js相同,主要不同点在于DOM操作。
引用:

在html的<head></head>标签里引用,

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>


jquery和js的DOM操作主要区别:

找元素:
    js:document.getElementById("")
    
    jq:$(选择器)   $(选择器).eq(下标)

    相互转:
    js转jquery:$(jsDom)
    jquery转js:$(‘div‘)[0]  或  $(‘div‘).get(0)
    
DOM操作:

操作内容:
    取值:jsDom.innerHTML    赋值: jsDom.innerHTML=abc
    取值:jqDom.html()       赋值: jqDom.html(‘赋值‘)

操作样式:
    js:
        取值:jsDom.style.color
        赋值:jsDom.style.color=赋值
    jq:
        取值:jqDom.css(‘color‘)
        赋值:jqDom.css(‘color‘,‘red‘)
        
        jqDom.css(
                  ‘color‘,‘red‘,
                  ‘width‘,‘100px‘,
                  ‘height‘,‘100px‘
                  .....
        )

操作属性:
    js:jsDom.getAttribute(‘class‘)
    js:jsDom.setAttribute(‘class‘,‘add‘)
    
    jq:jqDom.attr(‘class‘)
    jq:jqDom.attr(‘class‘,‘add‘)

操作事件:
    js:jsDom.onCilck=function(){}
    jq:jqDom.cilck(fuction(){
            $this
    })

页面加载完成:

js:

window.onload=function(){

}


jq:


$(document).ready(function(){
    alert("你好");
})
//简写
$(function(){
    alert("你好");
});

jqDOM操作

标签:...   选择   dom   add   不同   on()   dom操作   color   元素   

原文地址:https://www.cnblogs.com/liangdong/p/10258999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!