jquery
jquery 是一个类库，不是框架。是最常用的。
jquery1.8.3 比较稳定。
在2.x以上不兼容ie6/7/8。
常用的 cdn 地址：
http://www.bootcdn.cn/jquery/
http://cdn.code.baidu.com/
bootstrap 是一款 html,css,js 框架，用于开发响应式布局，移动端优先的web项目。
bootstrap、jquery是前端基础框架，必须用得很熟练。
$符的两个用处：
1. 选择元素，如 $("div")
2. 创建元素，如 $("<div>") 或 $("<div></div>")
jq中的window.onload
写 jquery 的时候，首先要记得一个类似 window.onload 的函数。
$(document).ready(function(){})
这行代码尽量写上，比如写瀑布流时没有 window.onload 就会出错。
意思是等待 dom 数加载完毕后再执行下面的函数。
可以简写成：$(function(){})
虽然类似 window.onload ，但是与其相比，不同的是：
1. $(function(){}) 加载速度比较快。 几毫秒，
window.onload 比较慢， 十几毫秒。
2. $(function(){}) 可以在代码任何地方写任意个，
window.onload 不可以写多个。因为当有两个 window.onload 时会执行后面的那个而不执行前面的那个。
jq中的代码风格
1. 对于同一个对象，不超过三个操作的时候可以真接写在一行。
2. 对于同一个对象较多操作可以每个写一行。
3. 对于多个对象的少量操作，可以每个写一行，如果涉及子对象，可以适当首行缩进，添加注释。
jq和js混用
jquery 和原生js 有些不可以混用。
ecms基本方法，如循环，可以混用。
一般来说，dom和jquery对象的方法不能混用。
通过js中document.getElementById();等方法获取的对象是dom对象。
通过jquery包装后的对象称为jquery对象。
一般，dom对象和jquery对象不能使用对方的方法。
比如：
$("#box").html(); //获取id是box的元素内的html代码。是jquery特有的方法。
等同：
document.getElementById("box").innerHTML();
不能混用：
$("#box").innerHTML();
想要混用：添加下标，转换为dom对象，jq获取的对象是数组。
$("#box")[0].innerHTML();
由于jq对象无法使用dom对象的方法，dom对象也无法使用jq对象方法。但jq中若没有封闭自己要方法时，
那就要原生js写。此时就要把jq对象转为dom对象。
jq对象转dom对象有两个方法，原理都一样。
也就是 [index] 和 get(index) 。
因为 jq 对象是一个数组对象。
例子：
$cr=$("#cr"); //jqury对象
var cr=$cr[0]; //转换成了dom对象，方法1
var cr=$cr.get(0); //转换成了dom对象，方法2
dom对象转为jq对象：
对于一个dom对象来说，只需要用$()把dom对象包裹起来，就可以获取一个jq对象。
例子：
var cr=document.getElementById("box"); //dom对象
var cc=$(cr); //现在cc就是jq对象
一般情况下，jq对象命名时在前面加上$，以区分dom对象和jq对象。
jq选择器
与css中的选择器基本相似。
基础选择器
id选择器： $("#box")
元素，标签选择器： $("div")
class，类名选择器： $(".list")
通配选择器： $("*")
群组选择器： $("div1,div2,div3,...")
包含选择器： $("div span")
其他选择器
$("#box>div")
在给定的元素下匹配子元素。
在id为box的元素内选取所有的div子元素。
$(".box+div")
匹配所有紧接着第一个元素后的第二个元素。
匹配的有跟在类名是box后面的div元素。
<div class="box"></div>
<p style=" 100px; height: 40px; background: rgb(255, 0, 0);">你好1</p>
<p>你好2</p>
<script>
//匹配“你好1”
$('.box+p').css({
'100px',
height:'40px',
background:'#f00'
})
</script>
|
$(".box~div")
匹配类名是box的元素后面的所有div的兄弟元素。
他们必须是同级。
<div class="box2">
<p>你好1</p>
</div>
<p>你好2</p>
<div class="box3"></div>
<p style=" 100px; height: 40px; background: rgb(255, 0, 0);">你好3</p>
<script>
//匹配“.box3”后面的p标签
$('.box3~p').css({
'100px',
height:'40px',
background:'#f00'
})
</script>
|
基本过滤选择器
$("div:first")
获取第一个元素
获取第一个div元素
$("div:last")
获取最后一个元素
获取最后一个div元素
$("div:not(.two)")
匹配所有class不是tow的元素
$("div:even")
匹配所有索引值为偶数的div元素。从0开始计数。
<ul>
<li style="color: rgb(255, 0, 0);">index0</li>
<li>index1</li>
<li style="color: rgb(255, 0, 0);">index2</li>
<li>index3</li>
</ul>
<script>
//偶数行变色
$("li:even").css({
color:'#f00'
})
</script>
|
$("div:odd")
匹配所有索引值为奇数的div元素。从0开始计数。
$("div:eq(3)")
匹配一个给定索引值的元素。
匹配下标等于3的div元素，eq=equa=等于。
$("div:gt(3)")
匹配所有大于给定索引值的元素。gt=>=大于=greater than
选择下标大于3的div元素。
$("div:lt(3)")
匹配下标小于3的元素。lt=<=大于=less-than
$(":header")
匹配标题元素： h1,h2,h3,h4,h5,h6
$("div:animated")
匹配所有正在执行动画的div元素
内容过滤选择器
$("div:contains(你好)")
匹配所有文本含有“你好”的div元素
$("div:empty")
匹配所有不包含子元素或者文本是空的div元素。
$("div:has(.box)")
选取含有class为box元素的div元素。
$("div:visible")
匹配所有可见的div元素
属性选择器
$("div[title]")
选择含有某个属性的元素
选取含有属性为title的div元素。
$("div[title=test]")
选择含有属性title并用值为test的元素。
$("div[title!=test]")
选择含有属性title，但值不为test的元素。
1. 不含有title
2. 含有title，但值不为test
$("div[title^=te]")
匹配title属性是te开头的div元素。
$("div[title$=st]")
匹配title属性是st结尾的div元素。
$("div[title*=s]")
匹配title属性是包含s的div元素。
子元素过滤选择器
$("ul li:nth-child(2)")
每个ul中的第2个li
$("ul li:first-child")
每个ul中的第1个li
$("ul li:last-child")
每个ul中的最后1个li
表单对象选择器
$(":input")
匹配input, testarea, select, button 。
$(":text")
单行文本输入框
$(":password")
密码框
$(":radio")
单选按钮
$(":checkbox")
复选框
$(":submit")
提交按钮
$(":reset")
重置按钮
$(":button")
普通按钮
$(":selected")
选中的 option 元素。
jq中的事件
jq 中的点击事件是 click()，js 中是 onclick()。
jq 中的事件都没有 on 。
如果要 on 怎么做？使用绑定事件。
属性操作
设置或返回元素的属性值。
返回文档中所有图像的src属性。
$("img").attr("src");
设置所有图像的src属性和alt属性。
方法和 css() 相同。
$("img").attr({
src:"test.jpg",
alt:"img"
})
删除所有图像中的src属性。
$("img").removeAttr("src");
prop() 和 attr()
都是获取和设置元素属性。
prop用于处理html标签本身自带的属性。
attr用于处理自定义属性。
例子：
<a href="#" myattr="nihao">你好</a>
<script>
$("a").attr("myattr") // nihao
$("a").prop("myattr") // undefined
</script>
|
window.onload 必须等待负面中所有加载内容，比如图片、链接等加载完才执行，所以速度慢。
$(document).ready() 是所有dom结构加载完后才执行，可能dom元素关联的东西并没有加载完。
常见的一些属性和值的读写函数。
html() 相当于 innerHTML();
attr() 和 prop() 。attr可以获取自定义属性。 prop 最好用来获取自身属性。
width() 和 height() 读写元素大小，没有单位
css() 读写元素css值，有单位
offset() 读写元素的 left 和 top 值，如 obj.offset().left
val() 读写表单控件元素的value
jq中的dom操作
创建节点
var $li=$('<li></li>')
var $ul=$('ul');
|
把li插入到ul中：
$ul.append($li); //插入到$ul中的后面
$ul.prepend($li); //插入到$ul中的前面
$li.insertAfter($two_li); //插入到$two_li后面
$li.insertBefore($two_li); //插入到$two_li前面
删除元素 obj.remove();
克隆元素 clone();
替换 objA.replaceWith(objA) 如 $('p').replaceWith('你好') ，把p标签换为strong标签。
包裹 wrap() 如 $('string').wrap('') ，用b元素把string元素包起来。
常用的筛选条件
$('p').has('b') //包含b元素的p元素
$('p').hasClass('nihao') //选择类名是nihao的p元素，返回 Boolean 值。
$('.box').children('p') //只选择.box类名中的子元素，不含有孙元素
next() 下一个兄弟元素。
prev() 上一个兄弟元素。
siblings() 所有的兄弟元素。
parent() 一个父元素。
parents() 父元素集合。
addClass() //添加类名
removeClass() //删除类名
toggleClass() //有类名则添加，没有就不添加
find() 寻找子元素。
链式操作
选中某个元素后，对它进行某种操作。
jquery允许把所有操作连接在一起写出来。
如：
$('div').find('p').eq(2).html('你好')
为什么它能进行链式操作？
因为每步 jqurey 操作都返回一个 jqurey 对象。
jq事件
既然
window.onload=function(){}
$(function(){}) 不同。
它是 $(document).ready(function(){}) 的简写。
那在jq中与widow.onload相似的是什么呢？
答案是：
$(window).load(function(){})
focus 得到焦点
blur 失去焦点
change 表单值发生改变并失去焦点时，只适应于 input标签的text属性，textarea 标签，select 三个标签。
click 单击
dblclick 双击
keydown 按下键盘
keyup 松开键盘
load 元素加载完毕
mosedown 按下鼠标
moseup 松开鼠标
mosemove 鼠标在元素内移动
moseover 鼠标进入
mouseout 鼠标离开
resize 浏览器窗口大小变化
scroll 滚动条位置变化