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 请求