目标:Jquery
一.概述
1.JQuery是什么
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少,做得更多.
2.优点
( 1)提供了强大的功能函数
( 2)解决浏览器兼容性问题
( 3)实现丰富的 UI 和插件
( 4)纠正错误的脚本知识
3. 在页面引入
<script src="js/jquery.js" type="text/javascript" ></script>
二、 jQuery 核心
![974e031d400134399375acc144f9a8bd.png](https://i-blog.csdnimg.cn/blog_migrate/13b2622fbc083502b2f2d66781d297c9.jpeg)
三、 DOM 对象和 jQuery 包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对象只有 DOM 接口提供的方法和属性,通过 js 代码获取的对象都是 dom 对象;而通过 jQuery获取的对象是 jQuery 包装集对象,简称 jQuery 对象,只有 jQuery 对象才能使用 jQuery 提供的方法。
1. Dom 对象
![b6ba19cf6a5eb9a79d40826592d9e552.png](https://i-blog.csdnimg.cn/blog_migrate/bcfdd5502be7a802e72a077a9c40a58c.png)
2. jQuery 包装集|对象
![90599edd983713ae25fefa4210fa8841.png](https://i-blog.csdnimg.cn/blog_migrate/c2f8b1b558e999a80883b42a399b3c32.png)
3. Dom 转 jQuery 对象
![cbf9e9ccd811faae9cf0b248d3b2ddef.png](https://i-blog.csdnimg.cn/blog_migrate/c1416b24096d53989a57232f14ae8f5c.png)
![ac9f1fa1348161d735c801d085dbf8c5.png](https://i-blog.csdnimg.cn/blog_migrate/cb7cf98a717bc3cb8ddc6333688457ed.png)
4. jQuery 对象转 Dom 对象
![bb25be6ca1ba7146676ab5a83544573e.png](https://i-blog.csdnimg.cn/blog_migrate/3694d3f95cc55fd19c36d4e0e5631936.jpeg)
![5127853d0a5d94cfd628c223f80fd978.png](https://i-blog.csdnimg.cn/blog_migrate/efe86341d5524fefe7676d8266ffbf09.jpeg)
![b92e3932a6705f0a00c924613ce5ae39.png](https://i-blog.csdnimg.cn/blog_migrate/71d946f7e7dc595c59ccb61a9dba10ef.jpeg)
四、 jQuery 选择器
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的,具体分类如下。
基础选择器掌握即可 ,其他用到再查阅。
1. 基础选择器 Basics(掌握即可)
![b43b92a826657d3b616e15c8bce924e3.png](https://i-blog.csdnimg.cn/blog_migrate/c008d6bed26c7ea7835eb0d015e1cf14.jpeg)
<script>
// id选择器
var div1 = $("#div1");
console.log(div1);
//类选择器
var cls = $(".test");
console.log(cls);
// 元素选择器
var divs = $("div");
console.log(divs);
// 通用选择器
var all = $("*");
console.log(all);
// 组合选择器
var group = $("#div1,span,.test");
console.log(group);
</script>
2. 层次选择器 Hierarchy
![6a7033e3c8434d4f784b10044f73e3f9.png](https://i-blog.csdnimg.cn/blog_migrate/fdd4f02403d5cccb33f893f0485f367a.jpeg)
<div id="parent">层次择器
<div id="child" class="testColor">父选择器
<div class="gray">子选择器</div>
<p>PPPPPPPPPP</p>
<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>
<p>这是一个P</p>
<div>
选择器2<div>选择器2中的div</div>
</div>
</div>
<script>
// 后代选择器 ancestor descendant $("#parent div")
var houdai = $("#parent div");
houdai.each(function(){
console.log(this);
});
console.log("==============");
// 子代选择器 parent > child $("#parent>div")
var zidai = $("#parent > div");
zidai.each(function(){
console.log(this);
});
console.log("==============");
// 相邻选择器 prev + next $(".blue + img") 只会查询指定元素的下一个指定元素(只往下找一次元素)
var xl = $("#child + p");
xl.each(function(){
console.log(this);
});
console.log("==============");
// 同辈选择器 prev ~ sibling $(".blue ~ img")
var tb = $(".gray ~ img");
tb.each(function(){
console.log(this);
});
</script>
3. 表单选择器Forms
![5beb88660886a6dd651d3124493df0b3.png](https://i-blog.csdnimg.cn/blog_migrate/ff3994a74716c23fe30bf11b91d8025a.jpeg)
<script type="text/javascript">
// 表单元素:文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select
// 非表单元素:div、span、p、h1~h6、img、a、table
var inputs = $(":input"); // 表单选择器,所有表单元素
console.log(inputs.length);
var inputs2 = $("input"); //元素选择器
console.log(inputs2.length);
</script>
4.过滤选择器(用于<input>元素)
<script type="text/javascript">
/**
:checked 选择所有被选中的元素
:eq(index) 匹配指定下标的元素 eq=equal
:gt(index) 匹配下标大于指定值的所有元素 gt=great than
:odd 选择每个相隔的(奇数) 元素
:even 选择每个相隔的(偶数) 元素
*/
var checkboxs = $(":checkbox");
checkboxs.each(function(){
console.log(this);
console.log(this.checked);
});
console.log("==============");
var ckeckeds = $(":checkbox:checked");
ckeckeds.each(function(){
console.log(this);
});
console.log("==============");
var second = $(":checkbox:eq(1)")
second.each(function(){
console.log(this);
});
console.log("==============");
var gtfirst = $(":checkbox:gt(0)")
gtfirst.each(function(){
console.log(this);
});
console.log("==============");
var odds= $(":checkbox:odd")
odds.each(function(){
console.log(this);
});
</script>
五、 jQuery DOM 操作
jQuery 也提供了对 HTML 节点的操作,而且在原生 js 的基础之上进行了优化,使用起来更加方便。
常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除节点;删除、添加、修改、设定节点的 CSS 样式;动画操作等。注意: 以下的操作方式只适用于 jQuery 对象。
1. 操作元素的属性
![7cc7fb11656832fc4af36530021208ce.png](https://i-blog.csdnimg.cn/blog_migrate/74b8e9f24b7c7ad5e03e3289c8ed7a9c.jpeg)
![ed12c8d80554057027ef4e4bf341ca17.png](https://i-blog.csdnimg.cn/blog_migrate/89ce81c3021de89936f0601a5e7b4e21.jpeg)
<!--
获取属性的值
attr(属性名称) 获取指定的属性值,操作 checkbox 时选中返回 checked,没有选中返回 undefined。 attr('checked')
attr('name')
prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')
设置属性的值
attr(属性名称,属性值);
prop(属性名称,属性值);
移除属性
removeAttr(属性名) 移除指定的属性 removeAttr('checked')
如果属性的返回值是true或false(checked、selected、disabled),使用prop()方式;其他属性使用attr();
-->
2. 操作元素的样式
![3b861e42a0edc0e73bdd2dd49fe77af8.png](https://i-blog.csdnimg.cn/blog_migrate/7ca5cdb399e3e6fcb2a448d80018e352.jpeg)
<body>
<!--
attr(“class”) 获取class属性的值,即样式名称
attr(“class”,”样式名”)
修改class属性的值,修改样式
addClass(“样式名”) 后面添加显示style:....
添加样式名称
css() 添加具体的样式 后面添加显示style:....
removeClass(class)
移除样式名称
-->
<div id="div1" class="red">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3" class="greenyellow">我是div3</div>
</body>
<script src="js/jquery-1.9.0.min.js"></script>
<script>
/* attr */
// 设置元素的class属性(如果属性不存在,则添加属性)
$("#div2").attr("class","red");
// 如果属性存在,则修改属性值
$("#div1").attr("class","dodgerblue");
// addClass() 添加样式,原来的样式保留,如果出现相同的样式,以后面定义样式为准
$("#div2").addClass("larger");
// css()
// 添加一个具体样式 css("样式名","样式值")
$("#div3").css("background","dodgerblue");
// 同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
$("#div3").css({"color":"red","font-family":"楷体"})
//removeClass(class)移除样式名称
$("#div2").removeClass();
</script>
3. 操作元素的内容
![2b397648d8956453d8d7ea539a49d189.png](https://i-blog.csdnimg.cn/blog_migrate/8f9bf7fc82c53b49cc621cbf093b2c82.jpeg)
4. 创建元素
![bb3c5263457ed5a959f16f6acb661081.png](https://i-blog.csdnimg.cn/blog_migrate/e23828c7a9f510712c10492e712f9a72.png)
5. 添加元素
![ea16ed78cbc47851c37d69028b2adf55.png](https://i-blog.csdnimg.cn/blog_migrate/170e08601aa6fe50f675364138ce1aee.jpeg)
![e6663eb6a88ace94f6f0ce1679a40808.png](https://i-blog.csdnimg.cn/blog_migrate/bbb84cdbf86a7965d39f25dbfb519707.jpeg)
6. 删除元素
![087a08691ee49388ceefec5f25e68897.png](https://i-blog.csdnimg.cn/blog_migrate/77d603880494fee775088802c7015732.png)
<script>
// remove()
$("#div1").remove();
// empty()
$("#div2").empty();
</script>
7. 遍历元素
</body>
<!--
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element是当前的元素,此时是dom元素。
-->
<script>
$(".green").each(function(index,element){
console.log(index);
console.log(this);
console.log(element.innerHTML); //Dom对象取值
console.log($(element).text()); //Jquery对象取值
});
</script>
六、 Jquery 事件
1. ready()加载事件
<!--
1.ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个,按顺序执行
$(document).ready(function(){})等价于$(function(){})
onload与ready()的区别:
1、ready()在DOM结构解析完毕后即执行
2、onload在DOM结构解析完毕,并且外部资源加载完毕后执行
-->
<script type="text/javascript">
// js的onlooad事件
/*window.onload = function(){
var mydiv = $("#mydiv");
console.log(mydiv);
}*/
// jquery的ready事件
$(document).ready(function(){
var mydiv = $("#mydiv");
console.log(mydiv);
});
$(function(){
var mydiv = $("#mydiv");
console.log(mydiv);
});
</script>
2. bind()绑定元素事件
<body>
<!--button元素,默认是提交按钮-->
<button type="button" id="btn">按钮</button>
<input type="text" id="txt" value="Hello Jquery" />
</body>
<script src="js/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<!--
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件(事件类型)
第一个参数:事件的类型
3.相应事件触发的,执行的操作
第二个参数:函数
-->
<script type="text/javascript">
/*绑定简单事件*/
// js绑定事件
/*document.getElementById("btn").onclick = function(){
alert('这是个按钮。。。');
};*/
// bind()绑定事件
/*$("#btn").bind("click",function(){
alert('这是个按钮。。。');
});*/
// 直接绑定事件
$("#btn").click(function(){
alert('这是个按钮。。。');
});
/*绑定多个事件*/
// 聚焦失焦事件
// 方式一:
$("#txt").focus(function(){
// 聚焦时清空文本框
$("#txt").val("");
}).blur(function(){
$("#txt").val("你好");
});
// 多个事件绑定一种行为
$("#txt").bind("focus blur",function(){
console.log("。。。");
});
$("#txt").bind("focus",function(){
console.log("aaa");
}).bind("blur",function(){
console.log("bbb");
});
$("#txt").bind({
focus:function(){
console.log("链式编程1");
},
blur:function(){
console.log("链式编程2");
}
});
</script>