Python 【第八章】：JavaScript 、Dom、jQuery
JavaScript
放置位置
body内部最下面，这样可以避免javascript链接失效时，长时间加载不到页面html内容
变量：
var a =123 局部变量
a = 123 全局变量
作用域：
没有块级作用域，只有函数作用域
DOM部分
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
间的查找：
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
例子：
<div id ="i3"><div>234</div><div>456</div></div>
class 操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="c1 c2 c3">123</div> <!--<div class="c1 c2">123</div>-->
</body>
</html>
className // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
ID操作
例子搜索文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();" />
<input id="i2" type="text"/> <script type="text/javascript">
function Focus(){
//console.log('Focus');
//获取标签，清空
var tag = document.getElementById('i1');
if(tag.value == "请输入关键字"){
tag.value = "";
} }
function Blur(){
//console.log('blur');
var tag = document.getElementById('i1');
var val = tag.value;
if(val.trim().length == 0){
tag.value = "请输入关键字";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
</style>
</head>
<body> <div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div> </div>
<div class="item"> <div class="title" onclick="ShowMenu(this);">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div> </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function ShowMenu(ths){
// console.log(ths); // Dom中的标签对象
//$(ths) // Dom标签对象转换成jQuery标签对象（便利）
//$(ths)[0] // jQuery标签对象转换成Dom标签对象 $(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script>
</body>
</html>
javascript 作用域链 执行前已创建
JavaScript的作用域在被执行之前已经创建，日后再去执行时只需要按照作用域链去寻找即可。
示例一：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
xo = 'alex';function Func(){ var xo = "seven"; function inner(){ console.log(xo); } return inner;}var ret = Func();ret();// 输出结果： seven |
上述代码，在函数被调用之前作用域链已经存在：
- 全局作用域 -> Func函数作用域 -> inner函数作用域
当执行【ret();】时，由于其代指的是inner函数，此函数的作用域链在执行之前已经被定义为：全局作用域 -> Func函数作用域 -> inner函数作用域，所以，在执行【ret();】时，会根据已经存在的作用域链去寻找变量。
示例二：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
xo = 'alex';function Func(){ var xo = "eirc"; function inner(){ console.log(xo); } xo = 'seven'; return inner;}var ret = Func();ret();// 输出结果： seven |
上述代码和示例一的目的相同，也是强调在函数被调用之前作用域链已经存在：
- 全局作用域 -> Func函数作用域 -> inner函数作用域
不同的时，在执行【var ret = Func();】时，Func作用域中的xo变量的值已经由 “eric” 被重置为 “seven”，所以之后再执行【ret();】时，就只能找到“seven”。
示例三：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
xo = 'alex';<br>function Bar(){ console.log(xo);}function Func(){ var xo = "seven"; return Bar;}var ret = Func();ret();// 输出结果： alex |
上述代码，在函数被执行之前已经创建了两条作用域链：
- 全局作用域 -> Bar函数作用域
- 全局作用域 -> Func函数作用域
当执行【ret();】时，ret代指的Bar函数，而Bar函数的作用域链已经存在：全局作用域 -> Bar函数作用域，所以，执行时会根据已经存在的作用域链去寻找。
DOM事件优先级
事件：
1、this，当前触发事件的标签
2、全局事件绑定 window.onKeyDown = function(){}
3、event，包含事件相关内容
4、默认事件
自定义优先：a,form 这些标签，绑定自定事件优先执行，再到标签默认事件
默认优先：checkbox 这个例外，是checkbox默认事件优先于自定义事件执行。
JQUERY 部分
例子：点按扭响应表格编辑。
如果
如果@A与@B先后次序改变，创建可编辑文本框显示内容为 undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态</title>
<link href="css/comme.css" rel="stylesheet" type="text/css"/>
</head>
<body> <input type="button" onclick="checkabc();" value="编辑"/>
<table border="2" style="margin-left: 100px;margin-top: 50px;">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead>
<tbody id="tt1">
<tr>
<td><input type="checkbox"/> </td>
<td edit="true" id="abc">v1</td>
<td>v11</td>
<td edit="true" edit-type="select" sel-val="1" globa-key="STATUS">在线</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td edit="true">v1</td>
<td>v11</td>
<td edit="true" edit-type="select" sel-val="2" golbal-dey="STATUS">下线</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td edit="true">v1</td>
<td>v11</td>
<td edit="true" edit-type="select" sel-val="1" golbal-dey="STATUS">在线</td>
</tr> </tbody> </table> <script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function checkabc(){
//通过选择器先找到#tt1 再通过find 找#abc 这个id ，最后通过each内调用 回调函数，把位置 定到要编辑table格内
$("#tt1").find("#abc").each(function(){
//$(this).text()先获取单元格内信息 @A
var orgin_value = $(this).text();
//使用文件形式创建html内容。@B
var temp = "<input value='"+ orgin_value+"' />";
//如果@A与@B先后次序改变，创建可编辑文本框显示内容为 undefine
$(this).html(temp); }) } </script> </body>
</html>
DOM 与jquery互换
DOM 添加上 $变成jquery，反过来jquery 对象取[0] 这个标签就转为DOM元素。
事件：
终止执行事件
<input typ="submit()' onclient = 'return check();' #当return 为flase就表示终止。不再捃后台事件。
事件绑定
1、如何使用jQuery绑定
$('.item .title').click(function(){
// this,$(this)
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
});
$('.item .title').bind('click', function () {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
})
2、当文档加载完毕后，自动执行
$(function(){
...
});
3、延迟绑定 实现原理由 委托 delegate 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="Add();" />
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
/*
$('li').click(function () {
alert($(this).text());
});
*/
$("ul").delegate("li","click",function(){
alert($(this).text());
});
}); function Add(){
var tag = document.createElement('li');
tag.innerText = '666';
$('ul').append(tag);
} </script>
</body>
</html>
4、return false; 当前事件如果 return false 后面事件就不执行 这个机制在jqurey 中也一样执行
Python 【第八章】：JavaScript 、Dom、jQuery的更多相关文章
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
- 【Python全栈-JavaScript】jQuery事件
jQuery事件 一.页面载入 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度. 简单地说,这个方法纯粹是对向 w ...
- Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】
一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- Python 一路走来 DOM & Jquery
DOM 查找: 直接查找 间接查找 —getElementById ...
- JavaScript,Dom,jQuery
JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript 语言的规则编写相应代码,浏览器可以解释出相应的处理. 注 ...
- Python全栈-JavaScript】jQuery工具
jQuery工具 一.jQuery.browser.version 显示当前 IE 浏览器版本号. if ( $.browser.msie ) alert( $.browser.version ); ...
- 【Python全栈-JavaScript】jQuery效果
jQuery效果 jQuery 效果函数: 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
- Python：Day46 Javascript DOM
history对象: History 对象包含用户(在浏览器窗口中)访问过的 URL.窗口之间是相互独立的. <input type="button" onclick=&qu ...
- python2.0_s12_day13_javascript&Dom&jQuery
今天主要内容:JavaScriptDomjQuery http://www.cnblogs.com/wupeiqi/articles/5369773.html 今天主要内容大致了解:javascrip ...
随机推荐
- java文档注释--javadoc的用法
1.前言 Java中有三种注释方式.前两种分别是 // 和 /* */,主要用于代码的注释,以此来方便代码的可读性.第三种被称作说明注释或文档注释,它以 /** 开始,以 */结束,文档注释允许你在程 ...
- 手机端访问web调用数字键盘。
转自 http://www.webkfa.com/one4/w1937.html 最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel", ...
- vue2.0 非父子组件如何通信
1 利用父组件传递 A组件传递到父组件,再由父组件传递到B组件 2 利用新的vue实例 var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selecte ...
- SVG入门
这部分包括三个内容: 1. 基本图形 2. 基本属性 3. 基础操作API 基本图形 名称 描述 参数 图示 rect 定义一个矩形 x="矩形的左上角的x轴" y="矩 ...
- 使用 ExecuteMultiple 提高批量数据加载的性能
您可以使用 ExecuteMultipleRequest 消息在 Microsoft Dynamics CRM Online 2016 Update 和 Microsoft Dynamics CRM ...
- TFFS格式化到创建成功过程
True FFS内核编程 1.格式化FLASH 即使FLASH没有和块设备驱动绑定,也可对其进行格式化. tffsDevFormat (int tffsDriveNo, int formatArg); ...
- swift-分支
swift相当于OC的比较 if后的括号可以省略 if后只能接bool值 if后的大括号不能省略 let num1 = 5.0 let num2 = 4.0 let boo :Bool = true ...
- spring加载配置文件
spring加载配置文件 1.把applicationContext.xml直接放在WEB-INF/classes下,spring会采用默认的加载方式2.采用在web.xml中配置ContextLoa ...
- Java线程并发：知识点
Java线程并发:知识点 发布:一个对象是使它能够被当前范围之外的代码所引用: 常见形式:将对象的的引用存储到公共静态域:非私有方法中返回引用:发布内部类实例,包含引用. 逃逸:在对象尚未准备 ...
- 简单说下COALESCE这个日常使用的函数
COALESCE 作用是返回第一个非空的值. SELECT COALESCE(NULL,NULL,'A','CC') ---- A 原理的话其实也是相当于 case when A is not nul ...