JQuery : (javascript 的代码框架)
jQuery作用:
简化代码,提高效率。
jQuery主旨:
write less do more
引入 jQuery 框架
<script type="text/javascript" src="/scripts/jquery-3.3.1.js"></script>
基础语法是:
$(selector).action(执行对元素的操作)
ready() 方法:
当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法
如:
$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
});
语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)
程序一:
函数:
函数 | 作用 |
---|---|
event.preventDefault() | 阻止元素发生默认的行为 |
event.stopPropagation() | 该方法将停止事件的传播,阻止它被分派到其他 Document 节点。 |
element.show( [ speed [ , callback ] ] ) | 指定的 时间内显示 element 所对应那些元素 |
element.hide( [ speed [ , callback ] ] ) | 在 指定的 时间内隐藏 element 所对应那些元素 |
element.on( type , callback ) | 为指定的元素绑定事件处理函数 |
<script type="text/javascript">
(function () {
var hide = function (e) {
e.stopPropagation();//停止事件传播
e.preventDefault();//取消默认事件
//hide( );在 指定的 时间内隐藏 element 所对应那些元素
$( ".hello" ).hide( 1000 ); // "slow" 慢 , "fast" 快
$( "button[type=button]" ).html( "显示" ) ;
$( "button[type=button]" ).on( "click" , show );
};
var show = function(e){
e.stopPropagation();
e.preventDefault();
//show(); 指定的 时间内显示 element 所对应那些元素
//第一个参数 speed 表示显示速度
//第二个参数 callback 表示显示操作完成后所执行的函数
$( ".hello" ).show( 1000 ); // "slow" 慢 , "fast" 快
$( "button[type=button]" ).html( "隐藏" ) ; // document.querySelector( "button[type=button]" ).innerHTML = "隐藏" ;
$( "button[type=button]" ).on( "click" , hide );//为指定的元素绑定事件处理函数
}
$( "button[type=button]" ).on( "click" , show );
/*
var btn = document.querySelector( "button[type=button]" );
var show = function(){
var list = document.querySelectorAll( ".hello" );
var array = Array.from( list ) ;
array.forEach( function( e ){
e.style.display = "block" ;
});
};
btn.addEventListener( "click" , show , false );
*/
})();
</script>
等待文档就绪:
<script type="text/javascript">
(function () {
var show = function () {
var list = $( ".hello" );
$.each( list , function( index , element ){
console.log( element );
} );
};
$( show ); // $( document ).ready( show );
})();
</script>
构造元素:
<script type="text/javascript">
(function () {
// 将 选择器 命中的所有元素 封装到一个 jQuery 实例中
var btn = $( ".wrapper button" ); // jQuery( ".wrapper button" ) ;
var produce = function(e){
e.stopPropagation(); // 停止事件传播
e.preventDefault() ; // 取消事件的默认行为
// 根据 参数传入的 字符串 构造相应的 DOM ,并将该 DOM 对象 封装到一个 jQuery 对象(instance)中
var e = $( "<div style='text-align:center;border:1px solid blue ;'>" + Date.now() + "</div>" );
$( ".wrapper" ).append( e ) ;
};
btn.on( "click" , produce );
})();
</script>
load
<a href="" onclick="load()">使用JQuery执行load方法</a>
有两次刷新, 先走 onClick的方法,取到数据回来之后,赋值显示。
接着 走 href=""的路径,但是这个属性没有给值,所以会把当前的页面重新再刷新一次。所以导致看不见值。
//找到这个元素, 去执行加载的动作, 加载/day16/DemoServlet02 , 得到的数据,赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT , xhr) {
//找到id为text01的元素, 设置它的value属性值为 responseText 对应的值
$("#aaa").val(responseText);
});
Get
$.get("/day16/DemoServlet02" , function(data ,status) {
$("#div01").text(data);
});
赋值显示
- val(“aa”);
只能放那些标签带有value属性
- html(“aa”); —写html代码
- text(“aa”);
其实没有什么区别,如果想针对这分数据做html样式处理,那么只能用html()
load & get
-
load
$("#元素id").load(url地址);
$("#div1").load(serlvet); —> 使用的get请求,回来赋值的时候, 使用text();去赋值
-
get
语法格式 : $.get(URL,callback);
使用案例: $.get("/day16/DemoServlet02" , function(data ,status) { $("#div01").text(data); });
-
post
语法格式:$.post(URL,data,callback);
function post() { $.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) { //想要放数据到div里面去。 --- 找到div $("#div01").html(data); }); }
使用JQuery去实现校验用户名
function checkUserName() {
//1. 获取输入框的内容
var name = $("#name").val();
//2. 发送请求
$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
//alert(data);
if(data == 1){//用户名存在
//alert("用户名存在");
$("#span01").html("<font color='red'>用户名已被注册</font>");
}else{
//alert("用户名可用");
$("#span01").html("<font color='green'>用户名可以使用</font>");
}
} );
//3. 输出响应的数据到页面上。
}