首页 > 代码库 > JQuery_DOM基础

JQuery_DOM基础

2024-07-06 06:01:18   227人阅读

1.DOM 简介

DOM 它是一种文档对象模型。方便开发者对HTML 结构元素内容进行展示和修改。

在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。
在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。

1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。
2.DOM 有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在 jQuery 中并不需要深刻理解它。
3.树形结构用来表示 DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。

 

 

 

 

二．设置元素及内容

 最常用的操作就是对元素内容的获取和修改。

 

 

在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。html()方法可以获取或设置 html 内容，text()可以获取或设置文本内容。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //alert($("#dv").html());//获取的是id为dv里面的东西包括HTML标签，结果是这样<strong>www.baidu.com</strong>
        //alert($("#dv").text());//获取的是id为dv里面的东西不包括HTML标签，结果是这样www.baidu.com
        $(‘#dv‘).text(‘<em>www.li.cc</em>‘);//结果是<em>www.li.cc</em>，不能解析HTML标签
        $(‘#dv‘).html(‘<em>www.li.cc</em>‘);//结果是>www.li.cc，能够解析html标签
        
        //注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。
        //$(‘#dv‘).html($(‘#dv‘).html() + ‘<em>www.li.cc</em>‘); //追加数据
        
        
        //如果元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。
        alert($(‘input‘).val()); //获取表单内容
        $(‘input‘).val(‘www.li.cc‘); //设置表单内容

    });
</script>
<style type="text/css">
    
</style>
</head>
<body>
    <div id="dv"><strong>www.baidu.com</strong></div>
    <input type="text" value="wocao" />
</body>

 

如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //alert($(‘input‘).val());
        //$(‘input‘).val(‘女‘);//设置value为女
        $("input").val(["男","女", "编程" ]); //value 值是这些的将被选定
        
    });
</script>
<style type="text/css">
    
</style>
</head>
<body>
    <input type="radio" value="男" />男
    <input type="radio" value="女" />女
    <input type="checkbox" value="编程" />编程
</body>

 

 

 

 

三．元素属性操作

除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        //alert($(‘#dv‘).attr(‘id‘));
        //$(‘#dv‘).attr(‘title‘, ‘我是域名‘); //设置属性及属性值
        
        $(‘#dv‘).attr(‘title‘, function () {         //通过匿名函数返回属性值,效果同上
            return ‘我是域名‘;
        });
        
        //设置某个元素多个 key 属性的属性值
        $(‘#dv‘).attr( { 
            ‘title‘:‘我是域名‘,
            ‘class‘:‘red‘,
            ‘data‘:‘123‘
        });
    });
    //class不建议用attr来设置，后面哟更强大和更丰富的功能替代
</script>
<style type="text/css">
    
</style>
</head>
<body>
    <div id="dv"><strong>www.baidu.com</strong></div>
    <div id="dl"><strong>www.baidu.com</strong></div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $(‘#dv‘).attr(‘title‘, function (index, value) {                 //可以接受两个参数
            return value + (index+1) + ‘，我是域名‘;//value 是原来的title属性的值，如果没有那么就是undefined 
        });
    });
    
</script>
<style type="text/css">
    
</style>
</head>
<body>
    <div id="dv"><strong>www.baidu.com</strong></div>
    <div id="dl"><strong>www.baidu.com</strong></div>
</body>

 

 

 

 

 


联系
我们