jQuery学习笔记1 引用jQuery+常见方法

JQuery是一个javascript的框架，是对javascript的一种封装。

通过JQuery可以非常方便的操作html的元素

要使用Jquery需要导入一个第三方的javascript库 jquery.min.js

1. 下载 jquery.min.js
2. 把 jquery.min.js和测试的html放在同一个目录下
3. 在测试的html中直接写 src="jquery.min.js"

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

$(function(){
});

表示文档加载。看上去略复杂，其实是由下面两种构成：

$();

function(){
}

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
换句话说，写在这里面的JQuery代码都是文档加载好之后的。
就不会有获取一个还没有加载好的图片这种问题了。

 

通过id获取元素

 

与javascript通过id获取元素值的方式(document.getElementById )不同
JQuery通过 $("#id") 就可以获取了


需要注意的是，通过 document.getElementById 获取到的是 DOM里的 元素节点
而通过$("#id") 获取到的是一个 JQuery 对象

增加监听器

JQuery增加click事件的监听

$("#b1").click(function(){
   alert("点击了按钮");
});

这个也是由两部分组成：
1. b1按钮的点击事件

$("#b1").click();

2. 弹出对话框的函数

function(){
   alert("点击了按钮");
}

JQuery 不需要在html元素上进行操作，这样的好处是，html只需要显示内容，特别是业务复杂起来之后维护js代码会更加容易。

取值

 

通过JQuery对象的val()方法获取值
相当于 document.getElementById("input1").value;

 

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#input1").val());
   });
});
   
</script>
   
<button id="b1">取值</button>
    
<br>
<br>
   
<input type="text" id="input1" value="默认值">

获取元素内容,如果有子元素，保留标签

 

通过html() 获取元素内容,如果有子元素，保留标签

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});
  
</script>
  
<button id="b1">获取文本内容</button>
   
<br>
<br>
  
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

获取元素内容,如果有子元素，不包含子元素标签

 

通过text() 获取元素内容,如果有子元素，不包含标签

 

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").text());
   });
});
   
</script>
   
<button id="b1">获取文本内容</button>
    
<br>
<br>
   
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>