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操作相关方法emptyremovehtmltextappendToprependToappendprependinsertBeforeinsertAfterreplaceAll筛选相关方法nextprev

jQuery原型上的核心方法和属性：属性jquery 获取jQ版本号selector 实例默认的选择器取值length 实例默认的长度push 给实例添加新元素sort 对实例中的元素进行排序splice 按照指定下标指定数量删除元素，也可以替换删除的元素方法toArray 把实例转换为数组返回get 获取指定下标的元素，获取的是原生DOMeq 获取指定下标的元素，获取的是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.游戏时间:60s2.拼手速,殴打灰太狼+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