一、JQuery概述
jQuery是什么:
- 是一个javascript代码仓库，我们称之为javascript框架。
- 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
如何引入JQuery包?
引入本地的JQuery
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
Jquery有两个下载版本：一个是产品版，已经经过了精简和压缩，用于实际的网站中；另一个是开发版，代码没有经过精简和压缩，有很好的可读性，用于测试和开发
jQuery对象转DOM对象
var obj = console.log($("#name")[0]);//将jQuery对象转化成DOM对象
obj = console.log($("#name").get(0));
var element = $(document.getElementById("name");//将JavaScript原生HTML元素对象转化成jQuery对象
二、JQuery选择器
常用jQuery选择器有基本选择器、层级选择器、过滤选择器和属性选择器。
（一）基本选择器：
<script>
//类选择器
var array = $(".z");
for(var i = 0;i<array.length;i++){
console.log(array[i]);
}
$("#time").html("2020-08-08");
//标签选择器
var array = $("script");
for(var i = 0;i<array.length;i++){
console.log(i+" "+array[i])
}
//分组选择器
var array = $("script,#time");
for(var i = 0;i<array.length;i++){
console.log(i+" "+array[i])
}
//后代选择器
var array = $("html body .z");
for(var i = 0;i<array.length;i++){
console.log(i+" "+array[i])
}
</script>
（二）过滤选择器
- :odd 选取索引是偶数的所有元素，索引从0开始
- :even选取索引是奇数的所有元素，索引从0开始
<script>
$("tr:odd").css("background-color","red");//设置表格奇数行背景色
$("tr:even").css("background-color","blue");//设置表格偶数行背景色
</script>
- :checked选取所有被选中的元素(单选框，复选框)
- :selected选取所有被选中选项元素(下拉列表)
<input type = "radio" name = "sex" value = "0" checked="checked"/>女
<input type = "radio" name = "sex" value = "1" />男
<script>
var value = $("[name = 'sex']:checked").val();
console.log(value);
</script>
<input type = "checkbox" name = "hobby" value = "001" checked="checked"/>篮球
<input type = "checkbox" name = "hobby" value = "002" checked="checked"/>足球
<input type = "checkbox" name = "hobby" value = "003" />乒乓球
<script>
var value = $("[name = 'hobby']:checked");
for(var i = 0;i<value.length;i++){
console.log(value[i].value);
}
$("[name = 'hobby']:checked").each(function(){
console.log(this.value);
})
</script>
<select id= "province">
<option value= "">--请选择--</option>
<option value= "001" selected="selected">北京市</option>
<option value= "002">河南省</option>
<option value= "003">河北省</option>
</select>
<script>
var value = $("#province option:selected").val();
console.log(value);
</script>
（三）属性选择器
<input type = "radio" name = "sex" value = "0" checked="checked"/>女
<input type = "radio" name = "sex" value = "1" />男
<script>
var value = $("[name = 'sex']:checked").val();
console.log(value);
</script>
三、DOM操作
（一）onload操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
//方法一：
function t(){
var id = $("#title").attr("id");
//或者id的属性值
console.log(id);
//设置属性值key，value
$("#bd").attr("href","http://www.baidu.com");
}
//方法二：等效于οnlοad="t()"
$(document).ready(function(){
$("#bd").attr("href","http://www.baidu.com");
});
//方法三：简化版：
$(function(){
//设置属性值key，value
$("#bd").attr("href","http://www.baidu.com");
})
</script>
</head>
<body onload="t()">
<a id="bd" href = "http://www.baidu.com">百度</a>
</body>
</html>
（二）html代码/文本
<span id = "time"></span>
<script>
document.getElementById("time").innerHTML = "<b>郑州大学</b>";//在span标签中添加代码
document.getElementById("time").innerText = "<b>郑州大学</b>";//在span标签中添加文本
//等效于
$("#time").html("<b>郑州大学</b>");
$("#time").text("<b>郑州大学</b>");
</script>
（三）其他
attr()：设置或返回被选元素的属性值
removeAttr()：删除属性
//或取id的属性值
var id = $("#title").attr("id");
//设置属性值(key，value)
$("#bd").attr("href","http://www.baidu.com");
//删除href属性
$("#bd").removeAttr("href");
//添加类选择器
$("#title").addClass("zzu");
//删除类选择器
$("#title").removeClass("zzu");
//添加css
$("#title").css("font-size","36px");
//切换样式——如果类名存在则删除它，如果类名不存在则添加它
$("#title").toggleClass("zzu");
//判断元素中是否含有某个 class，如果有，则返回 true；否则返回 false；
$("title").hasClass("zzu");
val([val|fn|arr])： 获取或设置匹配元素当前值
//val()获取值
var value = $("[name = 'user_name']").val();
console.log(value);
//val()设置值
//文本框
$("[name = 'user_name']").val("root");
//单选框，注意传入的数组类型的值
$("[name = 'sex'").val(["0"]);
//复选框
$("[name='hobby'").val(["001","002"]);
//下拉列表
$("#province").val(["001"]);
$("#province").val("003");
scrollTop([val])：返回或设置匹配元素相对滚动条顶部的偏移，常用来实现“返回顶端”
<div onclick="goTop()" style="width:50px;height: 50px;background-color: blue;position: fixed;right: 10px;bottom: 10px;">
回到顶部
</div>
<script>
//回到顶端
function goTop(){
$(document).scrollTop(0);
}
</script>
- 内部插入
append(content|fn) ：向每个匹配元素内部的末尾处插入内容；
prepend(content|fn) ：向每个匹配元素内部的开始处插入内容；
- 外部插入
after(content|fn) ：向每个匹配的元素后插入内容；
before(content|fn) ：向每个匹配的元素前插入内容；
- 包裹：
wrap(html|ele|fn)：把所有匹配的元素用其他元素的结构化标记包裹起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
</head>
<body>
<div id= "content">
<span>郑州</span>
</div>
<script>
$("div").append("<span>河南1</span>");//在元素内部的末尾插入
$("div").prepend("<span>河南2</span>");//在元素内部的开始插入
$("span").after("<span>开封1</span>");//向每个匹配的元素后追加内容
$("span").before("<span>开封1</span>");//向每个匹配的元素前插入内容
</script>
<img src = "img/favicon.ico" />
<script>
$("img").wrap("<a href = 'http://www.baidu.com'></a>");//将a标签包裹图片
</script>
</body>
</html>
replaceWith() ：将所有匹配的元素替换成指定的HTML或DOM元素
empty() ：删除匹配的元素集合中所有的子节点，不包括自身;
remove([expr]) ：删除匹配元素，包括自身
（四）事件绑定
- bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数
- unbind(type,[data|fn]])：删除每个匹配的元素上已绑定的事件，如果没有参数，则删除该元素上绑定的所有事件
- one(type,[data],fn)：该方法可以为元素绑定处理函数，当处理函数触发一次后, 立即被删除，即在每个对象上, 事件处理函数只会被执行一次。
- change([[data],fn]) ：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件；
- click([[data],fn]) ：鼠标点击匹配元素时触发click事件
- keydown([[data],fn]) ：当键盘或按钮被按下时触发keydown事件submit([[data],fn])：提交表单时触发submit 事件，该事件只适用于表单元素
$("div").bind("click",function(){
console.log(this);
})
$("div").bind({
mouseover:function(){
this.style.backgroundColor = "red";
},
mouseout:function(){
this.style.backgroundColor = "blue";
}
});
//解除绑定
$("div").unbind("mouseout");
$("select").change(function(){
/*var array = this.options;
for(var i = 0;i<array.length;i++){
var option = array[i];
if(option.selected){
console.log(option.value);
}
}*/
console.log($(this).val());//将dom对象转化为jQuery对象
});
//窗口点击回车键触发
$(window).keydown(function(e){
if(e.keyCode == 13){
$("form").trigger("submit");
// $("form").submit();
}
})
1187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
