![e7f748690112064680162dfd9661a20a.png](https://i-blog.csdnimg.cn/blog_migrate/88e1f09549089c928bd0830463ac4d30.jpeg)
![d3ff8acac3bb772c94308e42db2c7fd7.png](https://i-blog.csdnimg.cn/blog_migrate/488a80e95523ecd350c5ef87bfb40248.jpeg)
![17f92e5ccca29c8053ff49d07f0ef63a.png](https://i-blog.csdnimg.cn/blog_migrate/79599582d0f2a0c19b1456e9d0bd6c2e.jpeg)
![6cd6660a3dd30710f8c08f8033424053.png](https://i-blog.csdnimg.cn/blog_migrate/3259f5339ca68ddf3a6ee241fede2ef7.jpeg)
![b1b7363bc9672730dfa0b7deabcd0c2a.png](https://i-blog.csdnimg.cn/blog_migrate/0977162f082f980ce4f1f23dae0ee599.jpeg)
![bf8f3bc10e205110f1533110613198f1.png](https://i-blog.csdnimg.cn/blog_migrate/8ff7797821fabd3de434bad372cca484.jpeg)
![e682ce56f0b0199dc50d55d550394255.png](https://i-blog.csdnimg.cn/blog_migrate/adcd040699aec586c18dc2cfc8f81ed2.jpeg)
![1ee00592d8bb46133f30d2e55533246e.png](https://i-blog.csdnimg.cn/blog_migrate/555b84098d10577e56eeed5399c6e7f7.jpeg)
jQuery
一、jQuery 的下载和安装
下载
jQuery
安装
在页面引入即可<script src="js/jquery.js" type="text/javascript" ></script>
二、jQuery 核心
"$"
"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象
三、DOM 对象和 jQuery 包装集对象
Uncaught ReferenceError: $ is not defined 报错原因:
1、没有引入jquery文件
2、引入的jquery文件顺序不对
DOM对象转 Jqyery包装集对象
将DOM对象放到$()括号中
// 得到DOM对象
var mydivDom = document.getElementById("mydiv");
// 得到Jquery包装集对象
var mydivJquery = $("#mydiv");
Jqyery包装集对象转DOM对象
Jqyery包装集取下标 Jqyery包装集[0]
/*Jqyery包装集对象转DOM对象*/
ar jtod = mydivJquery[0];
通过each()方法遍历 jQuery
对象数组得到的对象是 Dom 对象,可以通过$()转为 jQuery 对象
mydivJquery.each(function(index,element){ })
四、jQuery 选择器
1. 基础选择器 Basics
id 选择器
$("#testDiv")选择 id 为 testDiv 的元素(id属性值)
元素名称选择器
$("div")选择所有 div 元素 (元素名称)
类选择器
$(".blue")选择所有 class=blue 的元素 (class属性值)
选择所有元素
$("*")选择页面所有元素
子主题 5
$("#testDiv,span,.blue")同时选中这几个选择器匹配的元素
2.层次选择器 Hierarchy
后代选择器
$("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器
$("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器
$(".blue + img")选择 css 类为 blue 的下一个 img 元素
1、只找当前元素的下一个同级
2、只找一个
同辈选择器
$(".blue ~ img")选择 css 类为 blue 的之后的 img 元素
3.表单选择器
元素选择器
var inputs = $("input");
表单选择器
var inps = $(":input");
获取所有的复选框
var cks = $(":checkbox");
过滤选择器
console.log($("input:checkbox"));
:checked:得到所有checked为true的元素
:eq(index):匹配指定下标的元素
:gt(index):大于指定下标的
:odd 获取所有的奇数位置的元素
:even 获取所有的偶数位置的元素
五、jQuery DOM 操作
1. 操作元素的属性
获取属性
attr(属性名称)
获取指定的属性值,操作 checkbox 时选中返回checked,没有选中返回 undefined
prop(属性名称)
获取具有 true 和 false 两个属性的属性值
设置属性
attr("属性名","属性值")
prop("属性名","属性值")
移除属性
removeAttr("属性名")
attr()与prop()的区别:
共同点:
都可以获取元素的属性
不同点:
1、attr()可以获取自定义属性和固有属性的值,而prop()只能获取固有属性的值 (固有属性:元素本身就有的属性)
2、操作返回值是boolean类型的属性时,attr()返回的是对应的值,而prop()返回的是true和false
如何选择:
如果属性的返回值是boolean类型时,用prop()方法; (checked、selected、disabled)
如果是非boolean类型,则使用attr()方法
2.操作元素的样式
attr("class")
获取 class 属性的值,即样式名称
attr("class","样式名")
修改 class 属性的值,修改样式
attr():设置样式时,会重新设置class的属性值,所以会将原来的样式覆盖
addClass("样式名")
添加样式名称
addClass():添加样式,原来的样式依然保留,如果出现了相同样式,以后定义的样式为准
css()
添加具体的样式
设置一个样式
$("#remove").css("color","red");
同时设置多个
$("#remove").css({"font-weight":700,"height":"200px"});
css():设置具体的样式(设置行内样式,写在style属性中的样式)
removeClass(class)
移除样式名称
3.操作元素的内容
html()
获取元素的 html 内容
html("html 内容")
设定元素的 html 内容
text()
获取元素的文本内容,不包含 html
text("text 内容")
设置元素的文本内容,不包含 html
val()
获取元素 value 值
val(‘值’) 设定元素的 value 值
html()和text()
html()可以识别数据中的html标签并 显示出来;
text()不识别html标签,会当做纯文本显示
取值时,html()能够获取到元素中的html代码,text()只会获取纯文本
表单元素:取值赋值使用 val()
文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域、(按钮)等
非表单元素:取值赋值使用 html()和text()
div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等
4.创建元素、添加元素
创建元素
$(‘元素内容’)
添加元素
prepend(content)
在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记
$(content).prependTo(selector)
把 content 元素或内容加入 selector 元素开头
append(content)
在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记
$(content).appendTo(sector)
把 content 元素或内容插入 selector 元素内,默认是在尾部
before()
在元素前插入指定的元素或内容:$(selector).before(content)
after()
在元素后插入指定的元素或内容:$(selector).after(content)
5.删除元素、遍历元素
remove()
删除所选元素或指定的子元素,包括整个标签和内容一起删
empty()
清空所选元素的内容
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element 是当前的元素,此时是 dom 元素。
六、Jquery 事件
1. ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个,按顺序执行
$(document).ready(function(){})等价于$(function(){})
2. bind()绑定元素事件
简单的 bind()事件
$(selector).bind( eventType [, eventData], handler(eventObject))
绑定多个事件
$("#upwd").bind("blur",function(){
console.log("....");
}).bind("focus",function(){
console.log("。。。");
});
$("#upwd").bind({
"blur":function(){
console.log("失焦...");
},
"focus":function(){
console.log("聚焦。。。");
}
});