zoukankan      html  css  js  c++  java
  • js/jquery 操作document对象

    一、获取对象
        //js获取的是dom对象,jquery获取的是jquery对象
        //jquery对象可以输出dom对象,索引方式输出dom对象,eq()[]方式输出dom对象;eq()输出jquery对象;
    //注意:通过id获取到的是一个对象,通过其他三种方式获取到的是一个数组 1、通过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]*/ 2、通过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对象;*/ 3、通过name获取元素 var bd=document.getElementsByName("uid"); alert(bd[0]); //通过属性获取元素; var bd=$("[name='uid']"); var bd=$("[bs='aa']"); alert(bd[0]);*/ 4、通过标签名获取元素 /*var a=document.getElementsByTagName("div") alert(a[0]); var b=$("div"); alert(b[0]);*/ 5、组合选取 /*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赋值取值:通过$("#one")方式获取到jquery对象,把text内容或是html元素扔进去,相应的页面显示文本内容或是html标签;
        /*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='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");
                });
            })
        
  • 相关阅读:
    关于Maya Viewport 2.0 API 开发的介绍视频
    春节大假
    Some tips about the life cycle of Maya thread pool
    Can I compile and run Dx11Shader for Maya 2015 on my side?
    How to get current deformed vertex positions in MoBu?
    想加入全球首届的 欧特克云加速计划吗?
    三本毕业(非科班),四次阿里巴巴面试,终拿 offer(大厂面经)
    mac、window版编辑器 webstorm 2016... 永久破解方法。
    node 搭载本地代理,处理web本地开发跨域问题
    js 一维数组,转成嵌套数组
  • 原文地址:https://www.cnblogs.com/jinshui/p/5610166.html
Copyright © 2011-2022 走看看