<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>品牌列表案例</title>
    <script src="js/jquery-2.1.1.min.js" rel="script"></script>
    <script>
        $(document).ready(function () {
            var $text =$("ul li:eq(2)"); //获取ul的第三个子节点
            var $text_v1 = $text.text();//获取指定元素的文本内容
            var $text_v2 = $("p").append("<b> world</b>");//向匹配的元素内部追加内容
            ($("<b>世界</b>").appendTo("p")); //向匹配的元素内部添加文本内容到末尾，
            $("a").prepend("<b>标签</b>");//在每一个匹配元素的文本前面添加指定内容
            $("<b>加在后面</b>").appendTo("a");//在每一个匹配元素的文本后面添加指定内容
            $("i").after("<b>内容加在倾斜文本之后</b>");//在匹配的元素之后添加文本内容
            //按照字面顺序来理解即可，就是将b标签内的内容添加到em标签的文本之后
            $("<b>的文本</b>").insertAfter("em");
            //添加到匹配元素的文本之前，因为div是块元素，所以添加的内容也是块元素
            $("div").before("<b>前面的文本</b>");
            //按照字面的反顺序来理解，也就是b标签文本添加到ol li:eq(1)元素文本的后面，不是前面
            $("<b>hello </b>").insertBefore($("ol li:eq(1)"));

            $("p").click(function(){
                //点击p标签文本时将p标签本身的文本复制（克隆）一次追加在em标签之后。
                $(this).clone().appendTo("em");
            });
                //将ol li:eq(2)元素的文本内容替换成指定的文本内容。
            $("ol li:eq(2)").replaceWith("<b>刘备</b>");
            $("em").wrap("<b></b>");//用b标签将em标签包裹起来

            alert($("strong").attr("title"));//获取匹配元素的属性的值
        })
    </script>
    </head>
<body>
   <ul>
       <li>demo1</li>
       <li>demo2</li>
       <li>demo3</li>
       <li>demo4</li>
       <li>demo5</li>
       <li>demo6</li>
   </ul>
<p>hello</p>
<a>box</a>
<a>title</a>
<a>test</a><br><br>
<i>倾斜文本</i><br><br>

<em>颠倒常理</em><br>
<div>hello</div>
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王二</li>
</ol>

<strong title="stronger">strong</strong>
</body>
</html>

jQuery 常用的方法的更多相关文章

  1. js与jquery常用数组方法总结

    昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害 ...

  2. jQuery 常用核心方法

    jQuery 常用核心方法 .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 $('p').each(function(idx,node){ $(node).text(idx + ...

  3. jQuery常用工具方法

    前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法 ...

  4. jQuery常用属性方法大全 attr(),val()

    @@@@属性篇: 写作本篇文章的意义:jQuery的教程千千万,却没有英文版的API讲的系统.到位,一些话用中文翻译过来味道就变了,所以我将英文版的API的一些常用的方法单独提出来放在这里,并用自己的 ...

  5. Jquery常用的方法总结

    1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom ...

  6. jquery 常用基础方法

    1 jquery常用方法: 2 取得标签元素里面内容与修改: 3 1.text()方法: 4 $(document).ready(function(){ 5 //alert("文档加载完毕& ...

  7. jQuery常用事件方法详解

    目录 jQuery事件 ready(fn)|$(function(){}) jQuery.on() jQuery.click jQuery.data() jQuery.submit() jQuery事 ...

  8. JQuery常用函数方法全集

    Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test ...

  9. jquery 常用工具方法

    inArray(value, array [, fromIndex ])方法类似于原生javascript的indexOf()方法,没有找到匹配元素时它返回-1.如果数组第一个元素匹配参数,那么$.i ...

  10. jQuery常用的方法

    each() 以每一个匹配的元素作为上下文来执行一个函数. size()  jQuery 对象中元素的个数.

随机推荐

  1. 【转载】 python-星号变量的特殊用法

    原文链接:https://www.qingsword.com/qing/python-12.html 引言 在Python中,星号除了用于乘法数值运算和幂运算外,还有一种特殊的用法"在变量前 ...

  2. nodejs -Router

    Node 用 request 事件来处理请求响应,事件内使用分支语句处理不同路径的请求,而 Express 封装了这些操作,使得代码简洁优雅 但如果请求路径变多,都写在 app.js 文件里的话,就会 ...

  3. 获取AWR报告

    1.进入sqlplus [oracle@localhost admin]$ sqlplus / as sysdba SQL Production :: Copyright (c) , , Oracle ...

  4. costmap_2d 解析

    costmap_2d这个包提供了一种2D代价地图的实现方案,该方案利用输入的传感器数据,构建数据2D或者3D代价地图(取决于是否使用基于voxel的实现),并根据占用网格和用户定义的膨胀半径计算2D代 ...

  5. Libevent源码分析系列【转】

    转自:https://www.cnblogs.com/zxiner/p/6919021.html 1.使用libevent库     源码那么多,该怎么分析从哪分析呢?一个好的方法就是先用起来,会用了 ...

  6. liunx 安装Zabbix的心酸历程

    作者:邓聪聪 为了工作之需要,在系统服务方面不断的摸爬打滚,有了这样点点滴滴的经验,留后在使用!  插件网盘取. 链接: https://pan.baidu.com/s/1i5u0ed3 密码: rx ...

  7. Java常见异常及解释

  8. SharePoint 2010 安装错误：请重新启动计算机，然后运行安装程序以继续

    一．环境:Windows Server 2008 R2 with sp1,SharePoint 2010 二．问题描述: 正常的安装SharePoint 2010 ,安装完必备组件,并提示所有必备组件 ...

  9. bootstrap4简单使用和入门01-简单表单的使用

    基本表单页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  10. 使用OneNote2016发送博客

    本人使用的是博客园的博客,其他的博客设置应该大同小异,OneNote使用的是2016版本,系统为Win10家庭中文版. 传统的在web端编辑发布博客的方式是在是心累,图文编辑麻烦,不便于存储,编辑的时 ...