二、jQuery小程序之jQuery HTML

其他 2018-08-18 20:13:56 阅读次数: 0

 

获得内容和属性:

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM操作：

获得内容：

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值，获得输入字段的值
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("Test:"+$("#test").text());
            });
            $("#btn2").click(function(){
                alert("html:"+$("#test").html());
            });
        })
    </script>


<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>

获取属性：attr()   用于获取属性值

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("button").click(function(){
              alert("href值："+$("#w3s").attr("href"));
           });
        })
    </script>

</head>
<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

设置内容和属性:

设置内容 - text()、html() 以及 val()

script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("#btn1").click(function(){
              $("#test1").text("hello world");
           });
           $("#btn2").click(function(){
              $("#test2").html("<b>hello world</b>");
           });
           $("#btn3").click(function(){
              $("#test3").val("Doolu");
           });
        })
    </script>

</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>

text()、html() 以及 val() 的回调函数：

text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：

  • 被选元素列表中当前元素的下标  i
  • 原始（旧的）值。 origTest

然后以函数新值返回您希望使用的字符串。

当前元素的下标，原来是一组相同的class时当前文本的下标：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                $(".aa").text(function(i,oriText){
                    alert("原文本："+oriText+"新文本：hello world! index("+i+")");
                });
            });
        });
    </script>

</head>
<body>
<button id="btn1">测试下标</button>
<div>
    <p class="aa">aa1</p>
    <p class="aa">aa2</p>
    <p class="aa">aa3</p>
    <p class="aa">aa4</p>
    <p class="aa">aa5</p>
</div>

这样每次的index依次为0,1,2,3,4;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#test1").text(function(i,origTest){
                    return "Old text:"+origTest+"New text:+Hello(index)"+i;
                })
            })
            $("#btn2").click(function(){
                $("#test2").html(function(i,origTest){
                    return "Old html:"+origTest+"New html:+Hello(index)"+i;
                })
            })
        });
    </script>

</head>
<body>
<p id="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新 HTML</button>
</body>

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>

attr() 方法也允许您同时设置多个属性。

下面的例子演示如何同时设置 href 和 title 属性：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr({
      "href" : "http://www.w3school.com.cn/jquery/",
      "title" : "W3School jQuery 教程"
    });
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>改变 href 和 title 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p>
</body>

attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    });
  }); 
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>

添加元素：

可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>

jQuery prepend() 方法在被选元素的开头插入内容。

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

<script>
function appendText()
{
var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick="appendText()">追加文本</button>

</body>

after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});
</script>
</head>

<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>

添加多个：

<script>
function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建元素
var txt3=document.createElement("big");  // 通过 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}
</script>
</head>
<body>

<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button onclick="afterText()">在图片后面添加文本</button>

</body>

删除元素:

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素
$("#div1").remove();

div消失。

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>

删除div里的内容。

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("p").remove(".italic");
            })
        });
    </script>

</head>
<body>

<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>

</body>

获取并设置 CSS 类

可以很容易地对 CSS 元素进行操作。

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

     可以给多个元素添加一个类也可以给一个类添加多个样式

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
$("button").click(function(){
  $("#div1").addClass("important blue");
});

removeClass() 方法：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

toggleClass() 方法：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

css() 方法：

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性：

css("propertyname");

设置 CSS 属性：

css("propertyname","value");

设置多个 CSS 属性：

$("p").css({"background-color":"yellow","font-size":"200%"});

尺寸：

很容易处理元素和浏览器窗口的尺寸。

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>

innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。切记：有两个，总和为内边距*2+width/height.

outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。切记：内边距*2+width/height+border*2.

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                var txt="";
                txt+=    "width"+$("#div1").width()+"<br />"
                        +"height"+$("#div1").height()+"<br />"
                        +"innerWidth"+$("#div1").innerWidth()+"<br />"
                        +"innerHeight"+$("#div1").innerHeight()+"<br />"
                        +"outerWidth"+$("#div1").outerWidth()+"<br/>"
                        +"outerHeight"+$("#div1").outerHeight()+"<br/>"
                        +"outerWidth"+$("#div1").outerWidth(true)+"<br/>"
                        +"outerHeight"+$("#div1").outerHeight(true)+"<br/>"
                $("#div1").html(txt);
            });
        });
    </script>

</head>
<body>
<div id="div1" style="height:300px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
</body>

显示文档和窗口的尺寸:

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Document width/height: " + $(document).width();
    txt+="x" + $(document).height() + "\n";
    txt+="Window width/height: " + $(window).width();
    txt+="x" + $(window).height();
    alert(txt);
  });
});

设置宽高：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").width(320).height(320);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>调整 div 的尺寸</button>

猜你喜欢

转载自blog.csdn.net/weixin_40512519/article/details/81514568
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022