JavaScript DOM操作及jQuery框架用法

Date: 2018/10/2

1. 认识DOM

1.1 什么是DOM

DOM（Document Object Model）文档对象模型

1.2 DOM有什么作用

DOM以树结构表达了HTML文档

2. DOM元素与节点

2.1 元素是指什么？

标签元素

2.2 什么是节点？

HTML文档中的所有内容都是节点

整个文档是一个节点

每个HTML元素是元素节点

HTML元素内的文本是文本节点

注释也是节点

2.3 节点树

1538449360687.png

3. 获取元素

先来说一下DOM对象，在JavaScript中DOM对象用document表示，document是window对象的一个属性，对window的操作叫做BOM操作，后续再简单说说BOM

3.1 通过id获取HTML元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        Hello World!
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div);
</script>
</body>
</html>

3.2 通过标签名获取元素集

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p>Hello World!</p>
        <p>Yes!</p>
    </div>
    <p>NO</p>
<script>
    var div = document.getElementsByTagName("p");
    console.log(div);
</script>
</body>
</html>

3.3 通过类名获取元素集

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div class="box">
        <p class="box">Hello World!</p>
    </div>
<script>
    var div = document.getElementsByClassName("box");
    console.log(div);
</script>
</body>
</html>

3.4 获取父元素，子元素，相邻元素

属性名 说明
parentNode 获取父元素节点
previousSibling 获取相邻的上一个兄弟元素节点
nextSibling 获取相邻的下一个兄弟元素节点
childNodes 获取全部子元素节点
firstChild 获取第一个子元素节点
lastChild 获取最后一个子元素节点 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box"><h1>TITLE</h1><p id="txt">Hello World!</p><h2>弟弟</h2></div>
<script>
    var p = document.getElementById("txt");
    console.log(p.parentNode);
    console.log(p.previousSibling);
    console.log(p.nextSibling);
    console.log("\n");
    var div = document.getElementById("box");
    console.log(div.childNodes);
    console.log(div.firstChild);
    console.log(div.lastChild);
</script>
</body>
</html>

4. 元素操作

4.1 创建元素

createElement("标签名")

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">

    </div>
<script>
    var p = document.createElement("p");
    var div = document.getElementById("box");
    div.appendChild(p);
</script>
</body>
</html>

4.2 添加子元素

appendChild(Child_Node)

见4.2代码

4.3 删除子元素

removeChild(Child_Node)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var div = document.getElementById("box");
    var h1 = document.getElementsByTagName("h1")[0];
    div.removeChild(h1);
</script>
</body>
</html>

4.4 替换子元素

replaceChild(newnode,oldnode)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var h2 = document.createElement("h2");
    h2.innerHTML = "OK!";
    var h1 = document.getElementsByTagName("h1")[0];
    var div = document.getElementById("box");
    div.replaceChild(h2,h1);
</script>
</body>
</html>

4.5 在指定子元素前插入新子元素

insertBefore(newNode,existingNode)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var h2 = document.createElement("h2");
    h2.innerHTML = "OK!";
    var h1 = document.getElementsByTagName("h1")[0];
    var div = document.getElementById("box");
    div.insertBefore(h2,h1);
</script>
</body>
</html>

4.6 修改元素内容

innerHtml 属性与innerText属性，可以设置或获取内容

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <h1>Hehe</h1>
    </div>
<script>
    var h1 = document.getElementsByTagName("h1")[0];
    h1.innerHTML = "<a>OK</a>";
    // h1.innerText = "<a>OK</a>";
</script>
</body>
</html>

5 对元素的属性进行操作

5.1 创建属性节点

createAttribute("attrName")

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">        
    </div>
<script>
    var cls = document.createAttribute("class");
    var div = document.getElementById("box");
    div.setAttributeNode(cls);
</script>
</body>
</html>

5.2 返回元素属性值

getAttribute("attrName")

5.3 设置元素属性

setAttribute("attrName","attrValue")

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div.getAttribute("id"));
</script>
</body>
</html>

6 对元素的样式进行操作

6.1 获取样式

element.style

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="background:red;width:100px;height:100px;">
        
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div.style);
</script>
</body>
</html>

6.2 设置样式

element.style.样式名 = “值”

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="background-color:red;width:100px;height:100px;">
        
    </div>
<script>
    var div = document.getElementById("box");
    console.log(div.style);
    div.style.backgroundColor = "yellow";
    div.style.width = "20px";
</script>
</body>
</html>

7 DOM事件

7.1 鼠标事件

属性 描述
onclick 单击
ondblclick 双击
onmousedown 鼠标按钮被按下
onmouseup 鼠标按钮被释放
onmouseenter 鼠标指针进入
onmouseleave 鼠标指针移出
onmousemove 鼠标移动
onmouseover 鼠标移到元素上面
onmouseout 鼠标从某元素移开
onwheel 鼠标滚动 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <h1 id="h1">点我</h1>
    <h2>我是展示的信息</h2>
<script>
    var h1 = document.getElementById("h1");
    h1.onclick = function (){
        console.log("点击");
        var h2 = document.getElementsByTagName("h2")[0];
        h2.innerHTML = "楼上那哥们被点中了！";
    }
</script>
</body>
</html>

7.2 键盘事件

属性 描述
onkeydown 某个键被按下
onkeypress 某个键被按下并松开
onkeyup 某个键松开

通过window.event获取事件响应值，其中event.keyCode是按键值，在IE浏览器里面是event.which

常见的keyCode值对应的按键

7.3 表单事件

属性 描述
onchange 表单内容改变时触发
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
oninput 元素获取用户输入时触发
onsubmit 表单提交时触发
onsearch 用户向搜索域输入文本时触发（input的type="search"） 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <form action="">
        <input id="name" type="text" value="Kevin">
    </form>
<script>
    var i = document.getElementById("name")
    i.oninput = function(){
        console.log("内容被修改");
    }
</script>
</body>
</html>

等。。。

8 jQuery框架

Vue.js Angular.js React.js

8.1 下载和引用jQuery框架

下载地址

也可以直接引用网上的CDN下的地址，如下：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

8.2 jQuery有什么作用？

快捷处理DOM操作，更加形象化与高效

9 jQuery获取元素方法

9.1 $()函数

一个$()函数解决了通过id,class,标签的选择方式，遵循css的选择器样式

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p class="txt">Hello World!</p>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    console.log($("#box"));
    console.log(("#box .txt"));
</script>
</body>
</html>

9.2 获取父元素，子元素，兄弟元素的函数方法

获取父元素

  • parent() 父元素
  • parents() 祖辈元素，一直到文档的根元素html
  • parentsUntil(Node) 与Node之间的祖辈元素

获取后代元素

  • children() 所有直接子元素，可选参数过滤条件
  • find() 查找后代元素，参数为后代的元素选择器

兄弟元素

  • siblings() 所有兄弟元素
  • next() 下一个兄弟元素
  • nextAll() 后面跟随的所有兄弟元素
  • nextUntil(Node) 后面跟随的与Node之间的所有兄弟元素
  • prev() 前一个兄弟元素
  • prevAll() 前面所有的兄弟元素
  • prevUntil(Node) 前面的与Node之间的兄弟元素
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p id="txt">Hello World!</p>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var p = $("#txt");
   var body = $("body");
   console.log(p.parent());
   console.log(p.parents());
   console.log(p.parentsUntil("body"));
   console.log(body.find("p"));
</script>
</body>
</html>

9.3 过滤

  • first() 首个元素
  • last() 最后一个元素
  • eq(int) 索引号为int的元素
  • filter(".url") 匹配class含有类名url的元素
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box">
        <p id="txt">Hello World!</p>
        <p>2</p>
        <p>3</p>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var p = $("p");   
   console.log(p);
   console.log(p.filter("#txt"));
</script>
</body>
</html>

10 jQuery的元素操作

10.1 添加元素

  • append() - 在被选元素的结尾插入子内容
  • prepend() - 在被选元素的开头插入子内容
  • after() - 在被选元素之后插入兄弟内容
  • before() - 在被选元素之前插入兄弟内容
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1>你好</h1>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var div = $("#box");
   div.append("<h1>Hello</h1>");
   div.prepend("<h1>Hi</h1>")
   div.after("我在div外面");
</script>
</body>
</html>

10.2 删除元素

  • remove() - 删除被选元素（及其子元素），可选参数为过滤条件
  • empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1>你好</h1>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var div = $("#box");
   div.after("我在div外面");
   div.remove();
</script>
</body>
</html>

10.3 设置内容

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单input的值
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title">你好</h1>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
//    h1.html("<a href='http://www.baidu.com'>百度</a>");
   h1.text("<a href='http://www.baidu.com'>百度</a>");
</script>
</body>
</html>

11 jQuery对元素属性的操作

使用attr("属性名"，"属性值")，或参数为一个map值

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title">你好</h1>
        <input id="name" type="text" value="Kevin">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title"); 
   h1.attr({
    "class":"red",
    "data":"10"
   });
</script>
</body>
</html>

12 jQuery操作CSS

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

css()函数讲解，获取css属性，设置单个css属性，设置多个css属性

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <input id="name" type="text" value="Kevin">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title"); 
   h1.addClass("active");
   h1.removeClass("hide");
</script>
</body>
</html>

13 jQuery事件

13.1 bind()方法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <input id="name" type="text" value="hehe">
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
   h1.bind("click",function(){
       console.log("点击");
   });
</script>
</body>
</html>

13.2 change()处理表单

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<p>在某个域被使用或改变时，它会改变颜色。</p>
 <input class="field" type="text" />
<p>
<select class="field">
<option value="volvo">1</option>
<option value="saab">2</option>
<option value="fiat">3</option>
<option value="audi">4</option>
</select>
</p>
<script type="text/javascript">
    $(".field").change(function(){
        $(this).css("background-color","#FFFFCC");
    });
</script>
</body>
</html>

14 jQuery的效果

14.1 隐藏和显示

  • hide()
  • show()
  • toggle()
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <input id="name" type="text" value="hehe">
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
//    h1.hide();
//    h1.show();
    h1.bind("click",function(){
        $("#h2").toggle();
    })
</script>
</body>
</html>

14.2 淡入淡出

  • fadeIn() 参数为时间单位毫秒
  • fadeOut()
  • fadeToggle()
  • fadeTo()
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
    h1.bind("click",function(){
        $("#h2").fadeToggle();
    })
</script>
</body>
</html>

14.3 滑动

  • slideDown()
  • slideUp()
  • slideToggle()
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
    h1.bind("click",function(){
        $("#h2").slideToggle();
    })
</script>
</body>
</html>

14.4 动画

animate({params},speed,callback);

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>第二课</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box" style="border:1px solid #000;">
        <h1 id="title" class="hide">你好</h1>
        <h2 id="h2">隐藏/显示</h2>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
   var h1 = $("#title");
    h1.bind("click",function(){
        $("#h2").animate({
            fontSize:"100px"
        },3000);
    })
</script>
</body>
</html>

如果你觉得文章有用就分享收藏一波吧ヾ(•ω•`)o

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,992评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,212评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,535评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,197评论 1赞 287
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,310评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,383评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,409评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,191评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,621评论 1赞 306
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,763评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,403评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2赞 351

推荐阅读更多精彩内容

  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,367评论 0赞 44
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,460评论 1赞 45
  • JavaScript DOM操作及扩展
    什么是DOM？？？ DOM(Document Object Model 文档对象模型)是针对HTML和XML文档的...
    荧惑3_3阅读 1,383评论 0赞 1
  • jQuery基础——样式篇
    第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,578评论 0赞 11
  • jQuery基础——DOM篇
    第1章 简介 第2章 DOM节点的创建 2-1 DOM创建节点及节点属性 通过JavaScript可以很方便的获...
    mo默22阅读 806评论 0赞 8