当前位置 : 主页 > 网页制作 > JQuery >

8.8 JQuery框架

来源:互联网 收集:自由互联 发布时间:2021-06-15
8.8 JQuery框架 一、 JQuery是一个javascript的框架 ,是对javascript的一种封装。 通过JQuery可以非常方便的操作html的元素\要使用Jquery需要导入一个第三方的 javascript库 jquery.min.js, 与javascript通

8.8 JQuery框架

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

通过JQuery可以非常方便的操作html的元素\要使用Jquery需要导入一个第三方的javascript库 jquery.min.js,

与javascript通过id获取元素节点的方式(document.getElementById )不同

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

<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
//$(...);JQuery代码都是文档加载好之后的。
$(function(){
//通过$("#b1") 获取到的是一个 JQuery 对象
   $("#b1").click(function(){
//通过$("#d")拿到div对象后,直接调用hide()和show()方法,即可实现隐藏和显示。
      $("#d").hide();
   });
   $("#b2").click(function(){
      $("#d").show();
   });
});
 
</script>
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
 
<br>
<br>
<div id="d">
 
这是一个div
</div>

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

二、常见方法

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

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

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

三、

网友评论