Jquery
Jquery的下载与安装
-
官网下载：http://jquery.com/
-
拷贝到项目的js文件夹中
-
在页面引入js文件：
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <!--引入在线Jquery的核心js文件--> <!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
Jquery核心
- "$"符号在 Jquery中代表对 Jquery对象的引用, "Jquery"是核心对象
- 通过该对象可以获取 Jquery对象，调用 Jquery提供的方法等
- 只有 Jquery对象才能调用 Jquery提供的方法
DOM对象与Jquery包装集对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dom对象与Jquery包装集对象</title>
</head>
<body>
<input type="text" id="uname" />
<div id="hello">Hello Jquery</div>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
<script type="text/javascript">
// 原生Dom获取
var unameDom = document.getElementById("uname");
var helloDom = document.getElementById("hello");
console.log(unameDom);
console.log(helloDom);
console.log(document.getElementById("a"));
// Jquery包装集对象
var unameJquery = $("#uname");
var helloJquery = $("#hello");
console.log(unameJquery);
console.log(helloJquery);
console.log($("#a"));
console.log(helloJquery.length);
console.log($("#a").length);
console.log("===========Dom对象与Jquery包装集对象的转换===========");
// 将Dom对象转换成Jquery对象 用$()括起来
var jqueryUname = $(unameDom);
console.log(jqueryUname);
// 将Jquery对象转换成Dom对象 取下标
var domUname = unameJquery[0];
console.log(domUname);
// 注：只有Jquery对象才能用Jquery提供的方法
// each() jquery提供的遍历方法
jqueryUname.each(function(index,element){
console.log(index);
console.log(element);
console.log(this);
});
</script>
</html>
- 如果使用了Jquery对象，需要导入Jquery的js文件，否会报错：$ is not defined
Jquery选择器
基础选择器Basics
- id选择器
- $("#id属性值")：获取id属性为指定值的元素
- 如果出现同名id属性，只会获取第一个
- $("#id属性值")：获取id属性为指定值的元素
- 元素选择器
- $(“标签名/元素名”)：获取指定标签名的所有元素
- 类选择器
- $(".class属性值")：获取class属性为指定值的所有元素
- 通用选择器
- $("*")：获取页面中的所有元素
- 组合选择器
- $(“选择器1,选择器2,…”)：获取指定选择器的选中的所有元素
属性选择器
- $("[属性名]")：获取设置过指定属性名的所有元素
- $("[属性名=属性值]")：获取设置过指定属性名为指定值的所有元素
层次选择器Hierarchy
- 后代选择器：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元素
表单选择器
- 表单选择器：:input
- 查找所有的input元素：$(":input")
- 注意：会匹配所有的input、textarea、select和button元素
- 文本框选择器：:text
- 查找所有文本框：$(":text")
- 密码框选择器：:password
- 查找所有密码框：$(":password")
- 单选按钮选择器：:radio
- 查找所有单选按钮：$(":radio")
- 复选框选择器：:checkbox
- 查找所有复选框：$(":checkbox")
- 提交按钮选择器：:submit
- 查找所有提交按钮：$(":submit")
- 图像域选择器：:image
- 查找所有图像域：$(":image")
- 重置按钮选择器：:reset
- 查找所有重置按钮：$(":reset")
- 按钮选择器：:button
- 查找所有按钮：$(":button")
- 文件域选择器：:file
- 查找所有文件域：$(":file")
过滤选择器
- :checked：获取被选中的项（单选框或复选框、下拉框）
- :selected：获取被选中的项 （下拉框）
- :eq(index)：匹配jquery包装集中指定下标的一个元素（返回的是jquery对象）
- :gt(index)：匹配大于指定下标的所有元素
- :odd：匹配下标是奇数的元素
- :even：匹配下标是偶数的元素
Jquery的DOM操作
操作元素的属性
获取属性
| 方法 | 说明 | 举例 |
|---|---|---|
| attr() | 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined | attr(‘name’) |
| prop() | 获取具有true和false两个属性的属性值 | prop(‘checked’) |
- 如果属性的返回值是布尔类型，选择prop()，否则使用attr()
- attr和prop的区别
- 获取返回值是boolean类型的属性
- attr()获取时，如果设置过，则获取到具体的checked、selected、disabled；如果没有设置过该属性，则返回undefined
- prop()获取时，如果设置过，则获取到true；否则返回false
- 获取固有属性（元素本身就有的属性）和自定义属性
- attr()获取时，固有属性和自定义属性都可以获取
- prop()获取时，可以获取固有属性，不能获取自定义属性
- 获取返回值是boolean类型的属性
设置属性
- attr(“属性名称”, “属性值”)：例如：attr(‘checked’, ‘checked’)，attr(‘name’, ‘zs’)
- prop(“属性名称”, “属性值”)：设置具有true和false两个属性的属性值，例如：prop(‘checked’, ‘true’)
移除属性
- removeAttr(属性名)：移除指定的属性，例如：removeAttr(‘checked’)
操作元素的样式
- attr(“class属性”, “样式名”)：操作元素的class属性 （会将原来的样式直接替换成新的样式）
- addClass(“样式名”)：添加样式名 （会保留原来的样式，添加新的样式；如果出现相同的样式，以后定义的样式为准）
- css()：添加具体的样式，相当于添加行内样式，最终样式生成在style属性中
- 设置一个具体的样式：css(“样式名”, “样式值”)
- 例：css(‘color’, ‘white’)
- 设置多个样式：css({“样式名”: “样式值”, “样式名”:“样式值”, …})
- 例：css({“background-color”:“red”, “color”:"#fff"});
- 设置一个具体的样式：css(“样式名”, “样式值”)
- removeClass(class)：移除具体的样式名
操作元素的内容
- 非表单元素
- html()：获取标签中的内容，会包含html标签
- html(“html,内容”)：设置元素的内容，能识别html标签
- text()：获取标签中的纯文本，不识别htnl标签
- text(“text 内容”)：设置元素的文本内容，不能识别html标签
- 表单元素
- val()：获取元素value值
- val(“值”)：设定元素的value值
创建元素
- $(“元素内容”)
- $(’<p>this is a paragraph!!!</p>’)
添加元素
- prepend()：在指定元素的 内部 的前面添加一个元素
- 语法：$(selector).prepend(content);
- prependTo()：在指定元素的 内部 的前面添加一个元素
- 语法：(selector)$(content).prependTo(selector);
- append()：在指定元素的 内部 的后面添加一个元素
- 语法：$(selector).prepend(content);
- appendTo()：在指定元素的 内部 的后面添加一个元素
- 语法：$(content).appendTo(selector);
- before()：在元素前插入指定的元素或内容
- 语法：$(selector).before(content);
- after()：在元素后插入指定的元素或内容
- 语法：$(selector).after(content);
删除元素
- remove()：删除所选元素或指定的子元素，包括整个标签和内容一起删
- empty()：清空所选元素的内容
遍历元素
- each()
- 语法：$(selector).each(function(index,element){ })
- index 为遍历元素的序列号，从 0 开始
- element是当前的元素，此时是dom元素
- 语法：$(selector).each(function(index,element){ })
Jquery事件
ready()加载事件
- ready()加载事件
- 当页面中的DOM结构加载完毕后执行
- 相当于JS的onload事件
- onload事件
- 当页面中的DOM结构及资源加载完毕后执行
- onload事件
- ready()事件比load事件先执行
- ready()事件可以定义多个，先定义的先执行
// 格式：
$(document).ready(function() {
});
// 简写版：
$(function() {
});
bind()绑定元素事件
- 格式：$(“选择器”).bind(“事件名”,[参数列表],函数);
<body>
<button id="btn">按钮</button>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
<button id="btn7">按钮7</button>
</body>
<script type="text/javascript">
// 绑定事件
$("#btn").bind("click",function(){
console.log("Hello...");
});
$("#btn1").bind("click",test);
function test() {
console.log("Hi...");
}
// 直接绑定
$("#btn2").click(function(){
console.log("hahah...");
});
/**
* 绑定多个事件
*/
// 为同一个按钮设置多个事件，执行各自的函数
$("#btn3").bind("click",function(){
console.log("点击...");
}).bind("mouseout",function(){
console.log("移开...");
});
// 同一个按钮绑定多个事件，执行同一个函数
$("#btn4").bind("click mouseout",function(){
console.log("bind...");
});
// 直接给元素绑定事件，链式编程
$("#btn5").click(function(){
console.log("click...");
}).mouseout(function(){
console.log("mouseout..")
});
// 对象形式
$("#btn6").bind({
click:function(){
console.log("click...");
},
mouseout:function(){
console.log("mouseout..")
}
})
// 参数问题（了解）
$("#btn7").click({id:5,"uname":"zhangsan"},function(event){
var data = event.data;
console.log(data.id);
});
</script>
9604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
