JQuery

JQuery

1 安装

2 JQuery对象

2.1 获取JQuery对象

3 jQuery选择器

3.1 基础选择器

选择器类型	语法	描述
id选择器**	$("#id属性值")
类选择器**	$(".calss属性值")
元素选择器**	$(“标签/元素名”)	根据标签名获取标签(div span)
通用选择器
组合选择器

3.2 后代选择器

后代
后代选择器**	$("#父元素 指定元素")中间用空格隔开
子代选择器**	$("#父元素>指定元素")
相邻选择器	$(“标签/元素名”)	获取下一个元素
同辈选择器	$(“标签~元素名”)
组合选择器

3.3 表单选择器

类型
表单选择器	$(":input")	获取所有input button textarea标签
元素选择器	$(“input”)	获取input标签
文本框选择器	$(“标签/元素名”)	获取下一个元素
单选按钮选择器**	$(":radio")
多选按钮选择器**	$(":checkbox")

4 DOM操作

4.1 操作元素属性

属性分类：固有属性，自定义属性

4.1.1 获取属性值

	$("#id").attr(“属性名”)	$("#id").prop(“属性名”)
固有属性	属性值	属性值
返回boolen的属性（已设置属性值）	checked	TRUE
返回boolen的属性（未设置属性值）	undefined	false
自定义属性	可获取	不可获取

4.1.2 设置

	$("#id").attr(“属性名”,“属性值”)	$("#id").prop(“属性名”，“属性值”)
固有属性	属性值	属性值
返回boolen的属性（已设置属性值）	checked	TRUE
返回boolen的属性（未设置属性值）	undefined	false
自定义属性	可获取	不可设置

4.1.3 移除

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id").removeAttr…("#id").prop(“属性名”，“属性值”)固有属性

4.1.4 总结

操作boolen，用.prop，其他用.attr

4.2 操作元素样式

语法
$("#id").attr(“class”)	获取样式
$("#id").attr(“class”,“样式名”)	设置样式，覆盖样式
$("#id").addClass(“样式名”)	添加样式，原本样式保留
$("#id").css(“添加具体的样式”,“样式值”)
$("#id").removeCalss(“样式名”)	移除样式

4.3 操作元素内容

语法
$("#id").html()	获取元素内容，包含html标签（非表单元素）
$("#id").html(“html,内容”)	获取元素内容，包含html标签（非表单元素）
$("#id").text()	获取元素纯文本内容，不包含html标签（非表单元素）
$("#id").text(“text内容”)	设置元素纯文本内容，不包含html标签（非表单元素）
$("#id").val()	获取元素内容（表单元素）
$("#id").val(“值”)	获取元素内容（表单元素）

表单元素	非表单元素
text	div
password	span
radio	h1-h6
checkbox	table
hidden	tr td
textarea	p
select	li

4.4 操作元素

语法	说明
$("")	将字符串、html转化为JQuery对象
$(内容).prependTo() 指定元素.prependTo()	前追加子元素：在指定元素内部最前面追加内容，可以是字符串，html元素或jQuery对象
$(内容).appendTo() 指定元素.appendTo()	后追加
before()	同级前追加
after()	同级后追加
remove()	删除元素内容和标签
empty()	清空元素内容
each(){function(){index,element}}	遍历元素

​ 注意：如果元素不存在，需要创建后添加；如果已经存在，则相当于移动元素位置

5 JQuery事件

5.1 加载事件

$(function(){
    
})

$(document).ready(function(){
    
})

5.2 绑定事件

$(selector).bind();
绑定单个事件：
$("元素").bind("事件类型",function(){
    
});
直接绑定单个事件 
$("元素").事件名(function(){
    
});
绑定多个事件
为多个事件绑定一个函数
$("元素").bind("事件类型1 事件类型1",function(){
    
});
为元素绑定多个事件，并设置对应函数
$("元素").bind("事件类型2",function(){
    
}).bind("事件类型1",function(){
    
});


$("元素").bind({
  "事件类型1":function(){
      
  },
  "事件类型2":function(){
      
  }
});

$("元素")."事件类型1"(function(){
    
})."事件类型2"(function(){
    
});

6 jQuery Ajax

异步无刷新技术

异步：无需等待服务器返回结果就可以做别的事情

无刷新：执行操作后页面不刷新

格式：$.ajax({ })

$.ajax({
    type:GET/POST
    url:
    data:设置请求传递的参数
    dataType:"json"设置返回数据类型
    success:function(data){
    	JSON.parse(data)
	}成功时调用此函数  
})

$.get(url,data,function(data){})
$.getJSON(url,data,function(data){})要求返回数据为JSON,如果不是JSON格式则无法获取