jquery
JS作用域
变量的作用域是在声明时决定的而不是调用执行时决定
var a=8,b=9;
function sum(){
// var a=3,b=5;
function p(){
// var a=4,b=6;
console.log(a+b); // 17
}
p();
}
sum();
JS词法分析
函数执行前，会进行预编译，这个预编译的过程就是词法分析
会形成一个活动对象，Active Object AO
分析三个内容：
1.分析函数的参数
AO.age = undefined
1.2 AO.age = 5
2.分析函数的变量声明
如果有，不做任何处理，如果没有的话，AO增加这个属性
3.分析函数内函数声明表达式
AO.age = function(){}
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"
* **/
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(){}
* **/
JQuery
DOM：
1.直接查找：
2.间接查找
Jquery是什么？
其实python中的模块 类库
import time
time.sleep()
Jquery的特点？
1. 强大选择器 --- 类似于css的选择器
2. DOM操作
3. Ajax封装
4. 版本兼容性好
JQuery的版本：
1.x.x ---- 1.12.4
2.x.x
3.x.x
基本选择器：
ps:
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')
6. parent > child
$('form > input')
7. :first :last :eq()
8.属性选择器
<input type="text" name='username'/>
$("input[type='text']")
实例：表格的全选 反选和取消
筛选器：
1.next ---- 获取紧邻的下一个元素
nextAll
nextUtil
2.prev ----- 获取紧邻上一个元素
prevAll
prevUtil
3.children() --- 获取所有的子元素
4.parent() ---- 获取父元素
5.silbings --- 获取兄弟元素
实例：左侧菜单选择
动画
fadeIn()
fadeOut()
slideDown()
slideUp()
样式操作：
$("xxx").css("display",none);
addClass() ---- 添加样式
removeClass() --- 移除样式
hasClass() ---- 判断有没有样式
实例：开关灯效果
文本操作：
$("xxx").text("dsadsa")
input系列框里面的值，
$("xxx").val("dsadsa")
$("xxx").html()
属性操作
$("xxx").attr("alex","sb"); //赋值
$("xxx").attr("target");
$("xxx").removeAttr("target")
在操作关于input系列【radio checkbox】 我们选中或者取消，不能采用attr来进行设值 ---- 1版本
3 版本修复了这个bug---
prop()专门是用来对input【radio checkbox】
$("xxx").prop()
文档操作：
append() --- 往选中的元素内部的后面添加元素
appendTo() --
prepend() --- 往选中的元素的前面添加元素
prependTo() ---
after --- 往选中元素的外部得后面进行添加
before --- 往选中元素的外部得前面进行添加
empty() --- 将元素内部的内容删除
remove() ---将元素的标签删除
事件
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");
})
});
参考：http://jquery.cuishifeng.cn/
Jquery示例参考：https://github.com/wangyufu/jquery_example
