java：JQueryReview

Posted 2020-09-28 咫尺天涯是路人丶

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>