jQuery基础学习（二）

来源：互联网发布：nginx lua waf 规则编辑：程序博客网时间：2024/05/31 00:40

HTML操作

改变 HTML 元素的内容。

向 HTML 元素追加内容。

在 HTML 元素之后追加内容。

CSS操作

改变 HTML 元素的 CSS 属性。

改变多个 CSS 属性。

获得元素的 CSS 属性。

AJAX和jQuery

使用 $(selector).load(url) 来改变 HTML 内容。

使用 $.ajax(options) 来改变 HTML 内容

jQuery：1.3.1,改变HTML元素内容

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $("p").html("W3School");  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>

jQuery：1.3.2，向HTML元素追加内容

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $("p").append(" <b>W3School</b>.");  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>

jQuery：1.3.3,在HTML元素之后追加内容

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $("p").after(" W3School.");  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>

jQuery：1.4.1,改变HTML元素的CSS属性

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $("p").html("W3School");  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>

jQuery：1.4.2，改变多个CSS属性

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("p").css({"background-color":"red","font-size":"200%"});  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

jQuery：1.4.3,获得元素的CSS属性

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("div").click(function(){  $("#result").html($(this).css("background-color"));  });});</script></head><body><div style="width:100px;height:100px;background:#ff0000"></div><p id="result">Click in the box</p></body></html>

jQuery：1.5.1，使用 $(selector).load(url) 来改变 HTML 内

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("#b01").click(function(){  $('#myDiv').load('jquery/test1.txt');  });});</script></head><body><div id="myDiv"><h2>通过 AJAX 改变文本</h2></div><button id="b01" type="button">改变内容</button></body></html>

jQuery：1.5.2,使用 $.ajax(options) 来改变 HTML 内容

<html><head><script type="text/javascript" src="jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("#b01").click(function(){  htmlobj=$.ajax({url:"jquery/test1.txt",async:false});  $("#myDiv").html(htmlobj.responseText);  });});</script></head><body><div id="myDiv"><h2>通过 AJAX 改变文本</h2></div><button id="b01" type="button">改变内容</button></body></html>