JQuery笔记

<head>
<script src="jquery.js"></script>
</head>

在 HTML5 中,不必在 <script> 标签中使用 type="text/javascript"。

-----------------------------------------------------------------------------------

<h2 id="test">This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

注意,上面的html中h2和p拥有相同的id “test",这时我们在点击按钮button的时候,只会隐藏掉h2元素,p元素保持不动,可以看出,理论上id是不应该重复的。

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

<script type="text/javascript">
$(document).ready(function()
{
  $("button").click(function()
  {
  $(".test").hide();
  });
});
</script>

而在上面的这段代码中,h2和p均会被隐藏,因为h2和p元素均属于”test"类

以上,两点形成对比,也是符合逻辑的,id作为标识一般不允许重复,而多个不同的html元素可以同时包含在一个类中。

-----------------------------------------------------------------------------------

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

-----------------------------------------------------------------------------------

有关于选择器

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

原文地址:https://www.cnblogs.com/SharpL/p/4576486.html