python之路-笔录3[BOM&DOM&JQuery]

* 目录 *

　　1. BOM 学习

　　2. DOM 学习

　　3. jQuery 学习

* END *

1. BOM

　BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”

1.1、window 对象

　Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()

　所有浏览器都支持 window 对象。它表示浏览器窗口

　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员

　全局变量是 window 对象的属性。全局函数是 window 对象的方法

　一些常用的 window 的方法：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

　1.1.2、window 对象的子对象

　　1）navigator 对象（了解即可）

　　浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

　　2）screen 对象（了解即可）

// 屏幕对象，不常使用
screen.availWidth    // 可用的屏幕宽度，固定不变
screen.availHeight   // 可用的屏幕高度，固定不变

　　3）history 对象（了解即可）

　　window.history 对象包含浏览器的历史。浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward()  // 前进一页
history.back()  // 后退一页

　　4）location 对象（重要）

　　window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

location.href        // 获取URL
location.href="URL" // 跳转到指定页面
location.reload()      // 重新加载页面

　　5）弹出框

　　可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框

// 警告框
alert("你看到了吗？");
// 当警告框出现后，用户需要点击确定按钮才能继续进行操作


// 确认框
confirm("你确定吗？")
// 如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false


// 提示框
prompt("请在下方输入","你的答案")
// 如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null

　　6）计时相关

　　　6.1）setTimeout()

　　　设定一段时间间隔后执行某事件

var t=setTimeout("JS语句",毫秒)   // 可以是执行JS语句，也可以是函数

　　　6.2）clearTimeout()

　　　停止 setTimeout 设置的计时事件

clearTimeout(t)    // 参数为 setTimeout 对象

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);

demo

　　　6.3）setInterval()

　　　每隔一段时间间隔执行某设定事件

setInterval("JS语句",时间间隔)        // 使用方法类似setTimeout

　　　6.4）clearInterval()

　　　停止 setInterval 调用的循环事件

clearInterval(setinterval返回的ID值)

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

demo

2. DOM

　DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素

　DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法

　HTML DOM 模型被构造为对象的树

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

* DOM 学习

　2.1、查找标签

　　1）直接查找

document.getElementById()           // 根据ID获取一个标签
document.getElementsByClassName()   // 根据class属性获取
document.getElementsByTagName()     // 根据标签名获取标签合集

　　2）间接查找（属性查找）

document.parentElement            // 父节点标签元素
children                 // 所有子标签
firstElementChild        // 第一个子标签元素
lastElementChild         // 最后一个子标签元素
nextElementSibling       // 下一个兄弟标签元素
previousElementSibling   // 上一个兄弟标签元素

　2.2、节点操作

　　1）创建节点

// createElement(标签名)

var divEle = document.createElement("div");  // 创建节点后，需添加到html标签上

　　2）添加节点

// 追加一个子节点（作为最后的子节点）; somenode：父节点； newnode：新增的子节点
somenode.appendChild(newnode)；

// 把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

demo

　　3）删除节点

// 获得要删除的元素，通过父元素调用该方法删除。

somenode.removeChild(要删除的节点)

　　4）替换节点

somenode.replaceChild(newnode, 某个节点)

　　5）属性节点

　　①. 获取文本节点的值

var divEle = document.getElementById("d1")
divEle.innerText        // 文本内容
divEle.innerHTML        // 文本内容+HTML标签

　　②. 设置本节点的值

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

　　③. attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")       // 设置某属性
divEle.getAttribute("age")              // 获取某属性值
divEle.removeAttribute("age")       // 删除某属性值

// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

　2.3、获取值操作

　　适用：input 、 select 、 textarea 标签

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

　2.4、操作 CSS 样式

className    // ele.className ：获取某个标签中应用了哪些样式类(class)
classList.remove(cls)         // 删除指定类  eg：document.getElementsByClassName("cls")[0].classList.remove("hide");   找到class属性带有"cls"的标签，删除class属性：hide
classList.add(cls)         // 添加类
classList.contains(cls)         // 存在返回true，否则返回false
classList.toggle(cls)         // 存在就删除，否则添加，类似开关

ele.style.backgroundColor="red"        // 指定某标签使用某样式

　　JS 操作 CSS 属性的规则：

　　1. 对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

ele.style.margin
ele.style.width
ele.style.left
ele.style.position

　　2. 对含有中横线的CSS属性，去掉中横线，再将中横线后面的第一个字母换成大写即可。如：

ele.style.marginTop
ele.style.borderLeftWidth
ele.style.zIndex
ele.style.fontFamily

　2.5、事件

　　HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作

　　1）常用事件：

onclick        // 当用户点击某个对象时调用的事件句柄。
ondblclick     // 当用户双击某个对象时调用的事件句柄。

onfocus        // 元素获得焦点。      
onblur         // 元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       // 域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      // 某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     // 某个键盘按键被按下并松开。
onkeyup        // 某个键盘按键被松开。
onload         // 一张页面或一幅图像完成加载。
onmousedown    // 鼠标按钮被按下。
onmousemove    // 鼠标被移动。
onmouseout     // 鼠标从某元素移开。
onmouseover    // 鼠标移到某元素之上。

onselect       // 在文本框中的文本被选中时发生。
onsubmit      // 确认按钮被点击，使用的对象是form

　　2）绑定方式

　　方式一：

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>
// 注意：this是实参，表示触发事件的当前元素 ； 函数定义过程中的ths为形参

　　方式二：

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>
// 注意：这种方式可以直接使用匿名函数

　　事件示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字"){
        inputEle.value="";
    }
}

function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="请输入关键字";
    }
}
</script>
</body>
</html>

搜索框示例

<label for="s1">省：</label>
<select id="s1">
    <option value="">-请选择省-</option>
</select>

<label for="s2">市：</label>
<select id="s2"></select>

<script>

    var data = {
        "北京":["昌平区", "海淀区", "朝阳区"],
        "上海":["浦东区", "徐汇区", "浦东新区"],
        "山东":["烟台", "青岛", "威海"]
    };

    // 1. 拿到省份及城市的 select 标签
    var s1Ele = document.getElementByid("s1");
    var s2Ele = document.getElementByid("s2");
    // 2. 拿到所有的省信息，在s1中生成对应的option选项
    for (var i in data){    // 拿到的是：北京、上海、山东
        // 2.1 创建option标签
        var tmp = document.createElement("option");
        // 2.2 把省信息添加到option 标签中
        tmp.innerText = i;
        // 2.3 把创建好的option 标签插入到第一个select 标签中
        s1Ele.appendChild(tmp);
    }

    // 给省份绑定 onchange 事件 ，当省份数据变化时才展示市内容
    s1Ele.onchange = function(){
        // 0. 先清空第二个select框中的option
        s2Ele.innerHTML = ""        // 连标签等一并清空
        // 1. 获取用户选中的省份信息
        var p = this.value;      // select → option ：如果没value属性，获取value属性时默认会获取该标签的文本内容
        // 2. 根据用户选中的省，在data 中找到省下面对应的城市数据
        var cityArray = data[p];
        // 3. 遍历所有的城市数据，给第二个select（城市）框添加option选项
        for (var j in cityArray){
            // 3.1 生成空的option
            var temp = document.createElement("option");
            // 3.2 给option 添加文本
            temp.innerText = cityArray[j];
            // 3.3 把生成的option追加到第二个select 标签中
            s2Ele.appendChild(temp);

        }
    }

</script>

select 二级城市联动

　　3）window.onload

　　当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载.

window.onload = function(){"JS 语句"}

3. jQuery

　jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

　jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

　jQuery 中文文档：http://jquery.cuishifeng.cn/

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7.  插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery优势

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery 版本

3.1 jQuery 对象

　 jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

　jQuery 与 DOM 区别

　1）jQuery 对象变量与 DOM 对象变量

var $variable = jQuery对像    // jQuery变量
var variable = DOM对象　　　　// DOM变量
$(vaeiable)　　　　// 将DOM变量转换成jQuery变量
$variable[0]    //jQuery对象转成DOM对象。 jQuery对象内部是数组类型，按下标查找，能转成DOM对象

　2）jQuery 对象与 DOM 变量的区别使用及转换

$("#i1").html();        // jQuery对象可以使用jQuery的方法（即使用jQuery方法，不能使用DOM方法或属性）
$("#i1")[0].innerHTML;        // DOM对象使用DOM的方法。 $("#i1")[0]：拿到具体标签对象，即DOM对象

3.2 jQuery 基本语法

　3.2.1 查找标签

　1）基本选择器

$("#id")   // id 选择器

$("tagName")    // 标签选择器

$(".className")    // class 选择器

// 配合使用：
$("div.c1")      // 找到有c1 class类的div标签

$("*")        // 所有元素选择器

$("#id, .className, tagName")        // 组合选择器，选择存在id、或className、或tagName 的标签

　2）层级选择器

$("x y");        // x的所有后代y（子子孙孙）
$("x > y");    // x的所有儿子y（儿子）
$("x + y")    // 找到所有紧挨在x后面的y
$("x ~ y")    // x之后所有的兄弟y

　3）基本选择器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

demo：

　4）属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

demo：

　5）表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

$(":checkbox")  // 找到所有的checkbox

demo：

// 表单对象属性：
:enabled
:disabled
:checked         // 获取选中的复选框时采用：$("input:checked") ，如果采用简写方式$(":checked")，会将select框选中的内容也一并获取   
:selected

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

demo1：

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

demo2：

　6）筛选器方法

// 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

// 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

// 父辈元素
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素，层层递进
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(所有兄弟)

// 查找， 等价于：等价于$("div p")
$("div").find("p")

// 筛选 ， 等价于：$("div.c1")
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

3.3、操作标签

　1）样式操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加

　CSS：

// jQuery操作方式：给某标签添加样式
.css("color","red")

//DOM操作方式：tag.style.color="red"

$("p").css("color", "red"); //将所有p标签的字体设置为红色

demo：

　2）位置操作：

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

　3）尺寸：

height()                // 内容高度
width()                // 内容宽度
innerHeight()        // 文本内容+padding
innerWidth()        // 文本内容+padding
outerHeight()      // 文本内容+padding+border  
outerWidth()        // 文本内容+padding+border

　4）文本操作：

// 1. 获取HTML 内容
.html()        // get：取得第一个匹配元素的html内容
.html(val)    // set：设置所有匹配元素的html内容

// 2. 获取文本值：
.text()        // get：取得所有匹配元素的内容
.text(val)    // set：设置所有匹配元素的内容

// 3. 值：一般是input类（input、select、textear）
.val()        // 取得第一个匹配元素的当前值
.val(val)    // 设置所有匹配元素的值，注意与上面的区别
.val([val1, val2])    // 设置多选的checkbox、多选select的值，凡是多选方面的都必须使用这种方式，参数采用列表的方式传入。

demo：

　①. 多选值：选中多个复选框、select框值

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>


// 选中多个值
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

demo

　②. 单选值：获取选中的checkbox、radio 值

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">


// 获取选中的值：
$("input[name='gender']:checked").val()

demo

　5）属性操作：

　　attr：用于ID、class属性或自定义属性：

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

　　prop：用于 radio、checkbox：

prop() // 获取属性
removeProp() // 移除属性

　注意：在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")

// attr 和 prop 适用场景：
1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

　6）文档处理

　　添加元素：

// 添加元素到指定元素内部的后面：
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

// 添加元素到指定元素内部的前面：
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

// 添加元素到指定元素外部的后面：
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

// 添加元素到指定元素外部的前面：
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

// 移除和清空：
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。本身存在，内部子节点都删除（标签及内容）

// 替换：
replaceWith()       // eg: $("p").replaceWith($(ele))   用ele标签替换p标签
replaceAll()        // eg: $($(ele)).replaceAll("p")   用ele标签替换所有p标签

// 克隆
clone()// 参数：true

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>克隆</title>
  <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不带参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法如果带参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>

demo：

　7）动态创建标签（DOM和jQuery）

// DOM 方式动态创建标签
<script>
    var tr = document.getElementById('tr_id1') //根据id属性获取tr标签
    var td = document.createElement('td') //创建td标签
    td.setAttribute('aa','td_aa'); //设置标签属性aa=‘td_aa’
    td.innerHTML = '哈哈哈哈'; //设置td标签文本值为'哈哈哈哈'
    tr.appendChild(td); //将新创建的td标签插到tr标签中
</script>   

// jQuery 方式动态创建标签
<script>    
    var td = $("<td>"); //创建td标签
    td.attr('aa','td_aa'); //设置标签属性aa=‘td_aa’
    td.html('哈哈哈哈'); //设置td标签文本值为'哈哈哈哈'
    $("#tr_id1").append(td); //将新创建的td标签插到id为tr_id1的标签中
</script>

// 拼接的方式：
$("li").append("<span stlye='100px .........'></span>")

3.4、事件

　1）常用事件：

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

keydown和keyup事件组合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>


<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Egon</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">


<script src="jquery-3.3.1.js"></script>
<script>

    var flag = false;
    // shift按键被按下的时候
    $(window).keydown(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = true;
        }
    });
    // shift按键被抬起的时候
    $(window).keyup(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = false;
        }
    });
    // select标签的值发生变化的时候
    $("select").change(function (event) {
        // 如果shift按键被按下，就进入批量编辑模式
        // shift按键对应的code是16
        // 判断当前select这一行是否被选中
        console.log($(this).parent().siblings().first().find(":checkbox"));
        var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
        console.log(isChecked);
        if (flag && isChecked) {
            // 进入批量编辑模式
            // 1. 取到当前select选中的值
            var value = $(this).val();
            // 2. 给其他被选中行的select设置成和我一样的值
            // 2.1 找到那些被选中行的select
            var $select = $("input:checked").parent().parent().find("select")
            // 2.2 给选中的select赋值
            $select.val(value);
        }
    });
</script>
</body>
</html>

按住shift实现批量操作

按住shift键实现批量处理操作

hover事件示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>hover示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .nav {
      height: 40px;
       100%;
      background-color: #3d3d3d;
      position: fixed;
      top: 0;
    }

    .nav ul {
      list-style-type: none;
      line-height: 40px;
    }

    .nav li {
      float: left;
      padding: 0 10px;
      color: #999999;
      position: relative;
    }
    .nav li:hover {
      background-color: #0f0f0f;
      color: white;
    }

    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }

    .son {
      position: absolute;
      top: 40px;
      right: 0;
      height: 50px;
       100px;
      background-color: #00a9ff;
      display: none;
    }

    .hover .son {
      display: block;
    }
  </style>
</head>
<body>
<div class="nav">
  <ul class="clearfix">
    <li>登录</li>
    <li>注册</li>
    <li>购物车
      <p class="son hide">
        空空如也...
      </p>
    </li>
  </ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(".nav li").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
</script>
</body>
</html>

hover事件

hover事件

实时监听input输入值变化示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">

<script src="jquery-3.2.1.min.js"></script>
<script>
  /*
  * oninput是HTML5的标准事件
  * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
  * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
  * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
  * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
  * */
  $("#i1").on("input propertychange", function () {
    alert($(this).val());
  })
</script>
</body>
</html>

input值变化事件

input 监听事件

　2）事件绑定：

.on( events [, selector ],function(){})
// events： 事件，如：click 、focus事件
// selector: 选择器（可选的）
// function: 事件处理函数

　3）移除事件：

.off( events [, selector ][,function(){}])
// events： 事件
// selector: 选择器（可选的）
// function: 事件处理函数

　4）事件委托：

　事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

// click：点击事件
// .delete：绑定的选择器（一般选择父级标签）
// function：事件处理函数

　5）3种事件阻止方式：

　　方式一：阻止后续事件执行

return false; // 常见阻止表单提交等

　　方式二：阻止默认事件执行，类似方式一

e.preventDefault();  // 阻止表单默认提交事件

　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

阻止后续事件执行示例

　　方式三：阻止事件冒泡

　　　事件冒泡：给当前标签绑定事件后，执行当前标签事件后会层层递进，一层一层执行父级标签事件

e.stopPropagation();      // e：事件本身

　示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

阻止事件冒泡示例

　6）页面载入两种写法：

// 写法一：
$(document).ready(function(){
// 在这里写你的JS代码...
})

// 写法二（推荐）：
$(function(){
// 你在这里写你的代码
})

　示例：文档加载完绑定事件，并且阻止默认事件发生

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>登录注册示例</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form id="myForm">
  <label for="name">姓名</label>
  <input type="text" id="name">
  <span class="error"></span>
  <label for="passwd">密码</label>
  <input type="password" id="passwd">
  <span class="error"></span>
  <input type="submit" id="modal-submit" value="登录">
</form>

<script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>
  function myValidation() {
    // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树
    var $myForm = $("#myForm");
    $myForm.find(":submit").on("click", function () {
      // 定义一个标志位，记录表单填写是否正常
      var flag = true;
      $myForm.find(":text, :password").each(function () {
        var val = $(this).val();
        if (val.length <= 0 ){
          var labelName = $(this).prev("label").text();
          $(this).next("span").text(labelName + "不能为空");
          flag = false;
        }
      });
      // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
      return flag;
    });
    // input输入框获取焦点后移除之前的错误提示信息
    $myForm.find("input[type!='submit']").on("focus", function () {
      $(this).next(".error").text("");
    })
  }
  // 文档树就绪后执行
  $(document).ready(function () {
    myValidation();
  });
</script>
</body>
</html>

登录校验示例

View Code

　与 window.onload 区别：

window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
$(function(){})：jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

3.5、动画效果

参考：http://jquery.cuishifeng.cn/show.html

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

3.6、补充

　1）jQuery.each(collection, callback(indexInArray, valueOfElement))

　　描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

// 输出：
0 10
1 20
2 30
3 40

　.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

// 简写：
$("li").addClass("c1");  // 对所有标签做统一操作

　终止each循环：

// 在遍历过程中可以使用 return false提前结束each循环
return false；

　2）.data()

　　在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

　.data(key, value)：在匹配的元素上存储任意相关数据

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

　.data(key)：描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置

$("div").data("k");//返回第一个div标签中保存的"k"的值

　.removeData(key)：移除存放在元素上的数据，不加key参数表示移除所有保存的数据

$("div").removeData("k");  //移除元素上存放k对应的数据

python之路-笔录3[BOM&DOM&JQuery]

*** 目录 ***

*** END ***

1. BOM

1.1、window 对象

2. DOM

* DOM 学习

2.1、查找标签

2.2、节点操作

2.3、获取值操作

2.4、操作 CSS 样式

2.5、事件

3. jQuery

3.1 jQuery 对象

1）jQuery 对象变量与 DOM 对象变量

2）jQuery 对象与 DOM 变量的区别使用及转换

3.2 jQuery 基本语法

3.3、操作标签

3.4、事件

3.5、动画效果

3.6、补充

推荐阅读

* 目录 *

* END *

　2.1、查找标签

　2.2、节点操作

　2.3、获取值操作

　2.4、操作 CSS 样式

　2.5、事件

　1）jQuery 对象变量与 DOM 对象变量

　2）jQuery 对象与 DOM 变量的区别使用及转换