jQuery是什么
jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”。
jQuery的$
使用过jQuery的应该都知道jQuery的$,看到源码中的这一段就能知道相当于jquery的简写,
jquery有两种用法,一种是用$表示,还有一种是jQuery
// Map over jQuery in case of overwrite
var _jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$;
jQuery.noConflict = function(deep) {
if (window.$ === jQuery) {
window.$ = _$;
}
if (deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
}
return jQuery;
};
jQuery的$()函数
主要的用法有下面几种
1. 作为选择器 jQuery(selector,context)
在函数中接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。默认情况下,查找时从根元素上开始找,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找,也可以直接写在css选择器表达式(selector)后,如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 80px;
margin-top: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div1 sos"></div>
<div class="div2"></div>
<div class="div1"></div>
<div class="div2"></div>
<script src="/jquery.js"></script>
<script>
// 入口函数
$(document).ready(function() {
console.log($('.div1'));
console.log($('.div1.sos'));
console.log($('.div1', '.sos'));
})
</script>
</body>
</html>
打印结果,第二个和第三个选择了一样,但是要注意的是返回的是伪数组,自己可以使用($(‘.div1’, ‘.sos’) instanceof Array)打印看下
2.创建dom元素
后面一起放图
$('<div>我是傻瓜</div>').appendTo('body')
3.入口函数
当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行
// jquery入口函数
$(document).ready(function() {
console.log('入口2');
})
$(function() {
console.log('入口1');
})
// 原生的入口函数
window.onload = function() {
console.log('原生的入口函数');
}
两者之间的区别随便百度下就有,这里不在多说
4.将dom对象转换为Jquery对象
下面介绍了两者相互转换的方法
<div class="contain">
</div>
<script src="./jquery.js"></script>
<script>
var contain = document.querySelector('.contain');
console.log(contain);
//将dom对象变为jq对象
console.log($(contain));
//将jq对象转为dom对象
console.log($(contain)[0], $(contain).get(0));
</script>
两者的区别
$可以调用那些不需要操作对象的方法,如$.prototype,如果是给某个对象赋值(注意,这里有操作对象),就需要用$('#abc').val('123')的方式,因为像val()等方法中会用到$(this)去操作当前对象。