jQuery
Devin·Finn
✍择一事,终一生,不为繁华易匠心。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
封装Cookie.js+使用
Cookie1. 添加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 · 206 阅读 · 0 评论 -
14 - 冒泡,默认行为,自动触发,自定义事件
事件冒泡什么是事件冒泡?触发子元素的时候,会触发父元素绑定的事件如何阻止事件冒泡?在子元素绑定的事件中 添加return false;在子元素绑定的事件中 添加event.stopPropagation();默认行为什么是默认行为?a标签点击事件默认会触发跳转到href中的链接地址去如何组织默认行为?在子元素绑定的事件中 添加return false;在子元素绑...原创 2019-09-07 22:04:17 · 328 阅读 · 0 评论 -
15 - 命名空间,委托,移入移出
命名空间事件是通过on来绑定的通过trigger触发事件 $(".son").on("click.ls", function () { alert("click2"); }); $(".son").trigger("click.ls");PS:利用trigger触发子元素带命名空间的事件, 那么父...原创 2019-09-08 13:41:39 · 187 阅读 · 0 评论 -
16 - 动画合集(显示隐藏,展开收起,淡入淡出,自定义)
显示,隐藏显示$("div").show(1000, function () {});隐藏$("div").hide(1000, function () {});切换$("div").toggle(1000, function () {});示例代码: <script> $(function () { // 编写jQuery相关代码...原创 2019-09-08 14:15:36 · 574 阅读 · 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 · 300 阅读 · 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 · 228 阅读 · 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 · 382 阅读 · 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 · 333 阅读 · 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 · 227 阅读 · 0 评论 -
jQuery 从零学习(完结)
jQuery。。。从零开始。。读完多练习。。(粉丝可见)目录:01 - jQuery的Hello World02 - jQuery获取元素,属性,加载,入口函数03 -jQuery入口函数写法04 - jQuery冲突,核心函数,对象05 - jQuery静态方法,实例方法06 - 静态方法(each,map)07 - 静态方法(trim,isWindow,isArray,isF...原创 2019-09-08 15:45:48 · 219 阅读 · 0 评论 -
13 - 绑定,移除事件
绑定eventName(fn);编码效率略高/ 部分事件jQuery没有实现,所以不能添加on(eventName, fn);编码效率略低/ 所有js事件都可以添加注意点:可以添加多个相同或者不同类型的事件,不会覆盖示例代码: <script> $("button").click(function () { alert("he...原创 2019-09-07 21:36:07 · 226 阅读 · 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 · 166 阅读 · 0 评论 -
11 - jQuery操作类,文本值 操作方法
操作类方法addClass(class|fn)作用: 添加一个类如果要添加多个, 多个类名之间用空格隔开即可removeClass([class|fn])作用: 删除一个类如果想删除多个, 多个类名之间用空格隔开即可toggleClass(class|fn[,sw])作用: 切换类有就删除, 没有就添加示例代码: var btns = document.g...原创 2019-09-07 21:06:03 · 187 阅读 · 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 · 183 阅读 · 0 评论 -
03 -jQuery入口函数写法
$(document).ready(function () {});jQuery(document).ready(function () {});$(function () {});jQuery(function () {});推荐使用:$(function () {});原创 2019-09-07 15:50:01 · 188 阅读 · 0 评论 -
04 - jQuery冲突,核心函数,对象
问题当引入一个js文件,文件中" $ “为关键字或变量的时候,js文件和jQuery的引用顺序决定了两个文件对” $ "的使用权。解决释放" $ "的使用权注意点: 释放操作必须在编写其它jQuery代码之前编写释放之后就不能再使用$,改为使用jQuery自定义一个访问符号var nj = jQuery.noConflict(); $(function () { ...原创 2019-09-07 15:56:15 · 186 阅读 · 0 评论 -
05 - jQuery静态方法,实例方法
静态方法直接添加给类 AClass.staticMethod = function () { alert("staticMethod"); }静态方法通过类名调用 AClass.staticMethod();实例方法给类添加一个实例方法 AClass.prototype.instanceMethod...原创 2019-09-07 16:09:19 · 213 阅读 · 0 评论 -
06 - 静态方法(each,map)
JS的原生forEachforEach(遍历到的元素,当前遍历到的索引)只能遍历数组, 不能遍历伪数组jQuery的each静态方法each(当前遍历到的索引,遍历到的元素)可以遍历伪数组示例代码: <script> //数组 var arr = [1, 3, 5, 7, 9]; //伪数组 var obj = ...原创 2019-09-07 16:14:06 · 161 阅读 · 0 评论 -
07 - 静态方法(trim,isWindow,isArray,isFunction)
$.trim();作用: 去除字符串两端的空格参数: 需要去除空格的字符串返回值: 去除空格之后的字符串$.isWindow();作用: 判断传入的对象是否是window对象返回值: true/false$.isArray();作用: 判断传入的对象是否是真数组返回值: true/false$.isFunction();作用: 判断传入的对象是否是一个函数返回值: tru...原创 2019-09-07 16:25:46 · 210 阅读 · 0 评论 -
08 - 内容选择器
:empty作用:找到既没有文本内容也没有子元素的指定元素:parent作用: 找到有文本内容或有子元素的指定元素:contains(text)作用: 找到包含指定文本内容的指定元素:has(selector)作用: 找到包含指定子元素的指定元素示例代码: <script> var $div = $("div:empty"); con...原创 2019-09-07 16:32:13 · 150 阅读 · 0 评论 -
09 - 属性和属性节点
1. 属性?对象身上保存的变量就是属性2. 操作属性对象.属性名称 = 值;对象.属性名称;对象[“属性名称”] = 值;对象[“属性名称”];3. 属性节点<span name = "it666"></span>HTML标签中添加的属性就是属性节点。在浏览器中找到span这个DOM元素之后, 展开看到的都是属性,在attributes属性中保存的所...原创 2019-09-07 20:25:19 · 272 阅读 · 0 评论 -
10 - jQuery的attr和prop
attr()作用:获取或者设置属性节点的值传一个参数:获取这个属性节点的值传两个参数:设置这个属性节点的值PS:获取: 无论找到多少个元素,都只返回第一个元素指定的属性节点的值。设置: 找到多少个,设置多少个。没找到,就自动新增。removeAttr()作用:删除属性节点会删除所有找到元素指定的属性节点删除多个属性节点,空格隔开示例代码:$("span").attr("...原创 2019-09-07 20:52:31 · 149 阅读 · 0 评论 -
01 - jQuery的Hello World
原生JS window.onload = function (ev) { }jQuery $(document).ready(function () { alert("Hello World"); });原创 2019-09-08 15:31:54 · 171 阅读 · 0 评论
分享