js/jquery 操作document对象

Posted 2020-07-28 hq金水

//获取对象
    //js获取的是dom对象，jquery获取的是jquery对象
    //jquery对象可以输出dom对象,索引方式输出dom对象，eq()[]方式输出dom对象;
    
    //通过id获取元素
    /*var div=document.getElementById("one");
    alert(div);//获取到的是一个html元素[object htmldivelement],DOM对象
    
    var div=$("#one");
    //alert(div);//获取到的是一个对象[object Object]，jquery对象
    alert(div[0]);//[object htmldivelement]
    alert(div.eq(0)[0]);//[object hemldivelement]*/
    
    //通过class获取元素
    /*var div=document.getElementsByClassName("two");
    alert(div);//js获取到的是数组[object collection],取值用下标
    
    var div=$(".two");
    alert(div);//[object Object],里面装的是数组，3个div元素;
    alert(div[0]);//索引取出的是DOM对象;
    alert(div.eq(2)[0]);//这样取出的是DOM对象;*/
    
    /*//通过name获取元素
    var bd=document.getElementsByName("uid");
    alert(bd[0]);
    //通过属性获取元素;
    var bd=$("[name=‘uid‘]");
    var bd=$("[bs=‘aa‘]");
    alert(bd[0]);*/
    
    //通过标签名获取元素
    /*var a=document.getElementsByTagName("div")
    alert(a[0]);
    var b=$("div");
    alert(b[0]);*/
    
    //组合选取
    /*var c=$("div span");//空格选取后代
    alert(c[0]);*/

//操作对象
    //1、操作内容
    //非表单元素
    //js:
    //取值:
    /*var t=document.getElementById("one");
    alert(t.innerText);
    alert(t.innerHTML);
    //赋值
    t.innerText="aaa";
    t.innerHTML="<h1>反反复复</h1>";
    
    var ar=document.getElementsByClassName("two");
    ar[0].innerText="s";
    alert(ar[0].innerText);*/
    
    //jquery赋值取值:
    /*var a=$("#one");
    a.text("面积");
    alert(a.text());
    a.html("<input type=‘text‘ />");
    alert(a.html());*/
    
    //表单元素
    //js
    //var t=document.getElementById("uid");
    //t.value="asdas";
    //alert(t.value)
    //jquery
    /*var t=$("#uid");
    t.val("就喝喝酒");
    alert(t.val());*/
    //2、操作属性
    //js
    /*var d=document.getElementById("one");
    d.setAttribute("","");
    d.removeAttribute("");
    d.getAttribute("");*/
    //jquery
    //var d=$("#one");
    /*d.attr("test","很后悔");//创建
    d.removeAttr("test");//去除
    d.attr("id");//获取*/
    //3、操作样式
    //js
    /*var d=document.getElementById("one");
    d.style.backgroundColor="red";
    alert(d.style.color);//只能获取内联样式*/
    //jquery
    /*var a=$("#one");
    a.css("background-color","yellow");
    alert(a.css("color"));*/
    //4、操作元素
    /*var m=$("#one");
    var r="<div style=‘width:100px;height:100px;background-color:red‘ id=‘s‘>事实上事实上</div>";
    m.append(r);//追加元素
    $("#s").remove();//移除某个元素*/

//事件
    //点击事件
    /*$(".two").click(function(){
        alert($(this).text());
        })*/
    /*$(".two").click(function(){
        alert($(this).text());
        })*/
    //点一次弹两次
    //绑定
    $(".two").bind("click",function(){
        alert($(this).text());
        });
    //解绑
    $("#q").click(function(){
        $(".two").unbind("click");
        });
    //添加绑定按钮，点多次按钮点一下出现多次效果
    $("#qq").click(function(){
        $(".two").bind("click",function(){
            alert("aa");
            });
        })
    

 

 

//获取对象//js获取的是dom对象，jquery获取的是jquery对象//jquery对象可以输出dom对象,索引方式输出dom对象，eq()[]方式输出dom对象;//通过id获取元素/*var div=document.getElementById("one");alert(div);//获取到的是一个html元素[object htmldivelement],DOM对象var div=$("#one");//alert(div);//获取到的是一个对象[object Object]，jquery对象alert(div[0]);//[object htmldivelement]alert(div.eq(0)[0]);//[object hemldivelement]*///通过class获取元素/*var div=document.getElementsByClassName("two");alert(div);//js获取到的是数组[object collection],取值用下标var div=$(".two");alert(div);//[object Object],里面装的是数组，3个div元素;alert(div[0]);//索引取出的是DOM对象;alert(div.eq(2)[0]);//这样取出的是DOM对象;*//*//通过name获取元素var bd=document.getElementsByName("uid");alert(bd[0]);//通过属性获取元素;var bd=$("[name=‘uid‘]");var bd=$("[bs=‘aa‘]");alert(bd[0]);*///通过标签名获取元素/*var a=document.getElementsByTagName("div")alert(a[0]);var b=$("div");alert(b[0]);*///组合选取/*var c=$("div span");//空格选取后代alert(c[0]);*/