JQuery知识点

JQuery知识点 一、 load事件二、 选择器三、 事件四、 CSS五、 动画六、 获取标签文本七、 获取属性值八、 *** 作标签九、Ajax

一、 load事件

JQuery中load事件的写法，注意：在Javascript中load只能写一个，但在JQuery中这种写法不限次数：

完整写法

$(document).ready(function(){

});

简略写法

$(function(){
	
});

$(function(){
	
});

二、 选择器 传统写法

document.getElementById("标签ID名称");

新写法，建议手机版本上使用

// 获取id名称标签
document.querySelector("#id名称");  

// 获取第一个Class名称标签，注意Class名前加.
document.querySelector(".第一Class名称");  

// 获取所有Class名称的标签，返回一个数组
document.querySelectorAll(".Class名称");

Jquery的写法

$(".类名"); //返回数组
$("#id名"); //返回数组
$("#id名")[0]; //Jquery标签转换为普通标签
$(document.getElementById("标签ID名称")); //普通标签封装成Jquery标签
$("*"); //获取所有标签
$("div.title");//获取Class名为title的div标签
$(".title:first-child");//获取第一个Class名为title的标签

三、 事件 鼠标事件
click dblclick mouseenter mouseleave hover键盘事件
keypress keydown keyup表单事件
submit changge focus blur文档/窗口事件
load resize scroll unload

// 所有名为title的标签，添加click事件处理方法
$(".title").click(function(){
 // 获取被点击标签内的html文本
 var txt = $(this).html();
});

四、 CSS

$(".title").css("color", "red");//设置一个css属性
$(".title").css({"color":"red", "backgroud-color":"blue"});//设置多个css属性
$(".title").hide(); //隐藏标签
$(".title").hide(2000); //2秒动画后隐藏
$(".title").hide(2000, function({ //2秒动画后隐藏，然后调用匿名方法
}));
$(".title").show(2000, function({ //将隐藏标签2秒动画后显示，然后调用匿名方法
}));
$(".title").fadeOut(2000, function({ //将显示标签2秒淡出动画，然后隐藏，再调用匿名方法
}));
$(".title").fadeIn(2000, function({ //将隐藏标签2秒淡入动画，然后显示，再调用匿名方法
}));
$(".title").slideDown(2000, function({ //将显示标签2秒动画，然后折叠，再调用匿名方法
}));
$(".title").slideUp(2000, function({ //将折叠标签2秒动画，然后拉开显示，再调用匿名方法
}));
$(".title").slideToggle(2000, function({ //2秒动画，如果是折叠就拉开，如果是拉开就折叠，再调用匿名方法。slideUp和slideDown组合使用时，不用维护状态。
}));

$("div").width();// 获取div标签宽
$("div").height(); // 获取div标签高度
$("div").innerHeight(); // 获取div标签内高，包括padding-top、padding-bottom和标签的高度
$("div").outerHeight(); // 获取div标签的外高，包括border-top、border-bottom和标签的内高

五、 动画

animate方法，将数值属性实现动画效果

$(".title").animate({"height":"200px","width":"300px"});  //将标签的高实现动画效果
$(".title").animate({"height":"+=200px"});  //当不知道初始值时，可使用“+=”将实现数值的正增长

可以多个animate方法写在一起，实现连续的动画效果

$(".title").animate({"height":"+=200px"}); 
$(".title").animate({"width":"+=200px"}); 
$(".title").animate({"top":"+=200px"}); 
$(".title").animate({"stop":"+=200px"}); 

可以使用stop方法，停止动画，如果stop不带参数第一次点击停止动画，第二次点击动画继续

$(".title").animate({"height":"+=200px"}); 
$(".title").animate({"width":"+=200px"}); 
$(".title").animate({"top":"+=200px"}); 
$(".title").animate({"stop":"+=200px"}); 
$(".title").stop();

stop(stopAll, gotoEnd)方法，两个参数都为布尔类型，第1个参数为true停止所有的animate方法的动画，如果为false只停止该条animate方法的动画。第2个参数gotoEnd为true，则直接停止到动画的最后的参数；如果为false，则停止到动画当时进行处。

$(".title").animate({"height":"+=200px"}); 
$(".title").animate({"width":"+=200px"}); 
$(".title").animate({"top":"+=200px"}); 
$(".title").animate({"stop":"+=200px"}); 
$(".title").stop(false, false);

六、 获取标签文本

html()方法获取所有子标签内容，包含表示标签的文本；
text()方法获取所有子标签的内容，只包含文本，不包含标签；
如果方法传递字符串作为参数，则设置该标签的子标签为字符串内容

var html = $(".title").html( ); 
var text = $(".title").text( );  
$(".title").html("hello world"); 

val()方法获取表单标签中的value属性值

var val = $(".title").val( ); 

<input id='title' type='text' value='hello world' />

七、 获取属性值

// prop设置标签的属性值
$(".title").prop("herf", "https://www.360.com"); 
// attr设置标签的属性值
$(".title").attr("herf", "https://www.360.com"); 
// 获取属性值
var html = $(".title").attr("herf"); 
var html = $(".title").prop("herf"); 
//只有attr能获取自定义的attr属性值，prop不能
var html = $(".title").attr("tag"); 

<a href="https://www.baidu.com" tag="1">跳转a>

八、 *** 作标签

// append将html内容添加到子标签的最后一个
$(".title").append("到"); 
// prepend将html内容添加到子标签的第一个
$(".title").prepend("到"); 
//将所有class为title的标签删除掉，子标签和父标签一起删除
$(".title").remove();
//将所有class为title的标签的子标签清空，保留父标签。
$(".title").empty();

<a class="titile" href="https://www.baidu.com" tag="1">跳转a>

$("div").parent(); // 获取父标签
$("div").parents(); // 获取所有父标签
$("div").children(); // 获取子标签，注意不是后代标签
$("div").find("*"); // 获取所有后代标签
$("div").find(".class"); //获取后代中的所有Class标签
$("div").siblings();//获取所有兄弟标签 
$("div").next();//获取下一个兄弟标签
$("div").nextAll();//获取之后的所有兄弟标签
$("div").eq(0);//获取所有div标签里面的第1个div
$("div").filter(".t");//获取所有div标签里面class为t的div标签
$("div").not(".t");//与filter相反，获取所有div标签里面class不为t的div标签

九、Ajax

与服务器交互数据

// 设置async为true后，后面的get调用，以异步方式进行，否则后面的get方法以同步方式进行。默认为true
$.ajaxSteup({
    async:false
})

// Ajax调用方法一，简单方法
//get方式，如果是post方式将get改为post
$.get("http://localhost:10137/jobs",{},function(res){

})

// Ajax调用方法二，标准方法
$.ajax({
async:true,//false为与主线程同步
data:{ },
url:"http://localhost:10737/jobs",
type:"GET",
success:fuction(res){

}
})