使用javascript的一些疼处
书写繁琐，代码量大
代码复杂
动画效果，很难实现。使用定时器 各种操作和处理
----------------------------------------
HTML
<button >按钮</button>
<div></div>
<div></div>
<div></div>
CSS
<style type="text/css">
div{
width: 100%;
height: 100px;
background-color: pink;
margin-top: 30px;
display: none;
}
</style>
javascript
window.onload = function(){
document.getElementById('btn').onclick = function(){
var divs = document.getElementsByTagName('div');
for(var i = 0;i<divs.length;i++){
divs[i].style.display = 'block';
divs[i].innerHTML = '我出来了！！'
}
}
}
--------------------------------------------------------------------------------------------
//如果使用jQuery操作上面的案例，很简单，三句代码搞定
$('#btn').click(function(){
$('div').css('display','block');
$('div').html('我出来了')
})JavaScript和jquery的区别
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
------------------------------------------------------------------------
DOM文档加载的步骤
- 解析HTML结构。
- 加载外部脚本和样式表文件。
- 解析并执行脚本代码。
- DOM树构建完成。
- 加载图片等外部文件。
- 页面加载完毕。
------------------------------
执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
-----------------------------
编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
----------------------------
简化写法不同
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------
jquery文件的引入
1 <!--引用包--> <script type="text/javascript" src="jquery-3.3.1.js"></script>
2<!--jquery是全局的一个函数 当调用$() 内部 会帮咱们new jQuery() 创建出对象之后 对象：属性和方法-->
----------------------------------------
jQuery特点、入口函数、js对象和jquery对象的区别
#### jQuery的两大特点 - 链式编程：比如`.show()`和`.html()`可以连写成`.show().html()`。 - 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。 #### 入口函数和window.onload()对比 原生 js 的入口函数指的是：`window.onload = function() {};` 如下： ```javascript //原生 js 的入口函数。页面上所有内容加载完毕，才执行。 //不仅要等文本加载完毕，而且要等图片也要加载完毕，才执行函数。 window.onload = function () { alert(1); } ``` 而 jQuery的入口函数，有以下几种写法： ```javascript 写法一： //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(document).ready(function () { alert(1); }) 写法二：（写法一的简洁版） //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。 $(function () { alert(1); }); 写法三： //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。 $(window).ready(function () { alert(1); }) ``` #### **jQuery入口函数与js入口函数的区别**： 区别一：书写个数不同： - Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。 - jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。 区别二：执行时机不同： - Js的入口函数是在**所有的文件资源加载**完成后，才执行。这些**文件资源**包括：页面文档、外部的js文件、外部的css文件、图片等。
- jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的**外部资源**都加载完成。 **文档加载的顺序：从上往下，边解析边执行。**
------------------------------------------------------
#### js中的DOM对象 和 jQuery对象 比较（重点，难点）
##### 二者的区别
通过 jQuery 获取的元素是一个**伪数组**，数组中包含着原生JS中的DOM对象。举例：
针对下面这样一个div结构：
通过原生 js 获取这些元素节点的方式是：
```
var myBox = document.getElementById("app"); //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
```
通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）
```
//获取的是伪数组，里面包含着原生 JS 中的DOM对象。
```
```javascript
console.log($('#app'));
console.log($('.box'));
console.log($('div'));
```
-----------------------------------------------
js对象和jquery对象的区别
// jquery入口函数
$(function () {
// 获取jquery对象
console.log($('#box2'));
// 获取js对象
var oDiv2=document.getElementById('box2')
console.log(oDiv2);
// jquery===>js对象
//
console.log($('#box2')[0]);
console.log($('#box2').get(0));
// js===>jquery
console.log($(oDiv2))
// 如果是js对象 更加希望转换成jquery才操作简便的dom
// 因为js是包含jquery，jquery只是封装 DOM 事件 ajax 动画， 就要将jquery对象转化成js对象
// 总结： 如果是jquery对象一定要调用jquery的属性和方法
// 如果是js对象一定要调用的是js的属性和方法
// 千万不要将 这两个对象混淆
// 在jquery 大部分的都是api（方法） length 和索引 是它 的属性
})
jQuery如何操作DOM
DOM对象转换成jquery对象 var box = document.getElementById('box'); console.log($(box)); -------------------------------------------------- jquery对象转化成DOM对象 第一种方式： $('button')[0] 第二种方式： $('button').get(0)
--------------------------------------------------
// 事件三步走： 事件源 事件 事件驱动程序
$(function () {
// 获取时间源
// jquery的标签选择器
console.log($('div'))
//js对象
//$('div')[0].onclick
// jquery内部自己遍历
$('div').click(function () {
// this 指的是js对象
console.log(this.innerHTML);
// 表达方法和上面相同
console.log($(this).text());
});
// 2.类选择器
console.log($('.box'))
// 3.id选择器
console.log($('#box'))
});
jquery获取DOM的方式--选择器
我们以前在CSS中学习的选择器有：
----------------------------------------------------------
jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。
jquery的基本选择器
-----------------------------------------------------------------------------------------------------------------------------------------
层级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jq层级选择器</title> </head> <body> <ul class="lists"> <li class="item">女友<ol>alex</ol></li> <li>alex2</li> <li>alex3</li> <li>alex4</li> <li>alex5</li> </ul> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> // 入口函数 $(function () { // 后代选择器 $('.lists li').css('color','red'); //子代选择器--亲儿子 // 设置多个css用字典的形式表达 $('.lists li>ol').css({'color':'green','font-weight':'bold'}); // + 紧邻 只选中挨着最近的兄弟 $('.item+li').css({'color':'yellow','font-weight':'bold'}); // ~ 兄弟选择器 $('.item~li').css('color','purple'); }); </script> </body> </html>