jquery(上)

一.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-> $(this) document->$ (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提供了类似的方式选择元素。将选择器放到 $(‘选择器’)

<body>
    <div class="box">111111</div>
    <div class="box">222222</div>
    <div class="box">333333</div>
    <p id="p1">444444</p>
    <p id="p2">555555</p>
    <ul>
        <li>666666</li>
        <li>777777</li>
        <li>888888</li>
    </ul>
    <a href="#" title="123" target="_blank">a111111</a>
    <a href="#" title="456">a222222</a>
    <a>a333333</a>
    <ol>
        <li>999999</li>
        <li>000000</li>
    </ol>
</body>

 	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事件

<body>
    <div class="box">
        <ul>
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>

事件
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");

一些属性和方法

not(expr|ele|fn)删除与指定表达式匹配的元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)
length jQuery 对象中元素的个数。 size() jQuery 对象中元素的个数。
removeAttr(name) 从每一个匹配的元素中删除一个属性
attr(name|properties|key,value|fn)设置或返回被选元素的属性值。包括自定义的属性
prop(name|properties|key,value|fn)获取在匹配的元素集中的元素的属性值。不包括自定义属性。

哈哈小猿

发布了11 篇原创文章 · 获赞 8 · 访问量 244

私信关注