jQuery+js

jquery语法是通过选取HTML元素，并对选取的元素进行某些操作。

基础语法： $(selector).action()

$：定义jquery

selector：查询和查找HTML元素

action()：执行队员素的操作

$(this).hide() - 隐藏当前元素。$("p").hide() - 隐藏所有 <p> 元素。$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素。

jquery—获取内容与属性：

获得内容：text（），html（），val（）。

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

例如：

<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

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

可以显示 Text: 这是段落中的粗体文本。当显示HTML时 HTML: 这是段落中的 <b>粗体</b> 文本。

<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>名称: <input type="text" id="test" value="菜鸟教程"></p>
<button>显示值</button>
</body>
</html>

显示菜鸟教程

getelementById:通过其id返回元素的引用; 该ID是可用于标识元素的字符串; 它可以使用idHTML 中的属性或脚本来建立,区分大小写。

html：

<html>
<head>
  <title>getElementById example</title>
</head>
<body>
  <p id="para">Some text here</p>
  <button onclick="changeColor('blue');">blue</button>
  <button onclick="changeColor('red');">red</button>
</body>
</html>

js：

function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

getelementsbyclassname：这个方法通过class中类名的来访问元素。只接受一个参数就是类名。

还可以查找带有多个类名的元素。在类名之间添加空格符号。

该方法还可以与getElementById连用，

var shopping=document.getElementById('purchases')
var sales=getElementByClassName(shopping,"sale")

这样获取购物列表

猜你喜欢