前端之jquery

阅读量：5930 次

发布时间：2019-06-19

本文共 6489 字，大约阅读时间需要 21 分钟。

一、JavaScript和jquery的区别

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。

jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

DOM文档加载的步骤

解析HTML结构。

加载外部脚本和样式表文件。

解析并执行脚本代码。

DOM树构建完成。

加载图片等外部文件。

页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

二、jquery文件的引入

三、jquery的入口函数

// jquery对象console.log($(document));// jquery的文档对象console.log($(document)[0]);// 1.jquery入口函数，等待文档资源加载完之后调用此方法$(document).ready(function () {    alert(1);});// 2.jquery入口函数简易版$(function () {    alert(2);});// 图片资源加载完成之后调用$(window).ready(function () {    alert(3);})// 上面三个方法谁也不覆盖谁，解决了之前windows.onload()的覆盖现象。

四、JQuery对象和JS对象的互相转换

$(function () {       // 获取jquery对象        console.log($('#box2'));        // 获取js对象        let oDiv2 =  document.getElementById('box2');        console.log(oDiv2);        // jquery -> js对象        console.log($('#box2')[0]);        console.log($('#box2').get(0));    // 两种方式一样        // js对象 -> jquery对象 $(js对象)        console.log($(oDiv2));    });

五、jQuery如何操作DOM

六、选择器

1. 层级选择器

2. 基本过滤选择器

3. 属性选择器

4. 筛选选择器（重要）

4.siblings选择器方法的基本使用

查找所有兄弟元素（不包括自己）

选项卡

选项卡完整版

alex1

alex2

alex3

alex4

alex1

alex2

alex3

alex4

七、jqueryd动画

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

显示动画

方式一：

$("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

$('div').show(3000);

解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

$("div").show("slow");

参数可以是：

slow 慢：600ms

normal 正常：400ms

fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

//show(毫秒值，回调函数;    $("div").show(5000,function () {        alert("动画执行完毕！");    });

解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

1. 基本动画

2. 卷帘门动画效果

3. 淡入淡出

4. 自定义动画

5. 二级菜单动画的使用

八、jquery的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

1. JQuery的标签属性操作

2. jQuery对DOM对象属性操作

    
          男 女

3. JQuery对类样式的操作

4. JQuery对值的操作

wusir

女盆友

alex

5. 插入操作

父子之间插入操作

插到最后一个元素上

父元素.append(子元素) 追加某元素父元素中添加新的元素

子元素.appendTo(父元素) 追加到某元素子元素添加到父元素

插到第一个元素上

prepend（）前置添加，添加到父元素的第一个位置

prependTo 后置添加，第一个元素添加到父元素中

兄弟之间插入操作

父.after(子) 在匹配的元素之后插入内容与子.insertAfter(父)

父.before(子) 在匹配的元素之前插入内容与子.insertBefor(父)

6. 替换操作

一、replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素。

//将所有的h5标题替换为a标签$('h5').replaceWith('hello world')//将所有h5标题标签替换成id为app的dom元素$('h5').replaceWith($('#app'));

二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

    
         
         
      alexsb
    
      alexsb
    
      wusirddb

7. 删除和清空操作

一、remove() 删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

二、detach() 删除节点后，事件会保留

var $btn = $('button').detach() //此时按钮能追加到ul中 $('ul').append($btn)

三、empty(): 清空元素中的所有后代节点

//清空掉ul中的子元素，保留ul$('ul').empty()

8. 操作input的value值

九、jquery的位置信息

十、jquery的事件

1. 事件的概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念

2. 什么是事件流

事件流描述的是从页面中接收事件的顺序

1、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

3. 事件冒泡的处理

4. 评论收起操作的实现

5. 事件对象

6. 单双击事件

7. 鼠标移入和移出事件

购物车案例

8. 表单事件

9. 聚焦、失焦、键盘事件

10. 事件委托

十一、ajex

什么是动态页面：数据驱动视图（面试必考）

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1. get请求

$.ajax({url:'http://localhost:8800/course',type:'get',dataType:'json',success:function(data){console.log(data);// // $('body').html(data);// $('.box').text(data.name);},error:function(err){console.log(err);}});