DeathDomain的博客

事件操作相关方法 on(type, callback) 注册事件 1.注册多个相同类型事件, 后注册的不会覆盖先注册的 2.注册多个不同类型事件, 后注册的不会覆盖先注册的 on: function (name, callBack) { // 1.遍历取出所有元素 this.each(function (key, ele) { // 2.判断当前元素中是否有保存所有事件的对象 if(!ele.eventsCache){ ele.eventsCache = {}; } //

属性操作相关方法 attr() 设置或者获取元素的属性节点值 attr: function (attr, value) { // 1.判断是否是字符串 if(njQuery.isString(attr)){ // 判断是一个字符串还是两个字符串 if(arguments.length === 1){ return this[0].getAttribute(attr); }else{ this.each(function (key, ele) { ele.setAt

DOM操作相关方法 empty remove html text appendTo prependTo append prepend insertBefore insertAfter replaceAll 筛选相关方法 next prev

jQuery原型上的核心方法和属性： 属性 jquery 获取jQ版本号 selector 实例默认的选择器取值 length 实例默认的长度 push 给实例添加新元素 sort 对实例中的元素进行排序 splice 按照指定下标指定数量删除元素，也可以替换删除的元素 方法 toArray 把实例转换为数组返回 get 获取指定下标的元素，获取的是原生DOM eq 获取指定下标的元素，获取的是jQuery类型的实例对象 first 获取实例中的第一个元素，是jQuery类型的实例对象 last

入口函数测试 传入 ‘’ null undefined NaN 0 false 会返回一个空的jQuery对象给我们 console.log($()); console.log($('')); console.log($(null)); console.log($(undefined)); console.log($(NaN)); console.log($(0)); console.log($(false));   传入html片段 会将创建好的DOM元素存储到jQuery对象中返

占位

qq音乐案例

[jQuery基础] 目录 [jQuery基础] 初识jQuery [jQuery基础] jQuery核心函数和工具方法 [jQuery基础] jQuery对象 – 选择器 [jQuery基础] jQuery对象 – 属性操作 [jQuery基础] jQuery对象 – CSS相关 [jQuery基础] jQuery事件相关 [jQuery基础] jQuery事件相关案例 – 电影排行榜、Tab选项卡 [jQuery基础] jQuery动效 [jQuery基础] jQuery动效案例(一) – 弹

狂拍灰太狼 案例效果展示   案例构架 1.背景图片 2.得分选项 3.时间进度条 4.游戏规则的点开以及关闭 5.开始游戏选项和重新开始选项       案例思路 布局html页面的基本样式 设置得分 设置时间进度条 设置开始游戏按键 设置游戏规则框架 设置游戏规则 设置 game over 和 重新开始按键 设置这个游戏的基本规则 1.游戏时间:60s 2.拼手速,殴打灰太狼+10分 3.殴打小灰灰-10分 接下来开始正题,js的基本实现过

新浪微博 案例思路 主要说说JavaScript的思路 随时要监听内容的输入 有内容输入 添加,按钮可以点击 没有内容输入 禁止点击按钮 监听点击发布按钮 拿到用户输入的内容 根据内容创建节点 插入微博 监听 - - 顶 / 踩 / 删除 监听顶和踩 获取标签内容并转化为整型然后加 1 监听删除 利用 parents() 方法 创建节点方法 用jQuery创建新元素 生成时间方法 getFullYear() – 返回年份 getMonth() – 返回

复制节点 如果传入false就是浅复制, 如果传入true就是深复制 浅复制只会复制元素, 不会复制元素的事件 深复制会复制元素, 而且还会复制元素的事件 浅复制 $("button").eq(0).click(function () { // 1.浅复制一个元素 var $li = $("li:first").clone(false) // 2.将复制的元素添加到ul中 $("ul").append($li) }) 深复制 $("button").eq(1).cl

下拉菜单 实现效果展示 实现步骤 第一步(实现静态效果) CSS部分 *{ margin: 0; padding: 0; } .nav{ list-style: none; width: 300px; height: 50px; background: red; margin: 100px auto; cursor: pointer; } .nav>li{ width: 100px; height: 50px; line-height: 50px; text-align: center; flo

图标特效 实现效果展示 实现步骤 第一步(实现静态效果) CSS部分 *{ margin: 0; padding: 0; } ul{ list-style: none; width: 400px; height: 250px; border: 1px solid #000; margin: 100px auto; } ul>li{ width: 100px; height: 50px; margin-top: 50px; text-align: center; float

弹窗广告 实现效果展示 实现步骤 第一步(实现静态效果) CSS部分 *{ margin: 0; padding: 0; } .ad{ position: fixed; right: 0; bottom: 0; display: none; } .ad>span{ display: inline-block; width: 30px; height: 30px; position: absolute; top: 0; right: 0; } html部分 <d

显示和隐藏动画 show() – 显示 hide() – 隐藏 $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { // $("div").css("display", "block") // 注意: 这里的时间是毫秒 $("div").show(1000, function () { // 作用: 动画执行完毕之后调用

电影排行榜 实现效果展示 实现步骤 第一步(实现静态效果) css部分 *{ margin: 0; padding: 0; } .box{ width: 300px; height: 450px; margin: 50px auto; border: 1px solid #000; cursor: poi

事件绑定 有两种绑定事件方式 eventName(fn) 编码效率略高/ 部分事件jQuery没有实现,所以不能添加 $(function () { $("button").click(function () { alert("hello lnj") }) $("button").click(function () { alert("hello 123") }) $("button").mouseleave(function () {

CSS相关 操作CSS 逐个设置 $(function () { $("div").css("width", "100px") $("div").css("height", "100px") $("div").css("background", "red") }) 链式设置 链式操作如果大于3步, 建议分开 $(function () { $("div").css("width", "100px").css("height", "100px").css("backg

属性操作 属性和属性节点 1.什么是属性? 对象身上保存的变量就是属性 2.如何操作属性? 对象.属性名称 = 值 对象.属性名称 对象[“属性名称”] = 值 对象[“属性名称”] $(function () { function Person() { } var p = new Person() // p.name = "lnj" p["name"] = "zs" // console.log(p.name) console.log(p["n

jQuery对象 选择器 基础选择器 主要有通过id名查询的id选择器、类选择器、标签选择器以及通用选择器 层次选择器 常见有后代选择器、子选择器 、相邻兄弟选择器、同胞选择器 序选择器 等待更新 属性选择器 $ (“div[id]”) 选择所有含有id属性的div元素 $ (“input[name=‘newsletter’]”) 选择所有的name属性等于’newsletter’的input元素 $ (“input[name!=‘newsletter’]”) 选择所有的na

核心函数 核心函数 调用jQuery的核心函数 $() jQuery 传递一个函数 $(function () { alert("hello lnj") } 接受一个字符串选择器 返回一个jQuery对象, 对象中保存了找到的DOM元素 $(function () { var $box1 = $(".box1") var $box2 = $("#box2") console.log($box1) console.log($box2) } 接收一个字符串代码

为什么要使用jQuery? 强大选择器: 方便快速查找DOM元素 链式调用: 可以通过.不断调用jQuery对象的方法 隐式遍历(迭代): 一次操作多个元素 读写合一: 读数据/写数据使用是一个函数 事件处理 DOM操作(C增U改D删) 样式操作 动画 丰富的插件支持 浏览器兼容 1.x：兼容ie678，但相对其它版本文件较大，官方只做BUG维护，功能不再新增 2.x：不兼容ie678，相对1.x文件较小，官方只做BUG维护，功能不再新增 3.x：不兼容i