jQuery操作得到DOM元素

jQuery再DOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用。以下是一个小样例及其效果图。

代码例如以下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>演示jquery操作得到的元素</title>
    <%--引入jquery文件--%>
    <script  type ="text/javascript" src ="jquery-2.1.4.js"></script>
    <script  type ="text/javascript">
        $(document).ready(function () {
            //触发onclick事件
            $("#testbutton").click(
                function () {
                    //使用class为test的元素包裹给定元素
                    $("p").wrap($(".test"));
                }
                );
        });
    </script>
    <%--基本样式设定--%>
    <style type ="text/css">
        .test {
        color :white ;
        background-color :#ffd800;
        }
        .wrap {
        background-color :green ;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

    <div id="content">
        <button id="testbutton">測试</button>
        <br /><br />
        <div class ="test"></div>
        <p id ="first">第一段文字,id为first</p>
        <p id ="second">第二段文字。id为second</p>
        <p id ="third">第三段文字,id为third</p>
    </div>
    </form>
</body>
</html>

对于jQuery的使用自己要多多实践,这样才干对它了如指掌啊~

时间: 2024-10-12 15:21:23

jQuery操作得到DOM元素的相关文章

[ jquery 方法 get(index) ] 可以将取得的相应jquery对象和DOM元素对象进行转化

取得其中一个匹配的元素:index表示取得第几个匹配的元素,这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数.$(this).get(0)与$(this)[0]等价, 这段话的意思就是可以将jquery对象和DOM元素对象进行转化 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta htt

jQuery -&gt; 删除/替换DOM元素

删除 删除操作非常简单,直接在结果集后链式调用remove()方法即可. 例如,要删除以下html脚本中所有的a元素,直接通过 $('a'.remove(); 就可以做到了. <h3>Anchors</h3> <a href="#" class="remove">Anchor Element</a> <a href="#">Anchor Element</a> <a h

jQuery.sort对DOM元素进行排序

实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs = $('#dataTable_table tbody tr'); 然后通过调用jquery的sort()方法进行排序,sort()方法接收的参数是一个方法,该方法就是实现排序的逻辑: $trs.sort(function(a,b){ var valveNumOfa = $(a).find('td

jQuery添加删除DOM元素

1.添加DOM元素  append   prepend   before  after //append 添加在同级元素的之前  实例: <div class="header"><p>添加节点在同级元素之后</p></div> var pageup = '<strong>append 在同级元素之后</strong><br>';         $('.header').on('click',funct

Jquery设置获取DOM元素属性

1, attr() $("button").click(function(){ $("#runoob").attr("href","www.96net.com.cn"); }); 2, 可以传递匿名函数 $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ retu

jquery操作ajax返回的页面元素

这两天工作不忙,正好从朋友那里拿到一个某个应用的开发文档,相关数据放在了mongodb里,自己电脑可以本地开启服务器然后通过给的借口来获取数据.由于这是一个比较大比较全的一个完整项目,也没有那么多经历全部做一下,就找了其中几部分来做一下,由于是一个电商类的移动端,所以那些数据都是动态加载上去的,通过ajax动态获取然后添加到页面上,所以主要是模板引擎的使用和ajax的运用,其他就是一些样式的操作.虽然以前也做过,但是这次碰到了一个问题,就是需要在ajax返回的内容里找到某个元素,然后给那个元素绑

jQuery操作DOM节点的相关方法

1.在指定节点内插入新节点 以下的内容都用于在打指定节点内添加新内容 1)        append(content):在jQuery对象包含的所有DOM节点内的尾部插入content所代表内容. 2)        append(function(index,html)):使用function(index,html)函数迭代处理jQuery所包含的每个节点,在每个节点的尾部依次插入function(index,html)函数的返回值. 3)        appendTo(selector)

jQuery对象与DOM对象转换

原文链接 http://www.cnblogs.com/ouyangping/p/6439939.html jQuery对象与DOM对象是不一样的 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id="imooc"></p> 我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:"hello,world",并且让文字颜色变成红色. 通过标准JavaScript处理: var p = docum

jQuery对象及DOM对象

jQuery对象与DOM对象 对于才开始接触jQuery库的初学者,我们需要清楚认识一点: jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id="imooc"></p> 我们要获取页面上这个id为imooc的p元素,然后给这个文本节点增加一段文字:"您好!通过慕课网学习jQ