一、 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("<div>hello world</div>");
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("<b>到</b>");
// prepend将html内容添加到子标签的第一个
$(".title").prepend("<b>到</b>");
//将所有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){
}
})
十、绑定数据
将对象data的每条数据生成P标签,绑定进标签div中
var data = [
{userName:“”, aget:18},
{userName:“”, aget:18},
{userName:“”, aget:18}];
for(let i = 0; i < data.length; i++){
const element = data[i];
var $appendData = $('<p>${element.userName}的年龄:${element.age}岁</p>');
$("div").append($appendData);
}
十一、动态元素的事件绑定
当使用JQuery向页面添加元素,并要在添加的元素上绑定事件时,可用$(document).on(‘click’,‘要选择的元素’,function(){}),如下:
var $sysfoot =$( '<button type="button" class="btn">确定</button>');
$("div").append($sysfoot );
$(document).on("click",".btn",function(){
alert("hello");
});