JQuery基础知识和方法
一、jquery基础知识
什么是jquery，jquery是javascript框架库的一种，而javascript框架库又是什么呢？javascript框架库就是一个javascript文件，里面封装了大量的函数，或者说封装了很多兼容性的代码，可以执行和应用。
而jquery就是一种常见的javascript框架库，是对javascript的封装，目的是为了简化js代码的应用。
二、JQuery与DOM的区别与转换
用一个简单的点击事件来列举两者之间的区别，代码如下：
两者实现的效果一致，其中使用jquery对代码进行了精简，使页面整洁干净。
<body>
<div id="btn">
<input type="button" value="点击出现一个块" >
</div>
<div id="aa"></div>
</body>
<script src="jquery.min.js"></script>
<script>
//原生的js代码。添加一个点击事件
window.onload=function(){
document.getElementById("btn").onclick=function(){
var data = document.getElementById("aa");
data.style.width = "100px";
data.style.height = "100px";
data.style.background ="blue";
}
}
//js封装的jquery的代码。注意，当使用$符号来编写js的时候，必须 引用jquery文件。
$(function(){
$("#btn").click(function(){
$("#aa").css({"width":"200px","height":"200px","background":"red"})
})
})
</script>
</html>
三、JQuery方法的总结
jquery的方法
.val(” ") -----> 内容为空，表示 获取属性value的值。填写内容，则表示赋予其value值。
.css( ) -------> 赋予其css样式，或者替换原有的css样式，其中有两个参数，第一个为属性，第二个为值，
表现形式为： .css("width","200px")
或者通过键值对的方式： .css({"width":"200px","height":"100px"})
.html() ------> 设置标签中间显示其他标签及内容，类似于innerHTML
.text() ------->设置标签中间显示的文本内容，类似于innerText
.show() -------〉表示让该元素显示，其中show里面可以加数字，表示多久显示完整，以毫秒为单位。1000
.hide() -------〉表示让该元素隐藏，
.siblings(" ")-------〉 获取除该元素以外的所有兄弟元素，来调整样式。
.index() ---------〉获取当前元素的索引值 ，
.find() -------〉针对当前元素，找里面的其他兄弟元素。
.click((function(){ }); -------->当鼠标点击时，给它一个功能
.mouseover(function(){ })；------> 当鼠标移入时，给它添加一个效果
.mouseout(function(){ })；--------> 当鼠标移出时，给它添加一个效果
.setTimeout() --------->方法用于在指定的毫秒数后调用函数或计算表达式,其中有两个参数，举例如下：
setTimeout(function(){ alert("Hello"); }, 3000)
.setInterval(function(){ alert("Hello"); }, 3000); ------------>方法用于在指定的毫秒数后调用函数或计算表达式,两个参数，跟setTimeout的区别在于会持续调用，
一直到 clearInterval() 被调用或窗口被关闭。
