Jquery的下载与安装
下载地址：http://jquery.com/
在页面中引入 jquery
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>Dom对象和Jquery包装集对象
jQuery"的核心
$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象
DOM对象
根据id属性获取DOM对象 document.getElementById("id属性值");
如果元素存在那么直接获取dom对象，如果元素不存在，值为null
Jquery包装集对象
根据id属性获取DOM对象 $("#id属性值");
如果元素存在那么直接获取jquery对象，如果元素不存在，值为空包装集对象 (不会是null)
注意：
dom对象判断对象是否获取到，判断值是否为null
Jquery包装集对象判断对象是否获取到，判断jquery对象的长度length
<script type="text/javascript">
//dom
var divDom = document.getElementById("div1");
console.log(divDom);
var divDom2 = document.getElementById("div2");
console.log(divDom2);
//jquery
var divJquery = $("#div1");
console.log(divJquery);
var divJquery2 = $("#div2");
console.log(divJquery2);
//Dom转换成jquery对象
var newDiv = $(divDom);
console.log(newDiv);
var str = "<div>123</div>";
var newStr = $(str);
console.log(newStr);
//jquery对象转换成Dom
var newDiv = divJquery[0];
console.log(newDiv);
</script>基础选择器
id选择器 #id$("#testDiv")选择id为testDiv的元素
元素名称选择器 element$("div")选择所有div元素
类选择器 .class$(".blue")选择所有class=blue的元素
选择所有元素 $("*")选择页面所有元素
组合选择器 selector1,selector2,selectorN$("#testDiv,span,.blue")同时选中多个选择器匹配的元素
<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>
<script type="text/javascript">
//id选择器
var mydiv1 = $("#mydiv1");
console.log(mydiv1);
//元素名称选择器
var divs = $("div");
console.log(divs);
//类选择器
var blue = $(".blue");
console.log(blue);
//选择所有元素
var all = $("*");
console.log(all);
//组合选择器
var zh = $("#mydiv1,div,.blue");
console.log(zh);
</script>层次选择器
| 后代选择器 | ancestor descendant$("#parent div") | 选择id为parent的元素的所有div元素 |
| 子代选择器 | parent > child$("#parent>div") | 选择id为parent的直接div子元素 |
| 相邻选择器 | prev + next$(".blue + img") | 选择css类为blue的下一个img元素 |
| 同辈选择器 | prev ~ sibling$(".blue ~ img") | 选择css类为blue的之后的img元素 |
<div id="parent">层次择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
</div>
<div>
选择器2<div>选择器2中的div</div>
</div>
</div>
<script type="text/javascript">
//后代选择器
var hd = $("#parent div");
console.log(hd);
//子代选择器
var zd = $("#parent > div");
console.log(zd);
//相邻选择器
var xl = $(".testColor + div");
console.log(xl);
//同辈选择器
var tb = $(".gray ~ img");
console.log(tb);
</script>表单选择器
$("[属性]"); 选中页面中具备某样属性的元素
$("[属性 = 值]"); 选中页面中具备属性等于某个特定值的元素
| 表单元素选择器 | :input | 查找所有的input元素：$(":input")；<br />注意：会匹配所有的input、textarea、select和button元素。 |
| 文本框选择器 | :text | 查找所有文本框：$(":text") |
| 密码框选择器 | :password | 查找所有密码框：$(":password") |
| 单选按钮选择器 | :radio | 查找所有单选按钮：$(":radio") |
| 复选框选择器 | :checkbox | 查找所有复选框：$(":checkbox") |
| 提交按钮选择器 | :submit | 查找所有提交按钮：$(":submit") |
| 图像域选择器 | :image | 查找所有图像域：$(":image") |
| 重置按钮选择器 | :reset | 查找所有重置按钮：$(":reset") |
| 按钮选择器 | :button | 查找所有按钮：$(":button") |
| 文件域选择器 | :file | 查找所有文件域：$(":file") |
过滤选择器
$(":eq(index)") 匹配元素的指定下标的元素 （下标从0开始） .eq(index)
$(":gt(index)") 匹配元素下标大于指定值元素 （下标从0开始）.gt(index)
$(":odd") 匹配奇数下标
$(":even") 匹配偶数下标
$(":checked") 匹配元素被选中
//匹配元素的指定下标的元素
var eq = $("[type]:eq(1)");
console.log(eq);
//匹配元素下标大于指定值元素
var eq = $("[type]:gt(8)");
console.log(eq);
//匹配奇数下标
var hob = $("[name = 'ufav']:odd");
//匹配偶数下标
var even = $("[name = 'ufav']:even");
console.log(hob);
console.log(even);
//匹配元素被选中
console.log($(":input:checked"));操作元素的属性
属性的分类
固有的属性
src align method
自定义的属性
abc='123'
返回值是boolean类型的属性
checked disabled selected
操作属性
attr
获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型的也是一样 具体的值
prop （不能操作自定义属性）
获取已存在的属性，可以直接获取到具体的值，如果属性是boolean类型 返回的是true/false
获取属性
attr('属性名');
prop('属性名');
设置属性
attr('属性名','属性值');
prop('属性名','属性值');
移除属性
removeAttr(属性名)移除指定的属性
<form action="" id="myform">
<input type="checkbox" id="aa" data='123' name="ch" checked="checked"/> aa
<input type="checkbox" id="bb" data='456' name="ch" /> bb
</form>
<script type="text/javascript">
//获取元素
var aa = $("#aa");
var bb = $("#bb");
//获取固有属性值
console.log(aa.attr('type'),aa.attr('name'));
console.log(aa.prop('type'),aa.prop('name'));
//自定义的属性
console.log(aa.attr('data'));//123
console.log(aa.prop('data'));//undefined
//返回值是boolean类型的属性
console.log(aa.attr('checked'));//checked
console.log(aa.prop('checked'));//true
//不存在的属性
console.log(bb.attr('checked'));//undefined
console.log(bb.prop('checked'));//false
//设置
aa.attr("data","abc");
bb.prop("checked",true);
aa.attr("name",'input');
//移除属性
bb.removeAttr('name');
</script>操作元素的样式
attr(“class”) 获取class属性的值，即样式名称
attr(“class”,”样式名”) 修改class属性的值，修改样式 直接覆盖原有的样式
addClass(“样式名”) 添加样式名称
css("样式名","样式值") 添加具体的样式 相当于在元素上添加style属性
removeClass(class) 移除样式名称
//获取class属性的值
var div1 = $("#conBlue").attr("class");
console.log(div1);
//修改class属性的值 直接覆盖原有的样式
$("#conBlue").attr("class","green");
//添加样式名称
$("#conBlue").addClass("larger");
//添加具体的样式 相当于在元素上添加style属性
$("#conRed").css("color","red");
//removeClass 移除样式
$("#remove").removeClass('larger');操作元素的内容
html() 获取元素的html内容
html("html,内容") 设定元素的html内容
text() 获取元素的文本内容，不包含html
text("text 内容") 设置元素的文本内容，不包含html
val() 获取元素value值
val(‘值’) 设定元素的value值
//获取非表单元素 的内容/值
console.log($("h3").html());
console.log($("h3").text());
//设置非表单元素 的内容/值
$("#html").html("<h2>标签内容</h2>");
$("#text").text("<h2>标签内容</h2>");
//val()
console.log($("[name='uname']").val());
$("[name='uname']").val("orm");操作元素和添加元素
创建元素
$('元素内容')
添加元素
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
//prepend 内部前追加
//准备元素
var str = $('<span>UZI</span>');
//将内容填充到<div class="green">的内部
$(".green").prepend(str);
//prependTo 被内部前追加
var str2 = "<span>麻辣香锅</span>";
$(str2).prependTo($(".green"));
//append 内部后追加
var str3 = "<span>厂长</span>";
$(".green").append(str3);
//appendTo 被内部后追加
var str4 = "<span>faker</span>";
$(str4).appendTo($(".green"));
//before 前追加
$("[class = 'red']").before("<span style='color:black'>卢本伟</span>");
//after 后追加
$("[class = 'red']").after("<span style='color:black'>姿态</span>");删除元素
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
var spans = $("span");
spans.each(function(index,element){
console.log(index,element);
console.log($(element));
});
empty() 清空所选元素的内容
//remove() 移除
$('.green').remove();
//empty() 清空
$('.blue').empty();遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
var spans = $("span");
spans.each(function(index,element){
console.log(index,element);
console.log($(element));
});jQuery事件
ready加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})
等价于
$(function(){})
ready加载事件和load加载事件的区别
load：等待加载页面中DOM结构(元素)和引入的资源后，执行对应代码
ready：等待加载页面中DOM结构(元素)，执行对应代码
绑定事件
$(selector).bind( eventType [, eventData], handler(eventObject));
//load
/* window.onload = function(){
console.log("abc");
} */
//ready加载事件
$(function(){
console.log($("#aa"));
});
/* $(document).ready(function(){
console.log($("#aa"));
}); */
//bind绑定
$("#aa").bind('click',function(){
console.log('点击事件');
});
//bind绑定多个
$("#bb").bind('mouseout',function(){
console.log('移开事件');
}).bind('mouseover',function(){
console.log('悬停事件');
});
$("#cc").bind({
'click':function(){
console.log("点击事件");
},
'mousemove':function(){
console.log("移动事件");
}
})
//事件绑定的简洁使用方式
$("#dd").click(function(){
console.log("点击事件");
})
$("#dd").click(function(){
console.log("点击事件");
}).mouseover(function(){
console.log("悬停事件");
});Ajax
ajax 异步无刷新技术
$.ajax({
type:get/post, 请求方式
url:请求地址,
data:{
//参数
name:zhangsan,
pwd:123456
},
dataType:'json' 预期服务器返回的数据类型
success:function(abc){
}
});
$.get
$.get('地址',数据参数,回调函数);
$.post
$.post('地址',数据参数,回调函数);
$.getJSON
$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//ajax请求
$.ajax({
type:'get',
url:'js/data.json',
data:{
uname:'zhangsan'
},
dataType:'json',
success:function(abc){
console.log(abc);
}
});
$.get("js/data.json",function(data){
console.log(data);
});
$.getJSON('js/data.json',function(data){
console.log(data); // 要求返回的数据格式是JSON格式
});
</script>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
