jQuery学习笔记(基于jquery.1.10.2进行的验证)之三

最新推荐文章于 2022-10-10 20:40:03 发布

Augus6

最新推荐文章于 2022-10-10 20:40:03 发布

阅读量954

点赞数

文章标签： jquery 学习笔记

本文链接：https://blog.csdn.net/Augus6/article/details/11579811

版权

本文详细介绍了jQuery中操作DOM的各种方法，包括属性操作、元素插入、包装、反向插入、字符串拼接、元素复制以及load方法和JSON数据的应用。讲解了attr()、removeAttr()、prop()、insertBefore()、insertAfter()、appendTo()、prependTo()、wrapAll()、wrap()、before()、after()、append()、prepend()、clone()、html()、text()、load()以及AJAX中处理JSON数据的技巧。

摘要由CSDN通过智能技术生成

四、操作DOM

1.操作属性

①attr()方法操作DOM属性有两种方式：一是attr('property','value')，该方式一次设置一个属性，而attr('property')则是获得property的属性值；二是attr({'prop1':'val1','prop2':'val2'})，该方式一次设置多个属性，其用法与css()方法设置元素样式十分相似。

②removeAttr()方法用于移除DOM元素的属性。

③虽然attr()和removeAttr()方法也能操作元素的class属性，但还是建议使用专用方法addClass()和removeClass()，因为这两个方法可以精确的控制有多个class属性的情况。

④prop()方法与attr()方法用法基本一致，在逻辑上应该返回boolean值的时候适合用prop()。

2.插入元素

以下四种插入元素的方法正如它们的字面意思一样：

①insertBefor()，在现有元素外部、之前添加元素。

②inssertAfter()，在现有元素外部、之后添加元素。

③appendTo()，在现有元素内部、之后添加元素。

④prependTo()，在现有元素内部、之前添加元素。

是个方法使用方法相同，只是效果有差异：

$('<a href="http://www.baidu.com">百度</a>').insertAfter('p');//网页中所有段落之后添加百度链接

3.移动元素

使用jQuery选择符选定要移动的元素，然后调用上面的方法插入到适当的位置即可。

4.包装元素

wrapAll()方法用于包装jQuery选择符选中的所有元素，而wrap()方法则在被选中元素隐式迭代时包装每一个元素。

$('p').insertBefore('#target').wrapAll('<ol id="list"></ol>').wrap('<li></li>');

上述代码的效果是将所有p标签整体使用<ol></ol>包装起来，然后每一个具体的p标签用<li></li>包装起来，再将其插入到$('#target')之前。

5.反向插入方法

前面介绍的方法都是调用“被插入元素”的方法，将其移动到“目标元素”的某某位置，而反向插入方法与之相反，它是由“目标元素”调用方法，在其适当位置插入选定的元素。四个元素移动方法对应的反向方法如下，不在详述：

①before()；②after()；③append()；④prepend()。

6.join()方法

我们在构造DOM元素的时候经常会遇到字符串的拼接，有时还夹杂数学运算。为了使代码逻辑更清晰，可以使用数组的join()方法，其用法如下：

var str = ['a','b','c'].join('');//str='abc'，等价于'a'+'b'+'c'

join()方法用其接收的字符串参数将数组元素拼接起来，上例中参数为空字符串‘’，所以结果为数组元素直接连接成的字符串。而如果方法中没有参数则返回结果是‘a,b,c’。

应用join()方法拼接DOM元素的应用如下：

$('p').each(function(index){
    $(this).append([
        '<b>这是第',
        index+1,
        '段</b>'
    ].join(''));
});

7.复制元素

clone()方法用于复制元素，但是复制出来的元素现在是是没有元素本体所具有的事件的，要想连事件一起复制需要在方法中添加参数true，clone(true)。

了解：

html()方法用于设置或获取选定元素中的html文本；而text()方法只会获取或设置选定元素的中的文本内容，不会包含html标签及样式。

<p id='text'><b>Hello</b> world</p>
<script>
    alert($('text').html());//显示结果<b>Hello</b> world
    alert($('text').text());//显示结果Hello world
</script>

以上演示的是获取内容，设置内容示例如下：

<p id='text'></p>
<script>
    $('text').html('<b>Hello</b> world');//标签p中显示粗体的Hello和正常体的 world
    $('text').text('<b>Hello</b> world');//标签中显示不带任何样式的<b>Hello</b> world
</script>

五、通过Ajax发送数据

1.load()方法追加html

假设被追加的a.html页面的内容为：<b>Hello World!</b>，接下来看以下代码：

<p id="target"></p>
<script>
    $('#target').click(function(){
        $(this).load('a.html');
        alert('Load Completed!');
    });
</script>

注意：

①a.html并不是一个真正的HTML文档，它不包含<html>、<head>、<body>等部分，通常称之为html片段。

②alert()语句不一定在a.html页面load进来之后才执行，因为ajax是一种异步技术，在发出load请求之后就会马上执行接下来的脚本。

2.JSON数据在AJAX中的应用

和html文件相比，JSON数据的特点在于它只传递有“价值”的数据，而不包含文档的样式，因此JSON数据更为“精简”，也更适合于异步数据传递。

如果a.json是一个存储JSON格式数据的文件，那么jQuery加载并处理该文件中数据的示例如下：

a.json
[
{"name":"zhao","age":20},
{"name":"qian","age":21},
{"name":"sun","age":25}
]
<script>
$('#target').click(function(){
    $.getJSON('a.json',function(data){
        var html = '';
        $.each(data,function(index,entry){
            html = html + '<p><b>姓名：' + entry.name + '</b>&nbsp;年龄：' + entry.age + '</p>';
        });
        $('#someid').html(html);
    });
});
</script>

需要掌握加载JSON文件的$.getJSON()方法，和遍历JSON对象的$.each()方法。

注意：加载的json文件中不能包含用来构建HTML的字符，如‘<’等。