jQuery入门：获取对象、函数区别、对象转换
什么是jQuery
jQuery是js库，它通过封装原生的JavaScript函数得到一套定义好的方法。
jQuery主旨：以更少的代码，实现更多的功能。write less，do more
jQuery的优势
jQuery优势：
1.可以像css一样访问页面外观
2.简化js代码操作
3.事件处理更加容易
4.动画效果使用方便
5.Ajax技术更加完美
6.大量的基于jQuery的插件
7.可以自定义拓展功能插件
jQuery和JavaScript的一些区别
获取对象的区别
1.首先看js获取对象的方法；
我们写一个点击按钮使div隐藏和显现的功能
看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jQuery的比较</title>
<style>
#container{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id="container"></div>
<button id="toggle">Toggle(切换)</button>
</body>
<script>
var btn=document.getElementById('toggle');
var con=document.getElementById('container');
btn.onclick=function(){
if(con.style.display!='none'){
con.style.display='none';
}else{
con.style.display='block';
}
}
</script>
</html>
我们看到，首先需要获取两个对象并分别定义为一个(var)变量；
然后给按钮添加一个实践监听；
然后还需要if else来判断：当div显现的时候点击使其隐藏，当div隐藏的时候点击使其显现
接着我们用jQuery的方法来实现这个功能，看一下有何区别：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jQuery的比较</title>
<style>
#container{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id="container"></div>
<button id="toggle">Toggle(切换)</button>
</body>
<script src="../js/jquery-3.1.1.js"></script>
<script>
var btn = $('#container');
var jq=$('#toggle');
jq.click(function(){
btn.toggle()
});
</script>
</html>
首先需要引入jQuery库；设置好你文件的路径
然后同样获取对象，但是jQuery的要简洁很多：
var btn = $(’#container’);
就相当于js里的
var btn=document.getElementById(‘toggle’);
接着这一步：
jq.click(function(){
btn.toggle()
});
就相当于js里的
btn.οnclick=function(){
if(con.style.display!=‘none’){
con.style.display=‘none’;
}else{
con.style.display=‘block’;
}
}
需要注意的是：
js对象和jQuery对象是不能相互使用的，js对象不能使用jQuery的方法 jQuery也不能使用js的方法
js和jQuery方法的写法也是不同的，比如js里onclick在jQuery里是写成click的
小注：根据id获取：#div 根据类名：.div 根据标签名：div
文档就绪函数的区别
我们注意到，上面的代码里script是写在body下面的。因为代码都是逐行读取的，需要先加载完页面，再执行js代码。如果我们写在上面的话，就会获取不到我们需要获取的对象，因为当执行js代码的时候，文档还没有加载完毕，所以我们获取的是空元素，从而不能加事件监听，会报错。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jQuery的比较</title>
<style>
#container{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<script>
var btn=document.getElementById('toggle');
var con=document.getElementById('container');
btn.onclick=function(){
if(con.style.display!='none'){
con.style.display='none';
}else{
con.style.display='block';
}
}
</script>
</head>
<body>
<div id="container"></div>
<button id="toggle">Toggle(切换)</button>
</body>
</html>
如图，这样写是没用效果的：
所以，
这时候我们需要加上文档就绪函数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jQuery的比较</title>
<style>
#container{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<script>
window.onload=function(){
var btn=document.getElementById('toggle');
var con=document.getElementById('container');
btn.onclick=function(){
if(con.style.display!='none'){
con.style.display='none';
}else{
con.style.display='block';
}
}
}
</script>
</head>
<body>
<div id="container"></div>
<button id="toggle">Toggle(切换)</button>
</body>
</html>
这是js的写法，jQuery的写法与之不同；
看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jQuery的比较</title>
<style>
#container{
width: 100px;
height: 100px;
background-color: orange;
}
</style>
<script src="../js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
var container = $('#container');
var jq=$('#toggle');
jq.click(function(){
container.toggle();
});
});
</script>
</head>
<body>
<div id="container"></div>
<button id="toggle">Toggle(切换)</button>
</body>
</html>
js文档就绪函数window.load和jQuery文档就绪函数$(document).ready的区别：
1.
执行时机不一样 js的是等全部的dom加载完毕，并且完全显示后执行。
jQuery是等dom加载完毕之后即可执行（优点：执行的时机会提前）。
2.
js的文档就绪函数不能重复定义 ，如果重复定义的话，下面的代码会把上面的覆盖掉，只有一个有效果。
jQuery的可以重复定义，不会相互覆盖，都有效果，可以执行多次，第n次都不会被上一次覆盖
3.
js的文档就绪函数没有简写方案。
jQuery的简写方案为:$(function(){
})。
js和jQuery对象的相互转换
在某些情况下，我们想对js对象使用jQuery的方法，或者对jQuery对象使用js方法，这时候就需要对着两种对象类型进行转换。
jQuery对象转化为js对象
话不多说，看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<button id="btn">button</button>
</body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
var jq=$("#btn");
var js=jq[0];
js.onclick=function(){
$("#div").css('background-color','green')
};
</script>
</html>
我们想要实现的效果是：点击按钮，div的背景颜色从红色变为绿色。
首先，我们第一步获取的是一个jQuery对象；
然后通过 var js=jq[0]; 使其成为了一个js对象；
这样就能给它加js的监听事件了，当点击按钮，div背景色从红变绿。
这是第一种方法，第二种方法是 var js=jq.get(0); 用这条代码替换 var js=jq[0];效果是一样的
js对象转化为jQuery对象
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js和jQuery对象的相互转换</title>
<style>
#div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<button id="btn">button</button>
</body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
var js = document.getElementById('btn');
var jsdiv = document.getElementById('div');
var jq = $(js);
jq.click(function(){
var jqdiv=jQuery(jsdiv);
jqdiv.css('background-color','green')
})
</script>
</html>
和上面的例子一样，点击按钮背景色由红变绿。
这次是用js的方法获取的两个对象；然后用 $(js对象) 或者 jQuery(js对象) 把他们转换为jQuery对象，用jQuery的方法实现这个功能。
注意：$就是jQuery的简写，这两个写法的功能是一样的。 $() 就是jQuery对象加工厂，使js对象转换为jQuery对象。
ps：当满足某一情景的时候 自动去调用一个函数 这个叫做回调函数
jQuery解决多库冲突（实际应用不多）
当引入多个js库的时候，因为不知jQuery用 $ 符号，可能 $ 符号会冲突，这时我们有三种方法能解决这个问题。
1.然后用jQuery代替$：
jQuery.noConflict();
2.重新声明一个写法：
var $j = jQuery.noConflict();
3.自调用一个匿名函数，给他一个形参 $ 和一个实参jQuery，然后在这个函数里面写jQuery操作，就可以继续正常使用 $ 符号了：
!function ($){
}(jQuery);
扫一扫
640
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
