页面加载函数
<script>
// JS页面加载函数, 只允许一个, 多个的话会被覆盖
onload = function() {
alert("A");
}
onload = function() {
alert("AA");
}
// JQ页面加载函数, 允许有多个, 按照顺序执行
$(function() {
alert("B");
});
$(function() {
alert("BB");
});
</script>
JQ和JS对象使用上的区别
<script>
$(function() {
// 通过JS给div1设置内容
var div1 = document.getElementById("div1");
div1.innerText = "JS设置的新内容";
// 通过JQ给div2设置内容
// JQ使用选择器来取代 getElementxxx
$("#div2").text("JQ设置的新内容");
// 结论: JS对象不能使用JQ的函数, JQ对象也不能使用JS的函数/属性
// JS -> JQ 掌握
$(div1).text("JQ给div1设置的新内容");
// JQ对象, 能不能使用 JS 的属性 innerText
// JQ -> JS 了解
$("#div2").get(0).innerText = "JS给div2设置的新内容";
});
</script>
选择器
- 基本选择器
<script>
$(function() {
/*document.getElementById("btn1").onclick = function() {
ele.style.backgroundColor = "pink";
}*/
// 点击btn1, 让id=one的元素, 样式背景颜色设置为粉色
// 选择btn1, 添加onclick事件
$("#btn1").click(function() {
// 让id=one的元素
// 1.id选择器
$("#one").css("background-color", "pink");
});
// 2.类选择器
$("#btn2").click(function() {
// var arr = document.getElementsByClassName(".mini");
// JQ中选择器选择出多个元素, 内部自带迭代器
$(".mini").css("background-color", "pink");
});
// 3.元素选择器
$("#btn3").click(function() {
$("div").css("background-color", "pink");
});
// 4.所有元素
$("#btn4").click(function() {
$("*").css("background-color", "pink");
});
// 5.组合选择器
$("#btn5").click(function() {
$("#two, .mini").css("background-color", "pink");
});
});
</script>
- 层级选择器
<script>
$(function() {
// 1.所有的后代元素
$("#btn1").click(function() {
$("body div").css("background-color", "pink");
});
// 2.所有的子代元素
$("#btn2").click(function() {
$("body > div").css("background-color", "pink");
});
// 3.下一个兄弟元素
$("#btn3").click(function() {
$("#one + div").css("background-color", "pink");
});
// 4.所有兄弟元素
$("#btn4").click(function() {
$("#one ~ div").css("background-color", "pink");
});
});
</script>
- 基本过滤选择器
<script>
$(function() {
// body中的第一个div元素
$("#btn1").click(function() {
$("body div:first").css("background-color", "pink");
});
// body中的最后一个div元素
$("#btn2").click(function() {
$("body div:last").css("background-color", "pink");
});
// body中的奇数的div
$("#btn3").click(function() {
$("body div:odd").css("background-color", "pink");
});
// body中的偶数的div
$("#btn4").click(function() {
$("body div:even").css("background-color", "pink");
});
})
</script>
- 属性选择器
<script>
$(function() {
// 选择有id属性的div
$("#btn1").click(function () {
$("div[id]").css("background-color","pink");
});
// 选择有id属性的值为two的div
$("#btn2").click(function () {
$("div[id='two']").css("background-color","pink");
});
})
</script>
- 表单选择器
<script>
$(function () {
// 选择form中所有input元素
$("#btn1").click(function () {
$(":input").css("background-color","pink");
});
// 选择form中文本框
$("#btn2").click(function () {
$(":text").css("background-color","pink");
});
});
</script>
文本内容的设置
- html()
- text()
- val()
<script>
$(function() {
// 获得p标签中的标签内容q
var str = $("#p1").html();
// 设置p标签内容 innerHTML
$("#p1").html('<font color="red">JQ的html方法添加的标签内容</font>');
// 获得div标签中的文本内容
var strDiv = $("#div1").text();
// 设置div标签中的文本内容 innerText
$("#div1").text('<font color="red">JQ的text方法添加的文本内容</font>');
// 输入框中的内容, value
var val = $("input").val();
// 设置输入框中的内容
$("input").val("JQ设置input的内容");
});
</script>
显示效果
- show()、hide()、toggle()
- slideDown()、slideUp()、slideToggle()
- fadeIn()、fadeOut()、fadeToggle()
属性设置
-
attr(“属性名”) — 获得属性对应的值
attr(“属性名”, “值”) — 设置属性对应的值
– attribute 自定义属性，html不支持的属性，例：color -
prop(“属性名”) — 获得属性对应的值
prop(“属性名”, “值”) — 设置属性的值
— property 固有属性, html本身支持的属性 例：href、src、checked -
添加/删除class属性
addClass(className) — 添加完的class可以直接使用样式表
removeClass(className)
JQuery的循环
<script>
$(function() {
var arr = ["杭州","宁波",'温州','湖州','台州'];
// jquery数组.each(callback)
$("div").each(function(i) {
console.log(i); // 循环的下标
console.log(this); // 每一个元素 this 属于JS对象
});
// JQ的全局函数
$.each(arr, function(i, n) {
console.log(i); // 循环的下标
console.log(n); // 取出来的每一个元素
})
})
</script>
文档操作
- append()
- prepend()
- before()
- after()
<script>
$(function (){
var $op = $("<option>芒果</option>");
// 将芒果加到梨后面
$("select").append($op);
// 将芒果加到苹果前面
$("select").prepend($op);
// 将芒果加到柿子后面
$("option:eq(1)").after($op);
// 将芒果加到柿子前面
$("option:eq(1)").before($op);
$op.insertBefore($("option:eq(1)"));
// 清除所有子元素 innerHTML = "";
$("select").empty();
})
</script>
<body>
<select>
<option>苹果</option>
<option>柿子</option>
<option>梨</option>
</select>
</body>
案例一：用JQuery实现定时弹广告（样式调整、效果设置）
<script>
$(function() {
setTimeout("showAd()", 2000);
});
function showAd() {
$("#ad").css("display" , "block");
// JQ中的显示函数
// 设置效果
// $("#ad").show();
$("#ad").slideDown("slow", "swing");
// $("#ad").fadeIn("slow");
// $("#ad").fadeToggle("slow");
setTimeout("hideAd()", 2000);
}
function hideAd() {
$("#ad").css("display" , "none");
// JQ中的关闭函数
// 设置效果
// $("#ad").hide();
$("#ad").slideUp();
// $("#ad").fadeOut("slow");
// $("#ad").fadeToggle("slow");
}
</script>
案例二：使用jQuery实现表格隔行变色（选择器使用、样式调整）
<script>
$(function() {
/*$("tbody tr:odd").css("background-color", "red");
$("tbody tr:even").css("background-color", "yellow");*/
// 不直接修改样式, 使用现有css样式表, 添加class属性
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
// 选择器中自带迭代, 不需要手动循环
$("tbody tr").mouseover(function() {
// 先保留之前的颜色
// this.setAttribute("color", this.style.backgroundColor);
$(this).attr("color", $(this).css("background-color"));
$(this).css("background-color", "white");
});
$("tbody tr").mouseout(function() {
// 取出之前保留的颜色, 设置颜色
// var color = this.getAttribute("color");
var color = $(this).attr("color");
$(this).css("background-color", color);
});
});
</script>
案例三：使用jQuery实现全选或全不选（属性设置）
<script>
$(function() {
$("#selectAll").click(function() {
// 1.获得全选按钮的选中状态
// var flag = this.checked;
var flag = $(this).prop("checked");
// 2.获得其他所有的checkbox
$("input").prop("checked", flag);
});
});
</script>
案例四：使用jQuery实现省市二级联动（jQuery的循环）
<script>
// 定义省份对应的城市列表 -- 真正开发时是从数据库中获取的
var cities = [
["直辖市"],
["杭州","宁波",'温州','湖州','台州'],
['济南','青岛','威海','烟台'],
['南昌','上饶','宜春']
];
$(function() {
$("#provinceSelect").change(function() {
// 获得当前选中的省份,下拉列表的值 - 浙江
// 获得浙江对应的城市列表 - 数组
var citys = cities[$(this).val()];
// 清空原来的select内容, 保留 <option>--- 请选择城市 ---</option>
$("#citySelect").html("<option>--- 请选择城市 ---</option>");
// 为每一个城市创建一个选项 option标签
$.each(citys, function(i, n) {
// 创建option标签: <option></option>
var option = document.createElement("option");
// 设置标签体: <option>杭州</option>
$(option).text(n);
// 并且将这个选项添加到城市下拉列表中 select
// $("#citySelect").append(option);
$(option).appendTo($("#citySelect"));
});
});
})
</script>
<body>
<select id="provinceSelect">
<option>--- 请选择省份 ---</option>
<option value="0">北京</option>
<option value="1">浙江</option>
<option value="2">山东</option>
<option value="3">江西</option>
</select>
<select id="citySelect">
<option>--- 请选择城市 ---</option>
</select>
</body>
案例五：使用jQuery实现下拉列表左右选择（选择器使用、文档操作）
<script>
$(function() {
$("#selectOneToRight").click(function (){
// 将左边选中的选项, 追加到右边列表中
$("#left option:selected").appendTo($("#right"));
});
$("#selectOneToLeft").click(function (){
// 将右边选中的选项, 追加到左边列表中
$("#right option:selected").appendTo($("#left"));
});
// 将左边所有选项, 追加到右边列表中
$("#selectAllToRight").click(function () {
$("#right").append($("#left option"));
});
// 将右边所有选项, 追加到左边列表中
$("#selectAllToLight").click(function () {
$("#left").append($("#right option"));
});
})
</script>
补充：
json — JS中的对象
/**
* 案例
* {
* "param1":"value1",
* "param2":{},
* "param3":[{key:value,key:value},{key:value,key:value}]
* }
*/
var person = {
age: 30,
name: {
firstname: "小",
lastname: "王"
},
child: [
{
name: "a",
age: 5
},
{
name: "b",
age: 6
}
]
};
console.log(person.child[1].name);
validation插件 - 在JQuery基础上开发的
- 指定错误提示的位置:
<label for="gender" class="error"></label>
- validation插件使用
<script>
$(function() {
// 校验表单 {}: json就是JS的对象
$("#regForm").validate({
// 校验的规则
rules: {
// 校验的输入框 input 对应的name
username: {
// 用户名校验的选项
required: true,
minlength: 6,
maxlength: 18,
checkUser: true // 自定义校验
},
password: {
required: true
},
repassword: {
required: true,
equalTo: password
},
gender: {
required: true
}
},
messages: {
username: {
required: "用户名不能为空",
minlength: '请输入6~18位',
maxlength: '请输入6~18位'，
checkUser: '用户名已存在'
},
password: {
required: "密码不能为空"
},
repassword: {
required: "密码不能为空",
equalTo: "两次密码不一致"
},
gender: {
required: "必须选择性别"
}
}
});
})
</script>
- 自定义校验
$(function() {
// 校验 用户名是否已经存在
$.validator.addMethod("checkUser",
// function 返回false, 校验不通过
// 返回true ,校验通过
function (value, element, params) {
// value: 输入框内容
// element: 输入框标签
// params: 校验参数
var flag = false;
$.ajax({
url: "/web_war_exploded/CheckUserServlet",
data: {username: value},
success: function (data) {
//data.flag -> true -> 存在
//data.flag -> false -> 不存在
flag = !data.flag;
},
dataType: "json",
async: false // 需要 同步
});
// 存在, 返回false
// 不存在, 返回true
return flag;
});
}
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
