jquery-白红宇

jquery

阅读量：3923 次

发布时间：2019-05-23

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

一.jquery概述-类库。

1.jquery概述-类库。

jQuery是一个高效、精简并且功能丰富的JavaScript工具库。它提供的API易于使用且兼容众多浏览器，这让诸如HTML文档遍历和操作、事件处理、动画和Ajax操作更加简单。

write less do more : 写的少，干的多。

jquery权重：53k vue框架：153k react：145k

2.引用jquery的方式–推荐使用低版本的,低版本兼容ie6，7，8

直接下载jquery文件，引用

cdn引入(cdn:内容分发网络)-script的src直接引入–推荐的

https://cdn.bootcss.com/jquery/1.12.4/jquery.js 源码

https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js 压缩版

https://www.bootcdn.cn/

3.jQuery对象,别名 $ 符号。

jquery类型里面最大的对象 - jQuery

window.jQuery = window.$ = jQuery;

4.jquery类库下面的方法分类：两大类

实例方法：实例方法只能给jquery元素对象使用,原生js不能使用。

工具方法：工具方法原生js和jquery元素对象都可以使用。特点就是 $. 开头。

5.原生js对象和jquery对象的转换

原生js对象转换成jquery对象:直接$()将原生js对象包起来。

this-> $(t h i s) d o c u m e n t - >$ (document) windwo->$(window)

jquery对象转换成原生js对象:通过索引或jquery提供的get()

const box = document.querySelector('.box');        console.log(box.innerHTML);//原生js        console.log($('.box').html());//jquery        console.log($('.box').innerHTML);//undefined        console.log(box.html());//报错        console.log($('.box')[0].innerHTML);        console.log($('.box').get(0).innerHTML);        console.log($(box).html());

6.jquery链式操作原理

链式的写法：每一个方法都会在内部返回当前操作的jquery对象。(return this)

二 jquery元素选择

选择器：通过jquery提供的方法快速获取元素对象。

css如何选择元素添加样式，jquery提供了类似的方式选择元素。将选择器放到 $(‘选择器’)

111111

222222

333333

444444

555555

666666

777777

888888

a111111 a222222 a333333

999999

000000

console.log($("div"));//获取所有div盒子    console.log($('.box'));//获取所有class名为box的盒子    console.log(document.querySelectorAll(".box"));    console.log($(".box:first").html());//111   html()相当于原生js innerHTML

: eq(index)匹配一个给定索引值的元素，从0开始

console.log($(".box:eq(0)").html());//111111    console.log($(".box:eq(1)").html());//222222    console.log($(".box:eq(2)").html());//333333    console.log($("#p1").html());//444444    console.log($("#p2").html());//555555    console.log($("ul li"));//获取ul 下面的全部li元素

属性进行选择

console.log($("a[title=123]").html());//a111111    console.log($("a[target=_blank]").html());//a11111    console.log($("a[title=456]").html());//a222222    console.log($("a:eq(2)").html());//a333333

三 jquery事件

事件

on(events,[selector],[date],fn)

在选择元素上绑定一个或者多个事件的处理函数。添加多个，逗号分隔

event:一个或者多个用空格分隔的事件类型。click,mouseover,mouseout,mousedown,keydown,focus,blur;

selector:事件委托，要找的元素。

date:事件操作过程中传递数据。

fn()事件处理函数

$("ul li").on("click", function () {
           alert($(this).html());    });//给所有的li添加了点击事件,并且打印当前点击li元素的内容;    $("ul li").on("mouseover", function () {
           alert($(this).html());    })给所有的li添加了触摸事件,并且打印当前点击li元素的内容;

事件委托

$("ul").on("click", "li", function () {
           alert($(this).html());//$(this):被委托的元素    });

数据传递

$("ul").on("click", "li", {
    name: "zhangsan" }, function (e) {
           alert(e.data);//[object Object]        alert(e.data.name);//zhangsan    });

移除事件

$("ul li").off();

一次性事件

$("ul li:eq(0)").one("click", function () {
           alert("哈哈");//点击第一个li 打印哈哈 只能执行一次    });

hover=mouseover+mouseout

$(".box").hover(function () {
           $(this).css("background", "pink");//设置css样式    }, function () {
           $(this).css("background", "skyblue");    })

trigger:主动触发。封装插件里面的自定义事件

$(".box").on("click", function () {
           alert("哈哈哈")    });    $(".box").trigger("click"); $(".box ul li:eq(0)").on("click", function () {
           alert("我是第一个li")    }).trigger("click");

一些属性和方法