一.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]