jQuery
关注
分享
扫一扫
Devin·Finn
✍择一事，终一生，不为繁华易匠心。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
封装Cookie.js+使用
Cookie 1. 添加 function addCookie(key, value, day, path, domain) { // 1.处理默认保存的路径 var index = window.location.pathname.lastIndexOf("/") var currentPath = window.location.pathname.slice(0, i...原创 2019-11-17 21:26:43 · 228 阅读 · 0 评论 -
12 - jQuery操作CSS，位置尺寸，scrollTop
操作CSS 逐个设置 $("div").css("width", "100px"); $("div").css("height", "100px"); $("div").css("background", "red"); 链式设置 注意点: 链式操作如果大于3步, 建议分开 $("div").css("width", "100px").css("height", "100px").css...原创 2019-09-07 21:20:58 · 183 阅读 · 0 评论 -
jQuery 从零学习（完结）
jQuery。。。从零开始。。读完多练习。。 （粉丝可见） 目录： 01 - jQuery的Hello World 02 - jQuery获取元素，属性，加载，入口函数 03 -jQuery入口函数写法 04 - jQuery冲突，核心函数，对象 05 - jQuery静态方法，实例方法 06 - 静态方法（each，map） 07 - 静态方法（trim，isWindow，isArray，isF...原创 2019-09-08 15:45:48 · 242 阅读 · 0 评论 -
21 - 节点操作集合（添加，删除，替换，复制）
添加 内部添加 会将元素添加到指定元素内部的最后$("ul").append($li); $li.appendTo("ul"); 会将元素添加到指定元素内部的最前面$("ul").prepend($li); $li.prependTo("ul"); 外部添加 会将元素添加到指定元素外部的后面$("ul").after($li); $li.insertAfter("ul"); ...原创 2019-09-08 15:20:47 · 251 阅读 · 0 评论 -
20 - 图标特效，无限滚动循环练习
图标特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>49-图标特效</title> <style> *{ margin: 0; p...原创 2019-09-08 14:49:08 · 352 阅读 · 0 评论 -
19 - jQuery的stop和delay方法
立即停止当前动画, 继续执行后续的动画 $("div").stop(); $("div").stop(false); $("div").stop(false, false); 立即停止当前和后续所有的动画 $("div").stop(true); $("div").stop(t...原创 2019-09-08 14:47:49 · 421 阅读 · 0 评论 -
18 - 对联广告，弹窗广告练习
对联广告 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-对联广告</title> <style> *{ margin: 0; p...原创 2019-09-08 14:24:43 · 252 阅读 · 0 评论 -
17 - 折叠菜单练习，下拉菜单练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>43-折叠菜单下</title> <style> *{ margin: 0; paddi...原创 2019-09-08 14:16:36 · 311 阅读 · 0 评论 -
16 - 动画合集（显示隐藏，展开收起，淡入淡出，自定义）
显示，隐藏 显示$("div").show(1000, function () {}); 隐藏$("div").hide(1000, function () {}); 切换$("div").toggle(1000, function () {}); 示例代码： <script> $(function () { // 编写jQuery相关代码...原创 2019-09-08 14:15:36 · 592 阅读 · 0 评论 -
15 - 命名空间，委托，移入移出
命名空间 事件是通过on来绑定的 通过trigger触发事件 $(".son").on("click.ls", function () { alert("click2"); }); $(".son").trigger("click.ls"); PS： 利用trigger触发子元素带命名空间的事件, 那么父...原创 2019-09-08 13:41:39 · 204 阅读 · 0 评论 -
14 - 冒泡，默认行为，自动触发，自定义事件
事件冒泡 什么是事件冒泡？ 触发子元素的时候，会触发父元素绑定的事件 如何阻止事件冒泡？ 在子元素绑定的事件中 添加return false; 在子元素绑定的事件中 添加event.stopPropagation(); 默认行为 什么是默认行为？ a标签点击事件默认会触发跳转到href中的链接地址去 如何组织默认行为？ 在子元素绑定的事件中 添加return false; 在子元素绑...原创 2019-09-07 22:04:17 · 350 阅读 · 0 评论 -
13 - 绑定，移除事件
绑定 eventName(fn); 编码效率略高/ 部分事件jQuery没有实现,所以不能添加 on(eventName, fn); 编码效率略低/ 所有js事件都可以添加 注意点: 可以添加多个相同或者不同类型的事件,不会覆盖 示例代码： <script> $("button").click(function () { alert("he...原创 2019-09-07 21:36:07 · 242 阅读 · 0 评论 -
01 - jQuery的Hello World
原生JS window.onload = function (ev) { } jQuery $(document).ready(function () { alert("Hello World"); });原创 2019-09-08 15:31:54 · 185 阅读 · 0 评论 -
11 - jQuery操作类，文本值 操作方法
操作类方法 addClass(class|fn) 作用: 添加一个类 如果要添加多个, 多个类名之间用空格隔开即可 removeClass([class|fn]) 作用: 删除一个类 如果想删除多个, 多个类名之间用空格隔开即可 toggleClass(class|fn[,sw]) 作用: 切换类 有就删除, 没有就添加 示例代码： var btns = document.g...原创 2019-09-07 21:06:03 · 205 阅读 · 0 评论 -
10 - jQuery的attr和prop
attr（） 作用：获取或者设置属性节点的值 传一个参数：获取这个属性节点的值 传两个参数：设置这个属性节点的值 PS： 获取： 无论找到多少个元素，都只返回第一个元素指定的属性节点的值。 设置： 找到多少个，设置多少个。没找到，就自动新增。 removeAttr（） 作用：删除属性节点 会删除所有找到元素指定的属性节点 删除多个属性节点，空格隔开 示例代码： $("span").attr("...原创 2019-09-07 20:52:31 · 162 阅读 · 0 评论 -
09 - 属性和属性节点
1. 属性？ 对象身上保存的变量就是属性 2. 操作属性 对象.属性名称 = 值; 对象.属性名称; 对象[“属性名称”] = 值; 对象[“属性名称”]; 3. 属性节点 <span name = "it666"></span> HTML标签中添加的属性就是属性节点。在浏览器中找到span这个DOM元素之后, 展开看到的都是属性，在attributes属性中保存的所...原创 2019-09-07 20:25:19 · 308 阅读 · 0 评论 -
08 - 内容选择器
:empty 作用:找到既没有文本内容也没有子元素的指定元素 :parent 作用: 找到有文本内容或有子元素的指定元素 :contains(text) 作用: 找到包含指定文本内容的指定元素 :has(selector) 作用: 找到包含指定子元素的指定元素 示例代码： <script> var $div = $("div:empty"); con...原创 2019-09-07 16:32:13 · 158 阅读 · 0 评论 -
07 - 静态方法（trim，isWindow，isArray，isFunction）
$.trim(); 作用: 去除字符串两端的空格 参数: 需要去除空格的字符串 返回值: 去除空格之后的字符串 $.isWindow(); 作用: 判断传入的对象是否是window对象 返回值: true/false $.isArray(); 作用: 判断传入的对象是否是真数组 返回值: true/false $.isFunction(); 作用: 判断传入的对象是否是一个函数 返回值: tru...原创 2019-09-07 16:25:46 · 232 阅读 · 0 评论 -
06 - 静态方法（each，map）
JS的原生forEach forEach（遍历到的元素，当前遍历到的索引） 只能遍历数组, 不能遍历伪数组 jQuery的each静态方法 each（当前遍历到的索引，遍历到的元素） 可以遍历伪数组 示例代码： <script> //数组 var arr = [1, 3, 5, 7, 9]; //伪数组 var obj = ...原创 2019-09-07 16:14:06 · 180 阅读 · 0 评论 -
05 - jQuery静态方法，实例方法
静态方法 直接添加给类 AClass.staticMethod = function () { alert("staticMethod"); } 静态方法通过类名调用 AClass.staticMethod(); 实例方法 给类添加一个实例方法 AClass.prototype.instanceMethod...原创 2019-09-07 16:09:19 · 226 阅读 · 0 评论 -
04 - jQuery冲突，核心函数，对象
问题 当引入一个js文件，文件中" $ “为关键字或变量的时候，js文件和jQuery的引用顺序决定了两个文件对” $ "的使用权。 解决 释放" $ "的使用权 注意点: 释放操作必须在编写其它jQuery代码之前编写 释放之后就不能再使用$,改为使用jQuery 自定义一个访问符号 var nj = jQuery.noConflict(); $(function () { ...原创 2019-09-07 15:56:15 · 196 阅读 · 0 评论 -
03 -jQuery入口函数写法
$(document).ready(function () {}); jQuery(document).ready(function () {}); $(function () {}); jQuery(function () {}); 推荐使用：$(function () {});原创 2019-09-07 15:50:01 · 198 阅读 · 0 评论 -
02 - jQuery获取元素，属性，加载，入口函数
获取元素 通过原生的JS入口函数可以拿到DOM元素var images = document.getElementsByTagName("images")[0]; 通过jQuery入口函数可以拿到DOM元素var $images = $("images"); 获取元素属性 通过原生的JS入口函数可以拿到DOM元素的宽高var width = window.getComputedStyle(i...原创 2019-09-08 15:32:31 · 195 阅读 · 0 评论