B044-jQuery基础
目录
-
-
- 一、jQuery入门
-
- 页面加载事件
- jQuery===$
- jQuery和Dom对象的转换
- 二、选择器
-
- 基本选择器
- 层级选择器和其他选择器
- 三、jQ的事件绑定
- 四、jQuery的DOM操作
-
- 文本操作
- 属性和样式操作
-
- API
- attr和data的区别
- 元素操作
- 五、遍历
- 六、jQuery发异步请求
-
一、jQuery入门
1.工程里创建目录放入jQuery文件
jquery-2.1.3.js与jquery-2.1.3.min.js功能一样，
.js代码可以看，
.min.js经过压缩，代码看不了，一般上线用.min.js
2.在html文件中引入jQuery文件
<script type="text/javascript" src="js/jquery-2.1.3.js" >script>
3.在其他script标签里写jQuery代码
页面加载事件
jQuery===$
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-2.1.3.js" >script>
<script type="text/javascript">
// js代码和jQuery代码的页面加载事件 $代表jQuery，还可以用jQuery，$===jQuery
// Js的页面加载事件：只能执行最后一个
onload=function(){
alert("js页面加载事件一。。。。")
}
onload=function(){
alert("js页面加载事件二。。。。")
}
onload=function(){
alert("js页面加载事件三。。。。")
}
// jQuery的页面加载事件：可以执行多个,依次执行,优先于js的页面加载事件
$(function(){
alert("jQ页面加载事件一。。。。");
})
$(function(){
alert("jQ页面加载事件二。。。。");
})
$(function(){
alert("jQ页面加载事件三。。。。");
})
script>
head>
<body>
body>
html>
jQuery和Dom对象的转换
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-2.1.3.js" >script>
<script type="text/javascript">
$(function(){// 页面加载事件
// dom方式
var btn1 = document.getElementById("btn1")
//btn1.innerHTML="哈哈哈" √
//btn1.html="哈哈哈" × 原生态dom不可以用jQuery方法
$(btn1).html("哈哈哈"); //dom对象转jq对象 直接使用$()把dom对象包起来
// jq方式 jq的对象
var btn2 = $("#btn2")
//btn2.html("呵呵呵"); √ jQuery.html == jsDom.innerHTML
//btn2.innerHTML="呵呵呵"; × jq对象不能直接使用原生态的dom中的方法或属性
btn2.get(0).innerHTML="呵呵呵" //jq转成dom对象
});
script>
head>
<body>
<button id="btn1">js的按钮button>
<button id="btn2">jq的按钮button>
body>
html>
二、选择器
基本选择器
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="./js/jquery-2.1.3.js" >script>
<script type="text/javascript">
// 页面加载事件
$(function(){
var he = $("#he"); // id选择器
console.debug(he);
var divs = $("div"); // 元素选择器/标签选择器
console.debug(divs);
var myClass = $(".myClass");// 类（class）选择器
console.debug(myClass)
var div2 = $("#ha,.myClass");// 多选
console.debug(div2);
});
script>
head>
<body>
<div>
<div id="ha">哈哈div>
<div id="he" class="myClass">呵呵div>
div>
body>
html>
层级选择器和其他选择器
代码见api和文档
三、jQ的事件绑定
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-2.1.3.js" >script>
<script type="text/javascript">
// 三种方式:
$(function(){// 页面加载事件
// 事件绑定方式一：
$("#btn1").click(function(){
alert("方式一。。。。。");
}).mouseover(function(){
alert("进来了。。。。")
})
// 事件绑定方式二：
$("#btn2").on("click",function(){
alert("方式二。。。。。。")
});
// 事件绑定方式三：
$("#btn3").bind("click",function(){
alert("方式三。。。。。。。")
})
// 解绑
$("#btn4").click(function(){
// 解绑按钮1 解绑的是你填入的事件 click
$("#btn1").off("click");
// 没有参数，解绑的是该元素绑定的所有事件
$("#btn3").off();
});
});
script>
head>
<body>
<button id="btn1">方式一button>
<button id="btn2">方式二button>
<button id="btn3">方式三button>
<button id="btn4">解绑button>
body>
html>
四、jQuery的DOM操作
文本操作
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
#div1{
border: 1px solid red;
width: 200px;
height: 200px;
background: green;
}
style>
<script type="text/javascript" src="js/jquery-2.1.3.js" >script>
<script type="text/javascript">
//页面加载
$(function(){
$("#div1").mouseover(function(){
// this是js原生态的对象，需要用$()转为jQuery对象
$(this).html("");
}).mouseout(function(){
$(this).html("");
});
});
script>
head>
<body>
<div id="div1">div>
body>
html>
属性和样式操作
API
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.myClass{
color: black;
}
style>
<script type="text/javascript" src="js/jquery-2.1.3.js" >script>
<script type="text/javascript">
// 页面加载事件 页面元素加载完后再执行
$(function(){
// 获取a标签 两个
var aa = $("a");
for(var i=0;i<aa.length;i++){
// dom转成jq对象
$(aa[i]).mouseover(function(){// 鼠标移入事件
// 改变背景颜色
// jQ.css相对于js的style，参数一： 属性 参数二： 属性值
$(this).css("background","green");
}).mouseout(function(){ // 鼠标移出事件
// 改变背景颜色
$(this).css("background","white");
}).click(function(){ //点击事件
$(this).addClass("myClass")
})
}
});
script>
head>
<body>
<a href="javascript:;">Filea>
<a href="javascript:;">Edita>
body>
html>
attr和data的区别
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-2.1.3.js">script>
<script>
$(function(){
/* attr("属性名"): 根据属性名获取属性值
attr("属性名","属性值") 两个参数是赋值
*/
console.debug($('#d1').attr('data-person'));
console.debug($('#d1').attr('data-name'));
console.debug($('#d1').attr('data-age'));
console.debug($('#d1').attr('data-sex'));//获取出来都是字符串
console.debug("====================================");
//1.属性名可以去掉“data-”前缀，2.获取出来出来的值会自动转换成相应类型。能转就转，不能转就以字符串的形式存在
console.debug($('#d1').data('person'));
console.debug($('#d1').data('name'));
console.debug($('#d1').data('age'));
console.debug($('#d1').data('sex'));
});
script>
head>
<body>
<input type="text" id="d1"
data-person='{"id":1,"name":"tom","address":"四川成都"}'
data-name="赵子龙"
data-age="22"
data-sex="true" />
body>
html>
元素操作
见课堂练习
1.checkbox.html
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>checkboxtitle>
<script type="text/javascript" src="../js/jquery-2.1.3.js" >script>
<script type="text/javascript">
$(function(){ // 页面加载事件
// 对全选按钮绑定事件
$("#checkAll").click(function(){
// 获取input 复选框
var hobbys = $("input[name='hobbies']");
// 设置选中状态 获取的已经是对象了，不需要遍历，attr(); prop(): 两个都是赋值，但只有prop能赋布尔值
hobbys.prop("checked",true);
});
// 全不选
$("#checkNotAll").click(function(){
// 获取input 复选框
var hobbys = $("input[name='hobbies']");
// 设置选中状态 获取的已经是对象了，不需要遍历，attr(); prop():
hobbys.prop("checked",false);
});
// 反选
$("#checkUnAll").click(function(){
// 获取input 复选框
var hobbys = $("input[name='hobbies']");
for(var i=0; i<hobbys.length;i++){
var flag = hobbys[i].checked; // 取值 获取当前选中或者没选中的装填
hobbys[i].checked=!flag; // 赋新值
}
});
});
// 全选或者全不选 不用页面加载事件是因为直接绑定了事件不需要去获取元素
function checkChange(msg){
// 获取本身的状态
var flag = msg.checked;
//alert(flag)
// 赋值给三个复选框----爱好
// 获取input 复选框
var hobbys = $("input[name='hobbies']");
hobbys.prop("checked",flag);
}
script>
head>
<body>
<h3>请选择你的爱好:h3>
<div>
<input type="checkbox" name="hobbies"/>打篮球
<input type="checkbox" name="hobbies"/>踢足球
<input type="checkbox" name="hobbies"/>上网
div>
<hr/>
<div>
<input type="button" id="checkAll" value="全选"/>
<input type="button" id="checkNotAll" value="全不选"/>
<input type="button" id="checkUnAll" value="反选"/>
<hr/>
<input type="checkbox" onchange="checkChange(this)" id="d1"/>
<label for="d1">全选/全不选label>
div>
body>
html>
2.user.html
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户新增title>
<script language="javascript" src="../js/jquery-2.1.3.js">script>
<script language="javascript">
$(function(){
// 添加元素
$("#btn_submit").click(function(){// 点击事件
// 获取输入的内容 val();
var name = $("#username").val(); // 获取用户名
var email = $("#email").val(); // 获取email
var tel = $("#tel").val(); // 获取tel
// 把内容放入表格中
// 写一个tr
var tr1 = ""+name+" "+email+" "+tel+" 五、遍历
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script type="text/javascript" src="js/jquery-2.1.3.js">script>
<script>
// 第一种 对象访问
$("img").each(function(i) {
this.src = "test" + i + ".jpg";
});
// [ 
, 
]
// 第二种 数组和对象操作
$.each(['a', 'b', 'c'], function(i, n) {
console.debug(i, n);
});
script>
head>
<body>
<img/><img/>
body>
html>
六、jQuery发异步请求
前端
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script type="text/javascript" src="/jquery.js/jquery2.x/jquery-2.1.3.js">script>
<script type="text/javascript">
// 页面加载事件
$(function(){
// 查询所有的省份
$.ajax({
type: "post", // 请求方式
url: "/findAllProvince", // 请求的路径
success: function(msg){ // 成功的回调函数
// console.debug(msg);
// 把省份插入到select中 msg是三个对象
$.each(msg,function(){
var op = "this.id+">--"+this.name+"--"
$("#provinceSelect").append(op);
});
}
});
})
function city(val){ // 内容改变事件
//alert(val);
// 清除之前的市
$("#citySelect").html("");
// 查询对应的市
$.ajax({
type: "post", // 请求方式
url: "/findCityByProId", // 请求的路径
data: "id="+val,
success: function(msg){ // 成功的回调函数
// console.debug(msg);
// 把省份插入到select中 msg是三个对象
$.each(msg,function(){
var op = "this.id+">--"+this.name+"--"
$("#citySelect").append(op);
});
}
});
}
script>
head>
<body>
省:
<select id="provinceSelect" onchange="city(this.value)">
<option>--请选择--option>
select>
市:
<select id="citySelect">
<option>--请选择--option>
select>
body>
html>
后端
package cn.itsource.controller;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.itsource.domain.City;
import cn.itsource.domain.Province;
@Controller
public class ProAndCityController {
@RequestMapping("/findAllProvince")
@ResponseBody // 不走视图解析器 json格式数据
public List<Province> findAllProvince(){
return Province.getAllProvince();
}
@RequestMapping("/findCityByProId")
@ResponseBody // 不走视图解析器 json格式数据
public List<City> findCityByProId(Long id){
return City.getCityByProvinceId(id);
}
}