jQuery

Jquery的使用

1、下载Jquery的核心js文件
2、在需要使用jquery的页面引入js

<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

3、"$"代表JQuery对象的引用

DOM对象与Jquery包装集对象

通过dom方式获取div对象，返回的是dom对象 （如果元素存在则返回指定dom对象；如果元素不存在，则返回null）

var divDom = document.getElementById("div1");

通过Jquery对象获取jquery包装集对象 （如果元素存在则返回长度大于0的jquery包装集；如果不存在，返回length为0的Jquery包装集）

var divJquery = $("#div1");

将dom对象转换为Jquery包装集：通过$()将指定dom对象括起来

var jqueryDiv = $(divDom);

将Jquery包装集对象转换为Dom对象：获取jquery包装集的指定下标

var domDiv = divJquery[0]

Jquery的each()函数：遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象

$("#div1").each(function(index,element){
			console.log(index);
			console.log(element); // dom对象
			// {//通过 id 选择器选择了 id 为 div1 的所有元素然后进行遍历，那么遍历出的每个元素就是 id 为 mydiv 的标签元素，而 this 就代表了当前的这个元素
			console.log(this); // dom对象
			console.log($(this));
		});

选择器

基础选择器

id选择器 #id属性值 当出现多个同名ID时，只会获取第一个

var ids = $("#mydiv1");

元素名称选择器 标签/元素名

var divs = $("div");

类选择器 .class属性值

var cls = $(".blue");

选择所有元素

var all = $("*");

组合选择器

var group = $("#mydiv1,span,.blue");

层次选择器

后代选择器 ancestor descendant

var houdai = $("#parent div"); // 查找指定div的后代div元素

子代选择器 parent > child

var zidai = $("#parent > div"); // 查找指定div的第一代div元素

相邻选择器 prev + next 查找指定元素的下一个相邻的指定元素

var xl = $(".gray + img");

同辈选择器 prev ~ sibling 查找指定元素的下面的所有同级指定元素

var tb = $("#child ~ div");

表单选择器

表单选择器 :input, 查找所有的 input元素：
注意：
会匹配所有的 input、textarea、select 和 button 元素。

$(":input")；

文本框选择器 :text 查找所有文本框：

$(":text")

密码框选择器 :password 查找所有密码框：

$(":password")

单选按钮选择器 :radio 查找所有单选按钮：

$(":radio")

复选框选择器 :checkbox 查找所有复选框：

$(":checkbox")

提交按钮选择器 :submit 查找所有提交按钮：

$(":submit")

图像域选择器 :image 查找所有图像域：

$(":image")

重置按钮选择器 :reset 查找所有重置按钮：

$(":reset")

按钮选择器 :button 查找所有按钮：

$(":button")

文件域选择器 :file 查找所有文件域：

$(":file")

过滤选择器

获取所有被选中的元素

var cked = $(":checked");

获取所有被选中的checkbox

var checboxed = $(":checkbox:checked");

获取所有被选中的checkbox的第二个复选框

var second = $(":checkbox:checked:eq(1)");

获取所有的被选中的元素的（不包含第一个）

var notfirst = $(":checked:gt(0)");

获取所有的tr中奇数行

$("tr:gt(0):odd").css("background-color","pink");
$("tr:gt(0):even").css("background-color","skyblue");

属性选择器

选择所有设置过id属性名选择的元素

var ids = $("[id]");

选择所有设置过id属性名，且等于bb的元素

var bb = $("[id='bb']");

jQuery DOM操作

操作元素的属性

得到h3的父元素

var parent = $("h3").parent();

获取body的子元素

var child = $("body").children();

获取属性
获取固有属性的值 （固有属性：元素本身就有属性）

var attrType = $("#ck1").attr("type");
var propType = $("#ck1").prop("type");

获取自定义属性

var attrAa= $("#ck1").attr("aa");
var propAa = $("#ck1").prop("aa");

返回值是boolean的属性 （元素设置过属性值）

var attrCk = $("#ck1").attr("checked");  -----checked
var propCk = $("#ck1").prop("checked");----- true

返回值是boolean的属性 （元素未设置过属性值）

var attrCk2 = $("#ck2").attr("checked");  -----undefined
var propCk2 = $("#ck2").prop("checked"); ------false

设置属性
设置自定义属性

$("#ck1").attr("bb","cc");
$("#ck1").prop("cc","dd");

设置固有属性

$("#ck1").attr("name","haha");
$("#ck1").prop("name","hehe");

boolean类型的属性

$("#ck2").prop("checked",true);

移除属性

$("#ck1").removeAttr("name");

操作元素的样式

获取元素的样式

var cls = $("#conBlue").attr("class");

设置元素的class属性值

$("#conBlue").attr("class","green");

添加样式

$("#conRed").addClass("red");  ----在css里有.red类

添加具体样式 ,css(“样式名”,”样式值”)

$("#remove").css("color","pink");

添加具体样式 ,css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})

$("#remove").css({"font-size":"12px","font-family":"楷体"});

移除样式名

$("#remove").removeClass("blue");

操作元素的内容

赋值
设置元素的内容（非表单元素）

$("#html").html("Hello");
$("#html").html("<h4>Hello</h4>");

设置元素的文本（非表单元素）

$("#text").text("Hello");
$("#text").text("<h4>Hello</h4>");

设置文本框的值 （表单元素）

$("#oop").val("今天天气不错啊");

取值
获取元素的内容

var html = $("#html").html();

获取元素的文本

var txt = $("#html").text();

获取文本框的值

var val = $("#oop").val();

创建元素和添加元素

添加元素
prepend()方法前追加内容

var span = "<span>小奶狗</span>";	
var div = $(".green"); // 得到父元素
div.prepend(span); // 在父元素的内部的最前面追加内容

prependTo()方法前追加内容

$(".red").prependTo(div);

append()方法后追加内容

div.append($(".blue"));

appendTo()方法后追加内容

$("<span>小狼狗</span>").appendTo(div);

before() 在指定元素的前面追加同级元素

$(".pink").before("<span class='red'>女神经</span>");

after() 在指定元素的后面追加同级元素

$(".black").after("<span class='blue'>御姐</span>");

删除元素

删除指定元素 ----清空元素

$(".green").remove();

清空元素 ----清空元素里的内容

$(".blue").empty();

遍历元素

each()

$(selector).each(function(index,element))

参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。

ready事件

ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行

$(document).ready(function(){})等价于$(function(){})

ready事件与onload事件的区别：
ready事件会在文档的dom结构加载完毕后执行
onload事件会在文档的dom结构及资源加载完毕后执行

事件

jQuery Ajax操作

$.ajax()

1.$.ajax()
jquery 调用 ajax 方法：
格式： $.ajax({});
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

$.get()

$.get()
1.请求 json 文件，忽略返回值
$.get('../js/cuisine_area.json');
2.请求 json 文件，传递参数，忽略返回值
$.get('../js/cuisine_area.json',{name:"tom",age:100});

3.请求 json 文件,拿到返回值,请求成功后可拿到返回值

		$.get('../js/cuisine_area.json',function(data){
				console.log(data)
			});

4.请求 json 文件,传递参数,拿到返回值

			$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
				console.log(data)
			});

$.post()

$.getJSON()

$.getJSON()
表示请求返回的数据类型是 JSON 格式的 ajax 请求