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