Kimi no na wa
一、jQuery简介
jQuery 就是 JavaScript 的一个库，把我们常用的一些功能进行了封装，方便地处理HTML、事件、动画等，提高我们的开发效率。极大地简化了 JavaScript 编程。jQuery 设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。
- html:处理HTML文档中的DOM节点，如添加、删除等
- 事件：通过jQuery对页面上的事件进行处理（绑定或解绑事件）
- 动画：通过jQuery实现淡入、淡出、滑动等动画
1.jQuery下载与使用
①压缩和非压缩版本
在官网中，JQuery 有两种格式的脚本可供下载：压缩版（适合发布使用，因文件的大小非常小）、非压缩版（适合调试使用）
我们可以选择 Minified 版本 http://code.jquery.com/jquery-3.2.1.min.js， 也可以选择 Uncompressed 版本
②使用：放在body的最后，防止影响性能
<script src="jquery-3.1.0.js"></script>
③版本的选择：
• V1.x
• V2.x：不兼容IE6-8
• V3.x：分为精简版和普通版
④使用CDN
• Content Delivery Network 内容分发网络
• https://code.jquery.com/
使用CDN的好处：性能提高，加快下载速度
在页面中使用cdn：
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
2.设计哲学
• Write less，do more
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--使用jQ-->
<script>
var checkedValue;
var elements = document.getElementsByTagName('input');
for(var i=0;i<elements.length;i++){
if(elements[i].type === 'radio' && elements[i].name === 'test' && elements[i].checked){
checkedValue = elements[i].value;
break;
}
}
console.log(checkedValue);
</script>
<!--使用js-->
<script>
var checkedValue=$('input:radio[name="test"]:checked').val();
console.log(checkedValue);
</script>
<script src="js/jquery-3.2.1.js"></script>
</body>
结构、表现、行为分离：
结构表现和行为分离
混杂的
分离的
二、jQuery的使用
**1.为该全局变量的别名，其他的jQuery的函数、属性等都定义在该全局变量内。
window.jQuery === window.$
2.$.xxx
调用jQuery本身的属性和方法：
$.each(…)
$.noop
$.toArray()
…
3.$(xxx)
调用jQuery本身的选择，返回一个jQuery对象，xxx为一个查询表达式或者DOM元素等
$('#myDiv')
$('.myClass')
…
$(domObject) -> jQuery Object
$(xxx).get(0) -> DOM Object
$(xxx)[0] -> DOM Object
jQuery对象：
1.是原生DOM对象的封装
2.jQuery对象和原生的DOM对象不同（但可以相互转换）
3.jQuery对象包含了很多方法，方便的操作DOM元素
DOM和jQuery对象转换：任何DOM元素只要通过$()包裹住就变成了jQuery对象
4.链式语法chaining
$('#divTest').text('Hello, world!')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color', 'red')
--->
$('#divTest')
.text('Hello, world!')
.removeClass('blue')
.addClass('bold')
.css('color', 'red')
内部：每次调用都会返回一个jQuery对象，所以就可以直接再调用，而不用重复再声明一次对象。
注意一：有些jQuery方法有破坏性，如find() add children filter等方法
注意二：有写jQuery方法并不返回jQuery对象
<body>
<div id="divTest" class="blue">
test
</div>
<div id="divTest2">
<p>123</p>
<p class="child">123</p>
<p>123</p>
</div>
<script src="js/jquery-3.2.1.js"></script>
<script>
setTimeout(function(){
$('#divTest').text('Hello,world')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color','red')
$('#divTest')
.text('Hello,world')
.removeClass('blue')
.addClass('bold')
.css('color','red')
$('#divTest2')
.find('p.child') //有破坏性，把整个jQuery对象的范围缩小了
.css('color','red')
//.end() //可以通过end()方法还原：把元素的匹配恢复到上一次的状态
.addClass('bold')
$('#divTest2').get(0) //变成DOM对象之后，就不能用jQuery的链式方法了
.find('p.child')
.css('color','red')
//.end()
.addClass('bold')
},2000)
</script>
</body>
5.ready()
$(document).ready(function(){…})
一般在写jQuery的一些操作时，要保证页面的DOM已经加载完毕：
方法一：可以通过window.onload事件；
方法二：ready()方法；
针对有些页面，实际上DOM结构已经加载完毕了，但还在等待加载一些内容，比如一些图片网站，而window onload必须要等页面完全所有DOM的完成，也就是等待这些内容都加载完毕，图片下载完，iframe加载完才能加载window onload后面的处理。而ready方法只会检查DOM结构是否加载完，不会等待图片等其他东西，响应就会快很多。
<body>
<!--大图片-->
<img src="http://www.hcx.com/static/3.jpg" alt="" width="800"/>
<script src="js/jquery-3.2.1.js"></script>
<script>
//使用window.onload
window.onload = function(){
console.log('onload');
}
$(window).load(function(){
console.log('load');
});
//使用ready
$(document).ready(function(){
console.log('ready');
})
</script>
</body>
注意：两个方法最好不要同时使用，有些情况会导致ready失效
网友评论