jQuery的基础使用_jQuery

一、jQuery简介

就是Dom、Bom、JS的类库

参考使用手册：

http://jquery.cuishifeng.cn/

二、jQuery的使用

1、与dom的转换

　　jQuery对象[0] ==>dom对象

　　$(dom对象)==>jQuery对象

2、查找元素

（1）常用选择器

　常用：

　　$('#id')　　　　 //id选择器//
　　$(".c1") 　　　　// calss//
　　$('a') 　　　　 //标签选择器//
　　$("*") 　　　　 //* 所有//
　　$('a,.c1,#i10') //组合选择器//

　层级：　

　　$('a .c1') 　　#选择a标签下的所有class等于c1的标签
　　$('a>c1') 　　#选择a标签下的儿子等于c1的标签
　　$('a+c1') 　　#选择a标签的下一个等于c1的标签
　　$('a~c1') 　　#选择a标签的兄弟标签等于c1的标签

　属性：

　　$('[alex]') #查找出具有alex属性的标签
　　$('[alex="123"]') #查找出具有alex属性等于123的标签

　再次筛选：

　　$("#i1 a:first") #选择id为i1的下面的a标签的第一个标签
　　常用：first，last，eq（索引）

（2）常用筛选器

　　基础：

　　　　$(this).next() #获取下一个
　　　　$(this).prev() #获取上一个
　　　　$(this).parent() #获取父标签
　　　　$(this).children（） #获取子标签
　　　　$(this).siblings() #获取所有兄弟标签
　　　　$(this).find(#i1) #获取子孙标签中#i1标签

　　其他常用：

　　　　eq(index|-index) #索引等于

　　　　first() #第一个

　　　　last() #最后一个

　　　　hasClass(class) #有相关样式的

3、操作元素

　(1)元素绑定事件

　　$('.header').click(function(){
　　console.log(this)
　　})

　(2) 添加样式和移除样式

　　　$('#i1').addClass('hide')
　　　$('#i1').removeClass('hide')
　　　$('#i1').hasClass('hide') 　　 #判断是否有这个样式
　　　$('#i1').toggleClass('hide') 　　#有这个样式的话就删除，没有的话添加

　(3)内容操作

　　$('#i1').text() 　　#不加参数是获取文本内容
　　$('#i1').text("值")　　 #加参数是赋值文本内容，不解析html内容
　　$('#i1').html() 　　 #不加参数是获取html内容
　　$('#i1').html("值") 　　 #加参数是赋值html内容，解析html内容

　(4)value值操作

　　$("#i2").val() 　　#获取标签的values值
　　$("#i2").val("值") 　　#设置标签的values值

　(5)属性操作

　　$("#i2").attr（"id"） #获取属性值
　　$("#i2").attr（"id"，"i1"） #赋值
　　$("#i2").removeAttr（"id"） #删除属性

　　#专门用于为input 标签的checkbox/radio的checked选中属性（1/2版本的jquery的attr处理的话会出问题）
　　$("#i2").prop('checked') #获取值
　　$("#i2").prop('checked',true) #设置值

　　$("#i2").index() #获取索引值

　(6)文档处理

　　var tag='<input type='text'>'

　　　$(this).append(tag)

　　append 　　#在里面的最后添加标签
　　prepend 　　#在里面的最前面添加标签
　　after 　　　　 #在下一个添加标签
　　before 　　#在上一个添加标签

　　remove 　　 #删除标签
　　empty 　　 #清空标签
　　clone 　　#克隆复制一份

　(7)样式处理

　　$('.c1').css('color','red') #设置样式里的某一个值

　(8)位置处理　

　　滑轮：overflow
　　　　$(windows).scrollTop() #无值得时候是获取高度
　　　　$(windows).scrollTop(0) #有值代表设置
　　　　$("#i1").scrollLeft() #无值得时候是获取离左边的距离
　　　　$(windows).scrollLeft(0) #有值代表设置

　　offset ：指定标签在html中的坐标
　　　　$("#i1").offset() #获取左上角像素点的位置
　　　　常用于拖动元素在页面移动：
　　　　$("#i1").offset().top #高
　　　　$("#i1").offset().left #左
　　position：在position的relative父标签的相对位置
　　　　$("#i1").position() #在position的relative和absolute中的相对位置

　　height():其高度范围是所匹配元素的高度height；
　　innerheight():其高度范围是所匹配元素的高度height+padding；
　　outerheight():其高度范围是所匹配元素的高度height+padding+border；
　　outerheight(true)其高度范围是所匹配元素的高度height+padding+border+margin；

4、其他

　(1)默认事件

　　如a标签的onclick事件
　　　　（a）本身就有默认事件：跳转，直接再添加onclick事件。默认优先执行自己添加的事件，然后再执行默认事件（input（checkbox）的标签默认事件先执行）
　　　　（b）设置默认事件不执行：
　　　　return false时不执行默认事件　　
　　　　return true 执行默认事件

　　dom方式控制默认事件：