jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

A PIG

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量219

点赞数

文章标签： js javascript css jquery

本文链接：https://blog.csdn.net/weixin_44426216/article/details/108953188

版权

jQuery

jQuery day one

概念

jQuery是javascript实现的一个库。设计宗旨是”Write Less，Do More”,即写的少，做的多

优点

跨浏览器兼容
链式编程，隐式迭代
简化DOM操作，支持事件、样式、动画
支持插件扩展开发
开源免费

入口函数

第一种：

	$(function () {   
	    ...  // 此处是页面 DOM 加载完成的入口
	 }) ;

第二种：

	$(document).ready(function(){
	   ...  //  此处是页面DOM加载完成的入口
	});

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装；
相当于原生 js 中的 DOMContentLoaded；
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码；
推荐使用第一种方式；

jQuery顶级对象

jQuery:$;

jQuery对象

原生js获取的对象为DOM对象；
jQuery获取的对象为jQuery对象；

	$('div');//对DOM对象包装后产生的对象（伪数组存储的）

jQuery对象、DOM对象转换

DOM对象转换jQuery对象；

	$('div');

jQuery对象转换DOM对象；

//方法1
$('div')[index]; //index是索引号
//方法2
$('div').get(index);  //index是索引号

jQuery基本选择器

名称	用法	描述
ID选择器	$(’#id’)	获取指定ID的元素
全选选择器	$(’*’)	匹配所有元素
类选择器	$(’.class’)	获取同一类class的元素
标签选择器	$(‘div’)	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’)	选取多个元素
交集选择器	$(‘li.current’)	交集元素

jQuery层级选择器

名称	用法	描述
子代选择器	$(‘ul>li’)	使用>号，获取亲儿子层级的元素，注意：不会获取孙子层级的元素
后代选择器	$(‘ul li’)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

jQuery设置样式

	$('div').css('属性',‘值’)

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代；
给匹配到的所有元素进行循环遍历，执行相应的方法；

筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(‘li:odd’)	选择索引号为奇数的元素
:even	$(‘li:even’)	选择索引号为偶数的元素

jQuery筛选选择器

语法	用法	描述
parent()	$(‘li’).parent()	查找父级
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul>li’)，最近一级（亲儿子）
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)，后代选择器
siblings(selector)	$(’.first’).siblings(‘li’)	查找兄弟节点，不包括自身
nextAll([expr])	$(’.first’).nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(’.last’).prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(‘protected’)	检查当前元素是否含有某个特定的类，如果有，返回true
eq(index)	$(‘li’).eq(2)	相当于$(‘li:eq(2)’),index从0开始

排他思想

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "pink");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        });
    </script>
</body>

链式编程

原理：实现链式编程的核心，是对象中的每一个方法都会返回当前对象

	$("#content div").eq(index).show().siblings().hide();

css方法

参数只写属性名，返回属性值；

	console.log($('div').css('width'));

参数是属性名，属性值，逗号分隔，加引号，数字不用跟单位和引号；

	$('div').css('backgroundColor','red');
    $('div').css('width','200px');
    $('div').css('height',200);

参数可以是对象形式；

	$('div').css({
            width:400,
            height:400,
    });

设置类样式操作

语法	描述
$(‘div’).addClass(‘current’)	添加类
$(‘div’).removeClass(‘current’)	删除类
$(‘div’).toggleClass(‘current’)	切换类

添加不会覆盖原有的类；

tab代码

	<script>
        $(function() {
            // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $(".tab_list li").click(function() {
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时，得到当前li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        });
    </script>

show()

show([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

hide()

hide([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

toggle()

toggle([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

slideDown()

slideDown([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

slideUp()

slideUp([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

slideToggle()

slideToggle([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

hover(fn(),fn())

	$('.nav>li').hover(function(){
	     $(this).children('ul').stop().slideDown();
	     },function(){
	         $(this).children('ul').stop().slideUp();
    });

stop()

stop()方法用于停止动画或效果；
写到动画前面，相当于停止结束上一次动画；

fadeIn()

fadeIn([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

fadeOut()

fadeOut([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

fadeToggle()

fadeToggle([speed],[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

fadeTo()

fadeToggle([speed],opacity,[easing],[fn])；
参数可省略；
speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

animate()

animate(params,[speed],[easing],[fn])；
params：想要更改的属性，以对象形式传递，必须写，属性名可以不带引号，复合用驼峰命名；

	$(function() {
        $("button").click(function() {
            $("div").animate({
                left: 500,
                top: 300,
                opacity: .4,
                width: 500
            }, 500);
        });
    });

speed：三种预定速度（slow、normal、fast）或表示动画时长的毫秒数值（如：1000）；
easing：用来切换效果，默认swing，可用参数linear；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次；

jQuery day two

prop()

设置或获取元素固有属性值；
prop(‘属性’)：获取属性值；
prop(‘属性’,‘属性值’)：设置属性值；

attr()

设置或获取元素自定义属性值；
attr(‘属性’)：获取自定义属性值，类似getAttribute()；
attr(‘属性’,‘属性值’)：设置自定义属性值setAttribute()；

数据缓存

data()可以在指定元素上存储数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除；
这个方法获取data-index h5自定义属性第一个不用写data- 而且返回的是数字型；
data(‘属性’)：获取属性值；
data(‘属性’,‘属性值’)：设置属性值；

内容文本值

html()	text()	val()
获取设置元素内容	获取设置元素文本内容	获取设置表单值

parents()

祖先元素；

元素操作

语法	描述
$(‘div’).each(function(index,domEle){xxx;})	each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个，回调函数里两个参数，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象
$.each(object,function(index,element){xxx;}	$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组、对象，index是每个元素的索引号，element遍历内容
$(’ ’)	动态创建元素
element.append(‘内容’)	内部添加，把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend(‘内容’)	内部添加，把内容放入匹配元素内部最前面
element.before(‘内容’)	外部添加，把内容放入匹配元素内部最前面
element.after(‘内容’)	外部添加，把内容放入匹配元素内部最后面
element.remove()	删除匹配的元素自身
element.empty()	清空匹配的元素，删除子节点
element.html(’’)	清空匹配的元素，删除子节点

内部添加元素，生成之后，是父子关系；
外部添加元素，生成之后，是兄弟关系；

jQuery day three

事件绑定

单个事件绑定；

	//单个事件注册
    $('div').click(function(){
        $(this).css('backgroundColor','purple');
    });

    $('div').mouseenter(function(){
        $(this).css('backgroundColor','skyblue');
    })

事件处理on；
可绑定多个事件；

	$('div').on({
     mouseenter:function(){
            $(this).css('backgroundColor','skyblue');
        },
        click:function(){
            $(this).css('backgroundColor','purple');
        },
        mouseleave:function(){
            $(this).css('backgroundColor','pink');
        }
    });
    //如果事件程序相同
    $('div').on('mouseenter mouseleave',function(){
        $(this).toggleClass('current');
    });

可事件委托操作；

<body>
    <ul>
        <li>lubenweiniubi</li>
        <li>lubenweiniubi</li>
        <li>lubenweiniubi</li>
        <li>lubenweiniubi</li>
        <li>lubenweiniubi</li>
    </ul>
    <script src="./jquery-3.5.1.min.js"></script>
    <script>
        $('ul').on('click','li',function(){
            alert('卢本伟牛逼');
        });
    </script>
</body>

on可对未来创建的元素绑定事件；

	$('ol').on('click','li',function(){
    	alert(11);
    });
    var li = $('<li>未来创建的li</li>');
    $('ol').append(li);

事件解除

语法	描述
$(“div”).off()	解除了div身上的所有事件
$(“div”).off(“click”)	解除了div身上的点击事件
$(“ul”).off(“click”, “li”)	解绑事件委托

one()；
事件绑定，只触发一次，用法同on()；

自动触发事件

语法	描述
element.click()	元素.事件()，会触发元素的默认行为
element.trigger(‘事件’)	会触发元素的默认行为
element.triggerHandler(‘事件’)	不会触发元素的默认行为

事件对象

阻止默认行为：event.preventDefault()或者return false；
阻止冒泡：event.preventDefault()；

对象拷贝

$.extend([deep],target,object1,[objectN])；
deep：如果设为true为深拷贝，默认为false，浅拷贝；
target：要拷贝的目标对象；
object1：待拷贝到第一个对象的对象；
objectN：待拷贝到第N个对象的对象；

浅拷贝

把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象；
拷贝对象会覆盖原来的数据；

深拷贝

前面加true，完全克隆（拷贝的对象，不是地址），修改目标对象不会影响被拷贝对象；
如果里面有不冲突的属性，拷贝对象原有数据会和被拷贝对象数据合并；

多库共存

使用jQuery.方法；
$. n o C o n f l i c t () : 释放对$ 控制权，自己决定；

        $(function() {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 让jquery 释放对$ 控制权 让用自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        });

jQuery尺寸

在这里插入图片描述

jQuery位置

在这里插入图片描述

A PIG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

jQuery概念jQuery是javascript实现的一个库。设计宗旨是”Write Less，Do More”,即写的少，做的多优点跨浏览器兼容链式编程，隐式迭代简化DOM操作，支持事件、样式、动画支持插件扩展开发开源免费入口函数第一种： $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; 第二种： $(document).ready(function(){ ... //
复制链接

扫一扫