一.history对象
1.该对象下的三个函数一个属性
,history.go(1)历史网页前前一页，history.go(0)对当前页面刷新，history.go(-1)网页后退
history.forword()网页前进，history.back()网页后退
history.length 当前网页有多少个历史标签
二.location 对象
1.href属性
location.href＝'目标网址'
2.reload()函数用来刷新
location.reload()
三.jQuery
1.简介
是对JavaScript的框架的类，jQuery对象就是$
基本语法：$(selector).action()
三.寻找元素（选择器，筛选器）
1.选择器
基本选择器 $('*') 所有dom元素 $('#id') $(".class") $('.class,p,div') 这里是同时选取多个元素
id是指I选择器的名字，.class是指类选择器的名称，
层级选择器 $('.outer div')div是.outer的后代 $('.outer>div)div是.outer的儿子
div是.outer向下的毗邻的兄弟 $('.outer~div')div是它的向下的兄弟
基本筛选器 $('li:first') $('li:eq(2)') $('li:even') $('li:,gt(1)') 元素下标是从0开始的
属性选择器 $('[id="div1"]') $('[alex="sb"][id]') 表示或者 寻找的是对应属性的元素被选定
表单选择器 $('[type="text"]')--------＞等价于 $(':text')
2.筛选器
过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasclass("test") 与上面的区别就是限定条件不是在字符串中
查找筛选器 $("div").children(".test") 这个是仅仅只找儿子 $("div").find(".test")是找满足的后代
$(".test").next() 向下寻找第一兄弟 $(".test").nextall() 寻找所有的兄弟 $(".test").nextUntil(2) 向下寻找第几个儿子但不包括括号里的兄弟
这里是向上找兄弟
这里是找寻父亲 $(".test").parents() 这里是找寻父元素直到html元素 $(".test").parentUntil()
找兄弟们
四.removeclass()移除类选择器 addclass()增加类选择器
五.两种给对象的事件绑定函数
this对象是发生该事件的元素
1.通过传参
<div onclick="func1(this) " > </div>
<script>
function func1(self){
self.getAttribute('id')}
</script>2.直接再JavaScript中绑定
<script>
window.getElementById('div2').onclick=function (){
this.setAttribute('width')='300px';
}
</script>六.Tab实例
<script>
function tab(self){
$(self).addclass('current).siblings().removeclads("current");//current是tab的css样式
var s=$(self).atter('xxx');
$("#"+s).removeclass('hide').siblings().addclass('hide');
}
</script>
<div class='current' xxx='c1'>标签1</div>
<div class='hide' id='c1'>内容一</div>attr() removeAttr(),prop() removeProp()对属性操作
一个参数是取属性，两个参数是修改
区别：对于自定义的属性attr()可以正常操作，prop（）则只能取
建议：自定义属性用attr() 系统的属性用prop()
八.两个遍历循环
全选与取消的实例
<script>
//li=[1,2,3,4,5]
dic={name:'gao',sex:'famale'}
//方法一
$.each(dic,function(i,x){
altet(i x);});
//方法二
$('table :checkbox').each(function(){
$(this).attr('checked','true');}
);
//实例
function selectall(){
$("table :checkbox").each( function(){
$(this).attr('checked','true');//注意this必须要加$才能使用
});View Code
九.添加标签
内部插入
append(),appendTo()都是插入父元素里面的最后面，即追加
preappend(),preappendTo()是插入到父元素的上面作为第一个儿子
$("parent").appent('子标签') $("chlien").apptendTo("parent")
外部插入
4种方法插入后都是作为兄弟
after(),before()
insertAfter() ,insertBefore()
十.删除元素
$("div").empty()
$("div").remove()
十一.clone克隆标签
var Clone-div=$("div").clone()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="condition">
<div class="icons" style="display:inline-block">
<a onclick="add(this);"><button>+</button></a>
</div>
<div class="input" style="display:inline-block">
<input type="checkbox">
<input type="text" value="alex">
</div>
</div>
</div>
<script src="js/jquery-2.2.3.js"></script>
<script>
function add(self){
var $duplicate = $(self).parent().parent().clone();
$duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");
$duplicate.appendTo($(self).parent().parent().parent());
}
//删除函数
function removed(self){
$(self).parent().parent().remove()
}
</script>
</body>
</html>十二. CSS操作
3.1.1 onscroll()滑轮滚动事件
css("{color:'red',backgroud:'blue'}")
offset() 获取当前标签距离文档的距离 position() scrollTop()滑动的高度 scrollLeft()
height() 获取标签自己的高度 即内容高度
innerHeight()标签的高度+padding
outetHeight() 参数一：false默认，自身高度+padding+boder
参数二：true 自身高度+padding+boder+margin
width()
十三.文档的高度$(document).height()
窗口的高度$(window).height()
元素用position:absoulate;元素会脱离文档流，body 所以文档高度不是$("body").height()
十四.JS也有两种绑定事件的方式
不在对象上绑定事件的方法可以同时对多个事件绑定函数
JS中的事件均是：on事件名
jQuery的事件均是：事件名
<script>
$("p").click( function(){
Alert('hhbb')
})//jQuery里面事件均是函数的方式出现
</script>注意：
文档的加载顺序会影响结果，若先加载script中的内容并且找不到script中的元素会无效果。但是函数不会，但用第二种方法绑定函数要注意
Js:window.onload=function()文档加载完后执行
jQuery：$(document).read(function().....)但文档加载完后
//简写方法 $(function(){.......})
对于动态添加的元素，原来绑定的函数不能生效，解决：
委托的方式：
<script>
$("ul").on('click','li',"{'fo':'bar'}",function(e){//可以是匿名函数或者函数名，li是selector子元素，还有一个参数的参数用来传参
V.....
alert(e.data.fo)//获取参数
})十四.动画效果
14.1 隐藏与显示函数
hide(time) show(time) toggle(time)//time是动画改变不了时间参数，toggle是两边切换
14.2 淡入淡出函数
fadeIn() fadeOut() fadeToggle() fadeTo(time,opcity)//每个函数都有time参数，opcity是指定不透明度
14.3 滑动函数
slideDown() slideUp() slideToggle()//每个函数也有time参数
14.4 总结：以上函数最后面都有一个参数，该参数是函数，在上面的动画完后执行后面的函数。
十五.扩展方法
1. $ 代表的含义就是jQuery类
2. extend() 两种
<script>
//方法一 直接用$ 进行定义，就直接用$调用，相当于类直接调用
$.extend(
{ getmax:function (a,b){ //getmax是自定义的函数名
return a>b?a:b;
}
}
//调用
$.getmax(3,6)
//方法二 用 $.fn 进行定义 用$（对象）进行调用，相当于实例调用
$.fn.extend(
{ getmax:function (a,b){
return a>b?a:b
}
}
//调用
$("div").getmax()
f=function (){
alert(123)
}
f()
//等价于
(function (a){
alert (a)
})('alex')
</script>3.私有域
将拓展函数放到一个匿名函数中，并调用匿名函数
将拓展函数的适用于该范围
来源于：www.cnblogs.com/yuanchenqi/articles/5663118.html
十六.轮播图
1.css注意：父元素：position:relative;子元素：position:absolute;子元素会脱离文档流，脱离文档流后元素的宽度不会为默认的100%，width为元素的内容。
选择器的优先级，ID：100，class选择器：10，标记选择器为：1
Eg: .img li 优先级：11
Li优先级：1
.outer .input优先级：20 .input 优先级：10
2.jQuery
hover (f1,f2)//移上去调用方法一，移除调用方法2，移上去触发事件
$("li").index()取元素的索引
$("ul).eq(index)根据下标取对象
stop().fadeIn(1000)//对上一个动画截止，进行下一个动画
十七，Jquery与DOM对象的转换
1，DOM对象转换为jQuery对象
Obj=document.getElementById('sele')
//$(dom对象）转换jQuery对象
$(Obj)2,jQuery对象转换为dom对象
$('#sel') //jQuery对象
//添加索引就转换了
$('#sel')[0]
