JQuery库

• JQuery库
  • 一、认识jquery
    • 1. 引入
    • 2. 基本语法
  • 二、选择器
    • 1. 基本选择器
    • 2. 层级选择器
    • 3. 基本筛选器
    • 4. 属性选择器
    • 5. 表单选择器
    • 6. 过滤筛选器
    • 7. 查找筛选器
  • 三、属性选择
  • 四、for循环
  • 五、操作文档
  • 六、绑定事件
  • 七、实例方法
    • 1. 显示、隐藏
    • 2. 淡入淡出
    • 3. 滑动滑出
    • 4. 扩展自定义方法
  • 六、实例训练
    • 1. 后台管理布局
    • 2. 拖动面板移动实例
    • 3. jidong轮播图

一、认识jquery

jQuery是用js编写的，里面封装了js常用的方法和属性
小公司应用广泛，大公司一般会自己开发相应的内容
手机端不适用

1. 引入

2. 基本语法

// $(selector).action()
$("p").css("color", "red").css("font-size", "10px")

二、选择器

1. 基本选择器

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

2. 层级选择器

$(".outer div")
$("outer>div")
$("outer+div")
$("outer~div")

3. 基本筛选器

$("li:first")	// To get the first li
$("li:last")	
$("li:eq(2)")	// To get the li whoes range is 2
$("li:even")

4. 属性选择器

$("[id='div1']")
$("[id='div1'][p]")

5. 表单选择器

$("[type='text']")
$(":text")		// only in form tag

6. 过滤筛选器

$("li").eq(2)
$("li").first()
$("li").hasclass("test")	// return the boolean

7. 查找筛选器

$(".div1").children(".text")
$(".div1").find()

$(".div1").next()
$(".div1").nextAll()
$(".div1").nextUntil()

$(".div1").prev()
$(".div1").prevAll()
$(".div1").prevUntil()

$(".div1").parent()
$(".div1").parents()
$(".div1").parentsUntil()

$(".div1").siblings()

三、属性选择

$(".div1").attr()
$(".div1").attr("attr", "value")
$(".div1").removeAttr("attr")

$(".div1").prop("attr", "value")
$(".div1").removeProp("attr")

$(".div1").addClass()
$(".div1").removeClass()

$(".div1").html()
$(".div1").text()
$(".div1").value()
$(".div1").val()	// Get the value of the attribution of value or modify the value

四、for循环

li=[10,20,30]
dict={"gender": "male", "sex" :20}
$.each(dict, function(i,x){
	console.log(i,x)
})

$("table tr").each(function(){
	$(this)
})

五、操作文档