一、DOM对象与JQuery对象的区别
| DOM对象：使用JS中的方法获取获取页面元素，返回对象就是DOM对象 |
| JQuery对象：JQuery对象就是使用JQuery方法获取页面元素，返回对象是JQuery对象 |
| JQuery对象其实就是DOM对象的一个集合，是一个伪数组，里面存在一大堆的js对象 |
| DOM对象与JQuery对象的方法不能混用，但是两者之间可以互向转换 |
DOM对象转换为JQuery对象:用$函数去获取
//典型的DOM对象转换为JQuery对象
$(document).ready(function () {
console.log("这是Jq入口函数的第一种写法")
});JQuery对象转换为DOM对象:通过数组下标获取，或通过Get方法获取
//第一种方法
var $li=$("li");
$li[0]
//第二种方法
$li.get(0)
JQuery对象和JS对象区别与转换
1. JQuery对象在操作时，更加方便。
2. JQuery对象和js对象方法不通用的.
3. 两者相互转换
* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)导图如下：
二、JQuery版本问题：
平时学习开发最好用低版本的，防止浏览器不兼容的问题（http://jquery.com/）
三、引入JQuery.js的作用
向全局作用域中添加一个新的类型—JQuery，其中包括：
（1）构造函数：负责创建JQuery类型的对象
必须创建JQuery类型的对象才能用JQuery
（2）原型对象：保存JQuery 对象可用的所有简化版API
只有JQuery类型的子对象，才能简化API
| 一个函数两用 | 没有新值，默认执行获取操作：.html() :表示获取内容 给了新值，变为执行修改操作：.html(AAA) :表示修改内容 |
| 自带遍历 | 对JQuery对象调用一次简化版的API，等效于对类数组对象中的每个元素都调用一次API
|
| 几乎每个JQueryAPI 都返回正在使用的JQuery对象本身 |
基本操作：
1. 事件绑定
//1.获取b1按钮
$("#b1").click(function(){
alert("abc");
});
2. 入口函数
$(function () {
});
window.onload 和 $(function) 区别
* window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
* $(function)可以定义多次的。
3. 样式控制：css方法
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");样式控制：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//修改单个样式——css(name,value)
//name：样式名 value：样式值
$("li")
.css("fontSize", "32px")
.css("backgroundColor", "red");
//修改多个样式——CSS(obj)
$("li").css({
backgroundColor: "pink",
color: "red",
fontSize: "32px"
});
//获取样式
console.log($("li").css("fontSize"));
console.log($("li").css("backgroundColor"));
});
</script>
</head>
<body>
<ul>
<li>张三</li>
<li>李四</li>
<li>万物</li>
<li>狗剩</li>
</ul>
</body>
</html>
隐式迭代的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//关于隐式迭代:
//1.设置操作的时候,会给Jq内部的所有对象都设置相同的值
//获取的时候：只返回第一个元素对应的值
$("li").eq(0).css("fontSize", "20px");//为每一个元素设置字体大小的值
$("li").eq(1).css("fontSize", "21px");
$("li").eq(2).css("fontSize", "22px");
$("li").eq(3).css("fontSize", "23px");
console.log($("li").css("fontSize"));//此时值的大小为20px，只返回第一个元素对应的值
});
</script>
</head>
<body>
<ul>
<li>张三</li>
<li>李四</li>
<li>万物</li>
<li>狗剩</li>
</ul>
</body>
</html>
四、入口函数
| 1.引入JQuery文件 |
| 2.入口函数 |
| 3.功能实现 |
1.JQuery入口函数
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
//js入口函数要比JQuery的执行的晚一些
//JQuery入口函数等页面加载完成后才执行，不会等待图片的加载
//js 入口函数会等页面加载完成，并且等待图片加载完成才开始执行
window.onload = function () {
console.log("这是Js入口函数的写法")
};
//典型的DOM对象转换为JQuery对象
$(document).ready(function () {
console.log("这是Jq入口函数的第一种写法")
});
$(function () {
console.log("这是Jq入口函数的第二种写法")
});
</script>
</head>效果展示：
五.实例
1.多播：对于同一个事件,dom只能注册一个，后注册的将覆盖前面注册的事件，JQuery对象可以注册多个，jquery 支持多播。具体解析如下：
JQuery多播在卸载事件中的间接体现
unbind();//移除所有事件处理程序
unbind(‘click’);//移除所有的click事件处理程序
unbind('click',函数名称);//移除click事件的指定名称的处理函数，这种方法无法移除匿名函数
2.JQuery与DOM页面加载事件：
3.JQuery合成事件（执行、移开、切换）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//合成指向、移开事件
$('#btnShow').hover(function() {//指向
this.style.color = 'white';
}, function() {//移开
this.style.color = 'pink';
});
//合成点击事件,指定在n个函数间切换，点击次数为m
$('#btnShow').toggle(function() {//第m%n==1次点击时执行此函数
alert('博主');
}, function() {//第m%n==2次点击执行此函数
alert('真的');
}, function() {//第m%n==0次点击执行此函数
alert('好帅');
});
//合成事件：只将绑定的事件执行一次
//$('#btnShow').one('click', function() {
// alert(1);
//});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="按钮"/>
</body>
</html>
4.JQuery与DOM 操作元素
请观看博客：div添加/删除元素
5.省市连动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="script/jquery-3.3.1.min.js"></script>
<script>
//$.each(obj,fun(i,n))
//如果obj是数组，则i是索引，n是元素
//如果obj是对象或键值对，i是键，n是值
//定义省市数据，键值对集合
var datas = {
"北京": ["朝阳", "海淀", "昌平"],
"山东": ["青岛", "济南"],
"河北": ["石家庄", "定州", "保定"]
};
$(function () {
//创建省的select标签
var select = $('<select id="selectProvince"></select>');
//追加到body中
select.appendTo('body');
//遍历集合
$.each(datas, function (key, value) {
//根据数据创建option并追加到select上
$('<option value="' + key + '">' + key + '</option>').appendTo(select);
});
//创建市的select标签
var selectCity = $('<select id="selectCity"></select>').appendTo('body');
//获取选中的省信息
var pro = $('#selectProvince').val();
//将省名称作为键到集合中获取值
var citys = datas[pro];
//遍历市的数组
$.each(citys, function (index, item) {
$('<option>' + item + '</option>').appendTo(selectCity);
});
//最后写change事件：为省的select绑定change事件，当省发生改变时，市也会相应得发生变化
select.change(function () {
//找到市信息
var citys = datas[$(this).val()];
//删除市的原有option
$('#selectCity').empty();
//添加option
$.each(citys, function (index, item) {
$('<option>' + item + '</option>').appendTo('#selectCity');
});
});
});
</script>
</head>
<body>
</body>
</html>效果展示：
6.链式编程：方法可以一直调用下去
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#btnChange').click(function () {
//链式编号：只查找一次，支持逐个使用方法
$('p').text('我好帅').css('color','pink');
});
});
$(function () {
$('#btnLight').click(function () {
if (this.value == '关灯') {
$('body').css('background-color', 'black');
$(this).val('开灯');
} else {
$('body').css('background-color', 'white');
$(this).val('关灯');
}
});
});
</script>
</head>
<body>
<input type="button" id="btnLight" value="关灯" />
<input type="button" id="btnChange" value="点我" />
<p>1</p>
<p>2</p>
<p>3</p>
</body>
</html>
效果展示：
如果本篇博客对您有所帮助，记得点个赞哦！
4540
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
