jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

红鼻子格鲁58

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量482

点赞数

分类专栏： JavaScript 前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46790595/article/details/121621643

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

JQuery 笔记

常见 js 库

jQuery
Prototype
YUI
Dojo
Ext JS
移动端 zepto

入口

// 入口函数 相当于 DOMContentLoaded
$(document).ready(function() {
    $('div').hide();
})
// 常用入口函数
$(function() {
    $('div').hide();
})

jQuery 的顶级对象 $

jQuery 的别称、相当于 js 中的 window、把元素利用 $ 包装成 jQuery 对象，就可以调用jQuery的方法。

jQuery 对象与 DOM 对象

jQuery 方法获取的元素是 jQuery 对象，其本质是利用 $ 对 DOM 对象包装后产生的对象（伪数组形式存储）。

jQuery 对象与 DOM 对象相互转换

// jquery 对象转成 js 原生对象
$('video')[0].play();
// 第二种方式
$('video').get(0).play();

// js 转换为 jQuery 对象
var video = document.querySelector('video');
$(video).hide();

jQuery 选择器

$(“选择器”) 记得加引号

并集选择器 $(“div, p, li”)
交集选择器 $(“li.current”) 大范围里的小范围（一般不用）

$(“ul>li”) 子代选择器
$(“ul li”) 后代选择器

大致和css一致

隐式迭代

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
// 隐式迭代，内部进行了for循环
$("div").css("background", "skyblue");

jquery 筛选选择器

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

jQuery 筛选方法

语法	用法	说明
parent()	$(“li”).parent()	查找父级
children(selector)	$(“ul”).children(“li”)	最近一级，亲儿子
find(selector)	$(“ul”).find(“li”)	后代选择，子孙都有
siblings(selector)	$(".first").siblings(“li”)	查找自己的兄弟
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevAll(class)	$(".last").prevAll()	当前元素之前所有的同辈元素
hasClass(class)	$(“div”).hasClass(“pretected”)	检查当前的元素是否含有某个特定的类，有则返回true
eq(index)	$(“li”).eq(2)	根据索引查找

this 对象

$('.nav').children("li").mouseover(function() {
    // jquery 中的 this
    $(this).children('ul').show();
})
// 查看某元素是否具有某类名
console.log($('ul li:eq(0)').hasClass('current'));

链式编程

// 链式编程
$(this).css('background', 'yellow').siblings().css('background', '');

jQuery 修改样式

// 只填写一个值获取属性
console.log($('div').css('color'));
// 填写两个值 属性值要加引号 如果为数字可以不加
$('div').css('width', 200);
// 修改多个属性 注意驼峰命名 与 引号
$('div').css({
    width: 300,
    height: 300,
    backgroundColor: "blue"
})

// 添加类名
$('div').click(function() {
    // 不带点 直接写类名 在原有基础上追加
    $(this).addClass('red');
})

$('div').click(function() {
    // 删除类名 删除指定的类
    $(this).removeClass('red');
    // 删除全部类名
    $('div').removeClass();
})

// 切换类名
$('div').click(function() {
    $(this).toggleClass('red');
})

jQuery 效果

显示效果

语法 show( [speed], [easing], [fn])
1. 参数可以全部省略、无动画显示。
2. speed 三种预定速度(“slow”, “normal”, “fast”) 或表示动画时长的毫秒值。
3. easing 用来指定切换效果，默认是“swing”，可用参数“linear”
4. fn 回调函数

隐藏效果 hide( [speed], [easing], [fn]) 跟上文一致

切换效果

// show 与 hide 来回切换
$('div').toggle();

滑动效果参数跟上面一样

$(this).children('ul').slideDown(300);

事件切换 hover([over,] out) mouseenter 与 mouseleave 的简写只写一个参数的时候两个事件都会触发函数

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

stop 方法停止动画

$(this).children('ul').stop().slideDown(200);

jQuery 获取属性

// 只能获取固有属性
let title = $('a').prop('title');
// 修改固有属性
$('a').prop('title', 123);
// 添加自定义属性
$('a').attr('index', 1);
// 获取自定义属性
console.log($('a').attr('index'));

数据缓存 data() dom上不可见，一旦页面刷新将被移除

$('a').data('index', 1);
console.log($('a').data('index'));

jQuery获取文本内容

// 获取与修改 html
console.log($('div').html());
$('div').html('123');
// 文本值
console.log($('div').text());
// value
$('input').val('你好');

jQuery 元素操作

$(‘elements’).each();

var color = ['pink', 'yellow', 'blue']
$(function() {
    $('div').each(function(index, domEle) {
        $(domEle).css('backgroundColor', color[index])
    })
})

$.each()

$.each({
    name: 'zhangsan',
    age: 18
}, function(index, ele) {
    console.log(index);  // name age
    console.log(ele);    // zhangsan 18
})

// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素

// (1) 内部添加
// $("ul").append(li);  内部添加并且放到内容的最后面 
$("ul").prepend(li); // 内部添加并且放到内容的最前面

// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

jQuery 尺寸、位置方法

// 1. width() / height() 获取设置元素 width和height大小 
console.log($("div").width());
// $("div").width(300);

// 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
console.log($("div").innerWidth());

// 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
console.log($("div").outerWidth());

// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));

// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
//     top: 200,
//     left: 200
// });
// 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
//     top: 200,
//     left: 200
// });

// 获取
$(document).scrollTop();
// 设置被卷去的头部 
$(document).scrollTop(100);
// 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()

JQuery 事件

事件注册

//1. 单个事件注册
$("div").click(function() {
    $(this).css("background", "purple");
});
$("div").mouseenter(function() {
    $(this).css("background", "skyblue");
});

//2. 事件处理on
//(1) on可以绑定1个或者多个事件处理程序
$("div").on({
    mouseenter: function() {
        $(this).css("background", "skyblue");
    },
    click: function() {
        $(this).css("background", "purple");
    },
    mouseleave: function() {
        $(this).css("background", "blue");
    }
});


$("div").on("mouseenter mouseleave", function() {
    $(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// $("ul li").click();
$("ul").on("click", "li", function() {
    alert(11);
});
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
//     alert(11);
// })
$("ol").on("click", "li", function() {
    alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);

事件处理

事件解绑

$(function() {
    $("div").on({
        click: function() {
            console.log("我点击了");
        },
        mouseover: function() {
            console.log('我鼠标经过了');
        }
    });
    $("ul").on("click", "li", function() {
        alert(11);
    });
    // 1. 事件解绑 off 
    // $("div").off();  // 这个是解除了div身上的所有事件
    $("div").off("click"); // 这个是解除了div身上的点击事件
    $("ul").off("click", "li");
    // 2. one() 但是它只能触发事件一次
    $("p").one("click", function() {
        alert(11);
    })
})

事件自动触发

$("div").on("click", function() {
    alert(11);
});

// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus", function() {
    $(this).val("你好吗");
});
// $("input").triggerHandler("focus");

事件对象

$(function() {
    $("div").on("click", function(event) {
        // console.log(event);
        console.log("点击了div");
        event.stopPropagation();
    })
})
// 阻止默认行为 event.preventDefault() 或者 return false
// 阻止冒泡  event.stopPropagation()

其他方法

拷贝对象

// 浅拷贝，原先有的（jj）也会存在，相同的会被覆盖，里面的对象拷贝，传递的是地址
var o = {
    jj: 13,
    s: {
        age: 12
    }
}
var j = {
    ad: 15,
    s: {
        age: 14
    }
}
$.extend(o, j);
o.s.age = 19; 
console.log(o); // jj:13,s{age:19},ad:15
console.log(j); // s{age:19},ad:15

// 深拷贝，原先有的（jj）也会存在，相同的会被覆盖，里面的对象创建一个全新的
var o = {
    jj: 13,
    s: {
        age: 12
    }
}
var j = {
    ad: 15,
    s: {
        age: 14
    }
}
$.extend(true, o, j);
o.s.age = 19; 
console.log(o); // jj:13,s{age:19},ad:15
console.log(j); // s{age:14},ad:15

多库共存

解决$冲突问题

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

瀑布流
图片懒加载（图片使用延迟加载可提高网页下载速度，也能减轻服务器负载）
全屏滚动 fullpage

红鼻子格鲁58

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

JQuery 笔记常见 js 库jQueryPrototypeYUIDojoExt JS移动端 zepto入口// 入口函数相当于 DOMContentLoaded$(document).ready(function() { $('div').hide();})// 常用入口函数$(function() { $('div').hide();})jQuery 的顶级对象 $jQuery 的别称、相当于 js 中的 window、把元素利用 $ 包装成
复制链接

扫一扫