python之JS词法分析和Jquery介绍并使用
Python学习：JS词法分析和Jquery介绍并使用
一、函数变量的作用域：
变量的作用域是在声明时决定的而不是调用执行时决定
作用域链：
二、词法分析：
函数执行前，会进行预编译，这个预编译的过程就是词法分析
会形成一个活动对象，Active Object AO
分析三个内容：
1.分析函数的参数
AO.age = undefined
1.2 AO.age = 5
2.分析函数的变量声明
如果有，不做任何处理，如果没有的话，AO增加这个属性
3.分析函数内函数声明表达式
AO.age = function(){}
两道神奇的面试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
var str = "global"; //AO1 AO1.str
function t(age){
console.log(str); // undefined
var str = "locale";
// console.log(str); // locale
}
t();
// 预编译，形成AO对象：
/**
* 1.f分析函数的参数：
* 如果没有参数的话，AO对象上没有任何属性
* Ao.age = undefined
* 2.分析函数的变量声明：
* AO.str = undefined
*
* 3.分析函数的函数声明表达式：
* 无
* AO.sum = functioon(){}
* **/
/**
* AO.str = "lcoale"
* **/
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function t(age) {
console.log(age); // function age(){}
var age = 99;
console.log(age); // 99
function age() {
}
console.log(age); // 99
}
//t(5);
// 预编译：activeobject AO
/**
* 1.分析函数参数：
* AO.age = Undefined
* 1.2 AO.age = 5
*
* 2.分析函数变量：
* 如果AO上有值，则不做处理，没有，AO加上
*
* AO.age = 5
*
* 3.函数声明表达式
* AO.age = function(){}
* **/
</script>
</body>
</html>
三、JQuery：
DOM：
1.直接查找：
2.间接查找
3.1 Jquery是什么？
其实python中的模块 类库
import time
time.sleep()
3.2 Jquery的特点？
- 强大选择器 --- 类似于css的选择器
- DOM操作
- Ajax封装
- 版本兼容性好
3.3 JQuery的版本：
1.x.x ---- 1.12.4
2.x.x
3.x.x
Jquery手册点击这里
jquery-1.12.4.zip
引入jquery
<script src="jquery.js"></script>
/*需要在真正的JS前面添加，因为浏览器是从上到下执行的*/
小诀窍：去版本号，类似软链
软链好处：升级，回滚都方便
3.4 基本选择器：
ps:Jquery转化成dom
jquery --> DOM $("#test")[0]
DOM ----->jquery $(DOM对象)
1.id选择器：
$('#test') === document.getElementById('test')
2.标签选择器
$("div")
3.class选择器
$('.class')
4.组合选择器
$('div,p,span')
5. 祖先 --- 子孙 层级选择器
//form 下的所有input标签
$('form input')
6. parent > child 只找一级
// form 下的一级input标签
$('form > input')
7. :first :last :eq()
//first获取第一个元素
$("li:first") // 获得到所有的li再取第一个元素
//last 获取最后一个元素
//eq(2)获取第三个元素equal
8.属性选择器
<input type="text" name='username'/>
$("input[type='text']")
小插件html emmet
table>tr*3>td{$}*3 //按tab键盘
实例：表格的全选 反选和取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" onclick="SelectAll();">
<input type="button" value="取消" onclick="CancelAll();">
<input type="button" value="反选" onclick="ReverseAll();">
<table border="1px" width="400px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
<script src="jquery.js"></script>
<script>
function SelectAll(){
$("input[type='checkbox']").prop("checked",true);
}
function CancelAll(){
$("input[type='checkbox']").prop("checked",false);
}
function ReverseAll(){
/**
* js的循环：
* for(var i=0;i<length;i++){
* }
*
* for(var i in dict_info){
* }
* **/
$("input[type='checkbox']").each(function () {
// each循环语句。
// console.log(1);
// console.log($(this));
var s = $(this).prop("checked");
// console.log(s);
// this表示本身，类自己。
// prop("checked")一个参数获取值
// prop("checked",true)两个参数赋值
if(s){
$(this).prop("checked",false);
}else{
$(this).prop("checked",true);
}
/**
* s = 4 > 3 ? true : false
* 写成一行，用三元运算
* **/
$(this).prop("checked") ? $(this).prop("checked",false) : $(this).prop("checked",true);
});
}
</script>
</html>
3.5 筛选器：
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="info">
<div class="content1">content1</div>
<div class="content2">content2</div>
</div>
<div class="info2">
<div class="content1"></div>
<!--<div class="content3"></div>-->
</div>
</body>
<script src="jquery.js"></script>
<script>
</script>
</html>
1.next ---- 获取紧邻的下一个元素
nextAll //查找当前元素之后所有的同辈元素。
nextUtil // 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$(".content1").next()
2.prev ----- 获取紧邻上一个元素
prevAll //查找当前元素之前所有的同辈元素
prevUtil //查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$(".content1").prev()
3.children() --- 获取所有的子元素
$(".info").chidren()
$(".info").chidren(".content1")
4.parent() ---- 获取父元素
$(".content1").parent()
$(".content1").parent().chidren(".content1")
5.siblings --- 获取兄弟元素
$(".content1").parent().chidren(".content1").siblings()
实例：左侧菜单选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.info{
width:400px;
}
.item{
/*height:34px;*/
}
.header{
/*line-height: 34px;*/
background-color: burlywood;
cursor: pointer;
}
.content{
display: none;
}
</style>
<body>
<div class="info">
<div class="item">
<div class="header">菜单一</div>
<div class="content">内容一</div>
<div class="content">内容一</div>
<div class="content">内容一</div>
</div>
<div class="item">
<div class="header">菜单二</div>
<div class="content">内容二</div>
<div class="content">内容二</div>
<div class="content">内容二</div>
</div>
<div class="item">
<div class="header">菜单三</div>
<div class="content">内容三</div>
<div class="content">内容三</div>
<div class="content">内容三</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>
$(".header").click(function(){
$(this).nextAll().css("display","block");
$(this).parent('.item').siblings('.item').children('.content').css("display","none");
});
</script>
</html>
3.6 动画
fadeIn()
fadeOut()
slideDown()
slideUp()
实例：动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="ju.jpg" alt="" style="display: none">
</body>
<script src="jquery.js"></script>
<script>
// $("img").show(1000); // 时间是以毫秒为单位
// $("img").hide(1000);
// $("img").toggle("slow");
// $("img").fadeIn(1000);
// $("img").fadeOut(1000);
function test(){
$("img").slideToggle(1000)
}
setInterval(test,3000);
</script>
</html>
3.7 样式操作：
$("xxx").css("display",none); // 设置单个样式
addClass() // 添加样式
removeClass() // 移除样式
hasClass() // 判断有没有样式
实例：开关灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.on{
background-image: url('on.jpg');
}
.off{
background-image: url('off.jpg');
}
div{
width:108px;
height:144px;
}
</style>
<body>
<div id="myimg" class="on off" onclick="bright();">
// off 把on覆盖了
</div>
</body>
<script src="jquery.js"></script>
<script>
function bright(){
// $("#myimg").removeClass("off");
// $("#myimg").addClass("on");
/**
* 如果有off 去掉off 灯亮
* 如果没有off 加上off 灯灭
* **/
if($("#myimg").hasClass('off')){
$("#myimg").removeClass("off");
}else{
$("#myimg").addClass("off");
}
}
</script>
</html>
3.8 文本操作：
$("xxx").text("content")
// text有参数就是设置，没参数就是获取值
input系列框里面的值，
$("xxx").val("content")
// val有参数就是设置，没参数就是获取值，input的value属性
$("xxx").html()
实例：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.hide{
display: none;
}
.show{
display: block;
}
.shadow{
position: fixed;
top:0;
right:0;
left:0;
bottom:0;
opacity:0.6;
background-color: #000;
z-index: 10;
}
.modal{
position: fixed;
top:10%;
left:20%;
right:20%;
bottom:30%;
background-color: wheat;
z-index: 11;
}
</style>
<body>
<input type="button" onclick="addEle();" value="添加"/>
<table border="1" width="400px" id="info">
<tr>
<td target="ip">192.168.1.1</td>
<td target="port">80</td>
<td>
<input type="button" value="编辑" class="edit"/>
</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
<tr>
<td target="ip">192.168.1.2</td>
<td target="port">81</td>
<td>
<input type="button" value="编辑" class="edit"/>
</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
<tr>
<td target="ip">192.168.1.3</td>
<td target="port">82</td>
<td>
<input type="button" value="编辑" class="edit"/>
</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
</table>
<div class="modal hide">
主机IP：<input type="text" value="" name="ip"/><p>
端口号：<input type="text" value="" name="port"/><p>
<input type="button" value="确认">
<input type="button" value="取消" onclick="cancelModel()">
</div>
<div class="shadow hide"></div>
</body>
<script src="jquery.js"></script>
<script>
function addEle(){
$(".hide").css("display","block");
}
function cancelModel(){
$(".hide").css("display","none");
}
$(".edit").click(function(){
$(".hide").css("display","block");
var tds = $(this).parent().siblings('td');
// console.log(tds);
tds.each(function(){
var k = $(this).attr('target');
// 自定义参数target里的值和input里的name属性一样
var v = $(this).text();
console.log(k + '---' + v);
var v1 = "input[name = '";
var v2 = "']";
var tmp = v1 + k + v2;
// console.log(tmp);
$(tmp).val(v);
});
//获取ip和port值
// var ip = $(tds[0]).text();
// var port = $(tds[1]).text();
//// console.log(ip + '----' + port);
// // 设置ip和port到模态框内
// $("input[name='ip']").val(ip);
// $("input[name='port']").val(port);
})
</script>
</html>
3.9 属性操作
$("xxx").attr("alex","sb"); //赋值--自定义属性
$("xxx").attr("target");
$("xxx").removeAttr("target") // 移除属性
在操作关于input系列【radio checkbox】 我们选中或者取消，不能采用attr来进行设值 ----1.X.X版本
3.X.X 版本修复了这个bug
---prop()专门是用来对input【radio checkbox】
$("xxx").prop()
实例：tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.item{
height:38px;
line-height: 38px;
background-color: #204982;
width:300px;
}
.menu{
float: left;
border-right: 1px solid green;
padding:0 10px;
color:white;
cursor: pointer;
}
.hide{
display: none;
}
.active{
background-color: #2459a2;
}
</style>
<body>
<div style="width: 700px;margin: 0 auto;">
<div class="item">
<div class="menu active" a="1">菜单一</div>
<div class="menu" a="2">菜单二</div>
<div class="menu" a="3">菜单三</div>
</div>
//自定义属性，要一一对应
<div class="content">
<div class="info" b="1">内容一</div>
<div class="info hide" b="2">内容二</div>
<div class="info hide" b="3">内容三</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script>
$(".menu").click(function(){
$(this).addClass('active').siblings().removeClass('active');
var v = $(this).attr('a'); // 1, 2, 3
$(this).parent().siblings().children("[b='"+ v +"']").removeClass("hide").siblings().addClass("hide");
});
// 找到item下的兄弟content，然后找content下的children的对应自定义属性，去hide显示出来。然后，其他的加hide隐藏。
</script>
</html>
3.10 文档操作：
// append() --- 往选中的元素内部的后面添加元素
// appendTo() --
// 上两个区别就是一个是：主语谓语 一个是：谓语宾语
// 也就是一个插谁，一个是被谁插
// prepend() --- 往选中的元素的前面添加元素
// prependTo() ---
// after --- 往选中元素的外部的后面进行添加
// before --- 往选中元素的外部的前面进行添加
// empty() --- 将元素内部的内容删除
// remove() ---将元素的标签删除
实例：添加“艺术家”元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>艺术家们</li>
</ul>
<br>
<input type="button" onclick="add();" value="向ul中添加一个li元素" />
<input type="button" onclick="del();" value="删除元素的内容" />
</body>
<script src="jquery.js"></script>
<script>
function del(){
// $("ul").empty();
$("ul").remove();
}
function add(){
// var myli = $("<li>闫帅</li>");
// $("ul").append(myli);
// var myli = $("<li>苍老师</li>");
// myli.appendTo($("ul"));
// var myli = $("<li>alex</li>");
// $("ul").prepend(myli);
var myspan = $("<span>感谢日本艺术家们 alex</span>");
$("ul").before(myspan);
}
</script>
</html>
实例：左右选择框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
select{
width:150px;
height:300px;
}
</style>
</head>
<body>
<select name="fruit" id="fruit" multiple></select>
<input type="button" value="<---" onclick="toleft();">
<input type="button" value="<===" onclick="totalleft();">
<input type="button" value="--->" onclick="toright();">
<input type="button" value="===>" onclick="totalright();">
<select name="fish" id="fish" multiple>
<option value="">大鱼</option>
<option value="">小鱼</option>
<option value="">虾米</option>
<option value="">甲鱼</option>
<option value="">咸鱼</option>
<option value="">苹果</option>
<option value="">香蕉</option>
<option value="">菠萝</option>
<option value="">西瓜</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
function toleft(){
// append()
$("#fish option:selected").appendTo("#fruit");
}
// "#fish option:selected" 把选到的全部选出来
function totalleft(){
$("#fish option").appendTo("#fruit");
}
function toright(){
$("#fruit option:selected").appendTo("#fish");
}
function totalright(){
$("#fruit option").appendTo("#fish");
}
</script>
</html>
3.11 事件
DOM:onclick jquery：click
ondbclick
onblur
onfocus
onmouseover
onmouseout
onkeyup
onkeydown
$("xxx").on("click",function(){})
$("xxx").off("click",function(){})
$("xxx").bind("click",function(){}) // 不常用，或者根本不用
$("xxx").unbind("click",function(){}) // 不常用，或者根本不用
$("xxx").delegate("xx","click",function(){}) // 不常用，或者根本不用
阻止事件发生：
return false
页面加载事件：
$(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
$(document).ready(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
实例：文本框操作--聚焦focus和失去焦点blur
placeholder="qingshu" 灰色字样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" placeholder="qingshu" >
</body>
<script src="jquery.js"></script>
<script>
$("input[type='text']").focus(function(){
var v = $(this).val();
if(v == "请输入关键字"){
$(this).val("");
}
});
$("input[type='text']").blur(function(){
var v = $(this).val();
if(v == ""){
$(this).val("请输入关键字");
}
})
</script>
</html>
实例：隔行换色--mouseover--mouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="400px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
<script src="jquery.js"></script>
<script>
$("tr").mouseover(function(){
$(this).css("background-color","red");
});
$("tr").mouseout(function(){
$(this).css("background-color","white");
})
</script>
</html>
实例：阻止事件发生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" onclick = "return dianji();">走一波</a>
</body>
<script src="jquery.js"></script>
<script>
function dianji(){
alert('禁止发生');
return false; // 阻止事件发生
}
</script>
</html>
实例：提交表单--阻止事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" id="info" method="get">
用户名：<input type="text" desc="username"><br>
密码：<input type="password" desc="password"><br>
邮箱：<input type="text" desc="mail"><br>
地址：<input type="text" desc="addr"><br>
<input type="submit" value="提交" >
</form>
</body>
<script src="jquery.js"></script>
<script>
$(":submit").click(function(){
var flag = true;
$(".err").remove();
$("input[type='text'],input[type='password']").each(function(){
var v = $(this).val();
if(v.length == 0 ){
flag = false;
var desc = $(this).attr("desc");
$(this).after($("<span class='err'>" + desc + "必填</span>"));
// return false;
}
});
return flag;
})
</script>
</html>
实例：页面的载入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
<script>
// 在dom加载完成时，才运行函数，两种 方式
$(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
$(document).ready(function(){
$("div").click(function(){
console.log("dsadsadsa");
})
});
</script>
</head>
<body>
<div>
dsjandksandksank
</div>
</body>
</html>
