HTML与jQuery
一.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的儿子
$('outer+div')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) 向下寻找第几个儿子但不包括括号里的兄弟
$("div").prev() $("div").prevAll() $("div").prevUntil() 这里是向上找兄弟
$(".test").parent() 这里是找寻父亲 $(".test").parents() 这里是找寻父元素直到html元素 $(".test").parentUntil()
$("div").siblings() 找兄弟们
四.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必须要加$才能使用 });
九.添加标签
内部插入
append(),appendTo()都是插入父元素里面的最后面，即追加
preappend(),preappendTo()是插入到父元素的上面作为第一个儿子
$("parent").appent('子标签') $("chlien").apptendTo("parent")
外部插入
4种方法插入后都是作为兄弟
after(),before() eg:$("parent").after('childen')
insertAfter() ,insertBefore() eg:$("childen").insetafter('parent')
十.删除元素
$("div").empty() 清空div里的所有内容，保留div标签
$("div").remove() 清空包括div标签。
十一.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()滑轮滚动事件
3.2.1(样式) css("{color:'red',backgroud:'blue'}")
3.2.2(位置) offset() 获取当前标签距离文档的距离 position() scrollTop()滑动的高度 scrollLeft() 向左滑动的距离
3.2.3(尺寸) 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]
