jQuery简介和基础
一、函数变量的作用域
1.变量的作用域实在声明时决定的而不是调用执行时决定
<script>
var a=6,b=7;
function t() {
// var a=3,b=5;
console.log(a+'--'+b);
}
t();
</script>
2.作用域
<script>
var a=8,b=9;
function sum() {
// var a=3,b=5;
function p() {
// var a=4,b=6;
console.log(a+b);
}
p();
}
sum();
</script>
二、词法分析
1.函数执行前，会进行预编译，这个预编译的过程就是词法分析
会形成一个活动对象，Active Object AO
分析三个内容：
1.分析函数的参数
2.分析函数的变量声明
3.分析函数内函数声明表达式
var str ='global';
function t() {
console.log(str); // unfined
var str = 'local';
console.log(str); // local
}
t();
-----------------------------------------------------
<script>
function t(age) {
console.log(age);
var age = 99;
console.log(age);
function age(){
}
console.log(age)
}
t(5);
//预编译，activeobject AO
/*
* 1.分析函数参数
* AO.age = undefined
* 1.2 AO.age = 5
* 2.分析函数变量
* 因为AO有age变量，所以不做任何处理(没有的话就赋值)
* 3.函数声明表达式
* AO.age = function age(){}
* */
</script>
三、jQuery
DOM：
1.直接查找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
2.间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
1.jQuery是什么
jQuery：帮我们封装好了DOM操作，相当于python中的模块(类库)
2.jQuery的特点
1.强大的选择器---类似与css的选择器
2.强大的DOM操作
3.Ajax封装
4.版本兼容行好
3.jQuery版本：
1.xxx --- 1.12.4(1.12大版本)
2.xxx
3.xxx
4.选择器
------基本选择器
ps:
jQuery --> DOM
$("#test")[0]
DOM --> jQuery
var mydom = document.getElementById('test')
$(mydom)
1.ID选择器
$('#test') == document.getElementById('test')
2.标签选择器
$('div') == document.getElementsByTagName('div')
3.class选择器
$('.class') == document.getElementsByClassName("class")
4.组合选择器
$('div,span')
------层级选择器
1.祖先--子孙 *有疑问(括号中是否可以是上面选择器中的任意)
$('form input')
2.parent > childNodes 只找儿子
$(' form > input')
------基本筛选器
:first 获取匹配的第一个元素
$('li:first') 获取li标签的第一个元素
:last 获取匹配的最后一个元素
$('li:last') 获取li标签的最后一个元素
:eq(n) 获取匹配的第n个元素
$('li:eq(3)') 获取li标签的第4个元素
------属性选择器
<input type="text" name="username"/>
$('input[type="text"]')
5.jQuery的方法
1.$(this) 相当于js中的this
2.each 相当于循环操作
3.prop 给标签设置属性，例 $(this).prop('checked',true)
给一个参数为获取值，两个值为设置值
4.三元运算
例: 4 > 3 ? true : false
5.筛选器
1.next() 获取紧邻的下一个元素
nextAll()
nextUtil('.content1') 直到XXX停止
2.prev() 获取紧邻的上一个元素
prevAll()
prevUtil('.content1') 直到XXX停止
3.children() 获取所有的子元素
$('.info').children() ---获取所有的子元素
$('.info').children('.content2') ---获取指定的子元素
4.parent() 获取父元素
$('content2').parent()
5.siblings() 获取兄弟元素
$('content2').parent().children('.content2').siblings()
5.设置样式
css() 传一个参数为获取值，传两个值为设置值
css('display')
css('display','block')
6.动画
1.$('img').show(1000) 显示隐藏的 1000为慢慢显示
2.$('img').hide(1000) 隐藏显示的 1000为慢慢隐藏
3.$('img').toggle('slow') 显示隐藏，隐藏显示。slow变慢
更多：http://jquery.cuishifeng.cn/
7.样式
1.$("XXX").css("display",none) 设定样式
2.addClass() 添加样式(要求样式存在，即写在css里面)
3.removeClass() 移除样式(同上)
4.hasclass() 判断有没有样式
8.文本操作
1.设置text的值
$('xxx').text() 不传参为获取
$('xxx').text('helei') 传参为设置
2.input系列框里边的值(同上)
$('xxx').val()
$('xxx').val('helei')
9.属性操作
$('xxx').attr(""); 属性选择器，传一个参数为取值
$('xxx').attr("",""); 属性选择器，传两个值为赋值
$('xxx').removeAttr('key') 输入属性的key，可以删除属性
在操作关于input系列(radio,checkbox) 选中和取消不能采用attr来进行设置
3版本修复了这个bug
prop()专门是用来对input系列(radio,checkbox)
$('xxx').prop()
10.文档操作
append() 向选中的元素内部的后面添加元素
$("ul").append($("<li>某某某</li>"))
appendTo() 把元素插到某个元素的后面
$("<li>某某某</li>").appendTo($("ul"))
prepend() 向选中的元素内部的前面添加元素
prependTO() 把元素插到某个元素的前面
外部插入
after() 向选中元素外部的后面添加元素
before() 向选中元素外部的前面添加元素
删除
empty() 将元素内部的内容删除
remove() 将元素的标签删除
11.表单对象属性
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:disabled")
[ <input name="email" disabled="disabled" /> ]
:checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
:select 匹配所有选中的option元素
12.事件
DOM:
onclick
onblur
onfocus
ondblclick
onmousedown
onmouseover
onkeydown
onkeyup
jquery:
click
blur
focus
dblclick
mousedown
mouseover
keydown
keyup
13.绑定事件的其他方式
$('xxx').on("click",function(){})
$('xxx').off("click",function(){})
$('xxx').bind("click",function(){})
$('xxx').unbind("click",function(){})
$('xxx').delegate('xxx','click',function(){})
$('xxx').undelegate('xxx','click',function(){})
14.阻止事件发生：
return false
