Important:
1.id选择器,class选择器,标签选择器:
$("#id"); $(".class"); $("标签");
2.jQuery的定义:
引入jQuery文件--->jquery-3.2.1.min.js
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
第一种:
$(function(){
});
第二种:
$(document).ready(function(){
});
3.函数:
1.val():获取表单中的元素的值(第一个元素的值)
2.text():获取元素的文本信息
3.addClass(""):给某个标签添加类样式
4.removeClass(""):移除,某个标签的类样式
5.css():如果只有一个参数,获取当前选中标签的样式值;如果有两个参数,给某个元素添加行内样式
6.html(""):给某个标签添加文本信息,或者html代码,和js中的innerHTML实现效果一致
7.append(""):拼接,给某个标签拼接文本信息,或者html代码
8.attr():如果只有一个参数:或者某个标签的属性值;如果有两个参数,给某个标签赋值
prop():和attr实现的效果一样
attr()和prop的区别:
attr():获取或赋值不是自带的属性值,自己定义的属性值
$("a").attr("turn");
prop():获取或赋值自带的属性值,原本就支持的属性值
$("a").prop("href");
<a href="http://www.baidu.com" target="_blank" name="a标签" turn="baidu">百度</a>
9.trigger():会自动触发事件
10. on():触发一个事件
4.事件:
click, dblclick, blur, focus, submit
keyup, keydown, mouseover(鼠标悬浮)
<input type="button" value="测试" />
$("input").click(function(){给input绑定click事件
});
$("input").on("click", function(){
});
$("ul").on("click","li",function(){
});
<ul>
<li></li>
</ul>
5.选择器:
+:选择出相邻元素(只能是一个)
~:选择出所有的兄弟元素(所有兄弟元素)
$(":input"):选择出所有input(input,select,textarea)
$("td").parent();选择出td的直接父级元素
$("td").parent().parent();选择出td的直接父级元素的父级元素
$("td").parents();选择出td的所有祖先元素
6.效果:
show():显示
hide():隐藏
toggle():既可以显示又可以隐藏
slideUp():向上滑动直到隐藏
slideDown():向下滑动,直接显示
slideToggle():滑动
ajax:(servlet学完)牵扯前后台数据进行交互
7.form验证:
第一种:
// 第一步:封装验证函数(以username为例)
function checkUsername() {
// 第一步:获取input的值
var userValue = $("#uname").val();
// 第二步:定义正则表达式
var reg = /^w$/;
// 第三步:匹配正则
if(reg.test(userValue)) {
格式正确
return true;
} else {
格式错误
return false;
}
}
// 第四步:定义一个boolean类型的标记
var userFlag = true;
// 第五步:绑定事件
$(function(){
// 第六步:选中input对象
var ins = $("uname");
// 第七步:给选中的对象绑定事件
ins.blur(function(){
// 调用封装的函数,并接收
userFlag = checkUsername();
});
// 第八步:给form表单绑定submit事件
$("form").submit(function(){
return userFlag;
});
});
<form>
<input type="text" name="username" id="uname" />
</form>