![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jQuery
学习jQuery。
Dreamy.TZK
这个作者很懒,什么都没留下…
展开
-
jQuery原理(事件操作相关方法)
on方法// 事件操作相关方法kjQuery.prototype.extend({ on: function (name, callBack) { this.each(function (key, ele) { // 2. 判断当前元素中是否有保存所有事件的对象 if (!ele.eventsCache) { ele.eventsCache = {}; }原创 2020-06-29 21:59:17 · 79 阅读 · 0 评论 -
jQuery原理(属性操作相关方法)
attr方法设置或者获取元素的属性节点值//属性操作相关的方法kjQuery.prototype.extend({ attr: function (attr, value) { // 1. 判断是否是字符串 if (kjQuery.isString(attr)) { if (arguments.length == 1) { return this[0].getAttribute(attr);原创 2020-06-24 17:01:17 · 189 阅读 · 0 评论 -
jQuery原理(DOM操作相关方法)
empty方法清空指定元素中的所有内容。也就是遍历内容,然后将其innerHTML清空。kjQuery.prototype.extend({ empty: function () { // 遍历所有找到的元素 this.each(function (k, v) { v.innerHTML = ''; }); // 返回this对象为了方便链式编程 return this; },})原创 2020-06-23 15:53:58 · 443 阅读 · 0 评论 -
jQuery原理(原型上的属性、方法)
jQuery原型上的属性kjQuery.prototype = { constructor: kjQuery, init: function (selector) {}, // 版本号 jquery: "1.1.0", // 实例默认的选择器取值 selector: "", // 实例默认的长度 length: 0, // 给实例添加新元素 push: [].push, // 对实例中的元素进行排序 sort:原创 2020-06-22 11:35:39 · 239 阅读 · 0 评论 -
jQuery原理(入口函数)
基本结构jQuery的基本结构如下:(function (window, undefiend) { var jQuery = function () { return new jQuery.fn.init() } jQuery.prototype = { constructor: jQuery } jQuery.fn.init.prototype = jQuery.prototype window.jQuery = win原创 2020-06-21 19:46:58 · 369 阅读 · 0 评论 -
八、jQuery的QQ音乐播放器
项目资料 查看源码 在线Demo基本框架及顶部布局<div class="header"> <h1 class="logo"><a href="#"></a></h1> <ul class="register"> <li>注册</li> <li>登陆</li> </ul></div&g原创 2020-06-20 19:27:07 · 828 阅读 · 0 评论 -
七、jQuery狂拍大灰狼案例
在线案例显示:狂拍灰太狼首页布局基本布局完成首页的布局,背景使用了一张图片。其余元素,图中已经标出。<div class="container"> <h1>0</h1> <div class="progress"></div> <button class="start">开始游戏</button> <div class="rules">游戏规则</div>&原创 2020-06-18 15:28:46 · 416 阅读 · 0 评论 -
六、jQuery节点操作
添加节点相关方法内部插入插入到节点最前面// 方法1$li.prependTo('ul')// 方法2(常用)$('ul').prepend($li)添加到节点最后边// 方法1$li.appendTo('ul')// 方法2(常用)$('ul').append($li)外部插入将元素添加到指定元素外部的后面// 方法1$li.insertAfter('ul')// 方法2(常用)$('ul').after($li)会将元素添加到指定元素外原创 2020-06-17 18:59:50 · 256 阅读 · 1 评论 -
五、jQuery动效
显示隐藏动画显示show()动画,隐藏动画hide(),切换动画toggle()这三个方法都可以传入参数:一个参数代表动画完成的时间两个参数第一个表示动画完成的时间,第二个参数表示动画完成后执行的回调函数$(function () { $('button').eq(0).click(function () { $('div').show(1000, function () { alert('显示动画执行完毕') })原创 2020-06-16 23:21:03 · 330 阅读 · 1 评论 -
四、jQuery事件相关
事件绑定绑定方式有两种:直接通过.eventName(fn)方式绑定。$('button').click(function () { alert('hello tzk')})编码效率高部分事件jQuery没有实现通过on(eventName,function)方式绑定$('button').on('click', function () { alert('hello tzk')})编码效率略低所有JavaScript事件都可以添加注意:以上两种原创 2020-06-16 23:20:31 · 170 阅读 · 0 评论 -
三、jQuery属性操作
jQuery内容选择器为了方便测试,先将DOM元素写为以下格式:<div></div><div>我是div</div><div>我是div123</div><div><span></span></div><div><p></p></div>:empty找到既没有文本内容也没有子元素的指定元素。这个选择器对于以上内容只能找原创 2020-06-15 18:48:59 · 283 阅读 · 0 评论 -
二、jQuery核心函数和工具方法
jQuery核心函数jQuery的核心函数就是$();,圆括号内可以传递函数、字符串选择器、字符串代码片段、DOM元素等。传递函数$(function () { alert(1)})字符串选择器返回一个jQuery对象,对象中保存了找到的DOM元素$(function () { var $box1 = $(".box1") var $box2 = $("#box2") console.log($box1) console.log($box2)原创 2020-06-15 18:48:33 · 147 阅读 · 0 评论 -
一、初识jQuery
版本选择1.x:兼容ie678,但相对其它版本文件较大,官方只做BUG维护,功能不再新增,最终版本:1.12.4 (2016年5月20日).2.x:不兼容ie678,相对1.x文件较小,官方只做BUG维护,功能不再新增,最终版本:2.2.4 (2016年5月20日)3.x:不兼容ie678,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,相对1.x文件较小,提供不包含Ajax/动画API版本。jQuery的使用下载jQuery或者使用cdn引入jQuery的文件编写代码<原创 2020-06-15 18:47:27 · 100 阅读 · 0 评论