jqueryHTML相关方法

最新推荐文章于 2024-10-30 18:24:25 发布

cpf2016

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量295

点赞数

分类专栏： jquery 文章标签： javascript ViewUI

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

（1）html()

获取标签内的html内容

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn">Show HTML</button>
</body>
</html>

获取的是This is some <b>bold</b> text in a paragraph.

实际上就相当于原生js的document.getElementById("test").innerHTML

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
	  alert(document.getElementById("test").innerHTML);
  });
});
</script>
</head>

<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn">Show HTML</button>
</body>
</html>

（2）text()

获取标签内的内容，忽略HTML标签

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
    alert("Text: " + $("#test").text());
  });
});
</script>
</head>

<body>
<p id="test">This is some <b>bold</b> text in a paragraph.</p>
<button id="btn">Show Text</button>
</body>
</html>

结果为This is some bold text in a paragraph.
实际上作用相当于原生js的document.getElementById("test").innerText

（3）val()

获取表单中的值

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>Name: <input type="text" id="test"></p>
<button>Show Value</button>
</body>
</html>

实际上相当于原生js中的document.getElementById("test").value

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
	  alert(document.getElementById("test").value);	  
  });
});
</script>
</head>

<body>
<p>Name: <input type="text" id="test"></p>
<button>Show Value</button>
</body>
</html>

（3）attr()

获取标签中属性

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3cschool.cc" id="w3s">W3Cschool.cc</a></p>
<button>Show href Value</button>
</body>
</html>

相当于原生js中的document.getElementById("w3s").getAttribute("href")

（4）设置值

1.设置标签内（即HTML和Text）、表单值value

将设置的值直接作为参数即可

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });
});
</script>
</head>

<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
</body>
</html>

原生js中相当于 document.getElementById("test").innerHTML = 值 document.getElementById("test").innerText = 值 document.getElementById("test").value=值

如果赋的值比较复杂，可以使用回调函数

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#test").text(function(i,origText){
      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
    });
  });
});
</script>
</head>

<body>
<p id="test">This is a <b>bold</b> paragraph.</p>
<button id="btn">Show Old/New Text</button>
</body>
</html>

2.设置标签属性

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href","http://www.w3cschool.cc/jquery");
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3cschool.cc" id="w3s">W3Cschool.cc</a></p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>

相当于原生js的document.getElementById("w3s").setAttribute("href","http://www.baidu.com")

当然标签中属性会有多个，所以可以一次性设置多个

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr({
      "href" : "http://www.w3cschool.cc/jquery",
      "title" : "W3Cschool jQuery Tutorial"
    });
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3cschool.cc" id="w3s">W3Cschool.cc</a></p>
<button>Change href and title</button>
<p>Mouse over the link to see that the href attribute has changed and a title attribute is set.</p>
</body>
</html>