学jQuery:这些就够了!
废话不多说,进入正题
下面就是有关jQuery的语法和基础操作。
jQuery语法基础
一、使用JQuery必须先导入jquery.x.x.x.js文件。
<script src="js/jquery.js"></script>
二、JQuery中的选择器:
$("选择器名称").函数名();
注意:$是jQuery的缩写**,也就是说,选择器可以使用 jQuery(":input")
三、JQuery 文档就绪函数:
$(document).ready(function(){
// JQuery代码
console.log(jQuery(":input:disabled"));
});
简写形式:$(function(){});</pre>
JQuery文档就绪函数与window.onload的区别
1.window.onload必须等待网页资源(包括图片等)全部加载完成后,才能执行;
文档就绪函数只需等到网页DOM结构加载完成后,即可执行。
2.window.onload在一个页面中,只能写一次;
文档就绪函数在一个页面中,可以有N个。</pre>
四、JS对象和jQuery对象:
- 使用$("")取到的节点为jQuery对象,只能调用JQuery方法,不能调用原生JS方法。
$("#div").click(function(){}); // √
$("#div").onclick = function(){}; // × JQuery对象不能调用原生JS方法
- 同理,使用getElement系列函数取到的为JS对象,也不能调用JQuery函数。
【jQuery对象与JS对象的相互转换】
1. jQuery转JS:使用.get(index) 或 [index] 选中的就是JS对象;
$("div").get(0).onclick = function(){}
或 $("#div1")[0].onclick = function(){}
2. JS转jQuery:使用$()包裹JS对象。
var div = document.getElementsByTagName("div");
$(div).click(function(){});
五、解决jQuery多库冲突问题:
页面中如果同时引入多个JS框架,可能导致$冲突。
解决办法:
1.使用jQuery.noConflict();使用JQuery放弃在全局中使用$;
2.使用jQuery关键字替代$,或者使用一个自执行函数:
!function($){
// 在自执行函数中,可以使用$替代jQuery
// 除自执行函数外的其他区域,禁止jQuery使用$
}(jQuery);
代码示例:
jQuery.noConflict();
!function($){
$(function(){
// JS转JQuery
var div = document.getElementsByTagName("div");
$(div).click(function(){
alert(1);
});
//初级前端开发裙:裙员具有1-3年前端工作经验
//具备一定的前端开发能力,有需要学习,欢迎一起交流学习
// 本裙不是培训机构,不会推荐任何课程,qq裙聊号码:603765693
// JQuery转JS
$("div").get(0).onclick = function(){
alert(1);
}
});
}(jQuery);
jQuery文档处理
一、JQuery中的DOM操作
1、内部最后面添加
append:在div1的内部,最后追加一个图片(在A中添加b)
$("#div1").append("<img src='../01-HTML基本标签/img/QQ图片1.gif'/>");
appendTo:把一个图片追加到div1的内部最后(将b添加到A中)
$("<img src='../01-HTML基本标签/img/QQ图片2.gif'/>").appendTo("#div1");
2、内部最前方插入
prepend:
$("#div1").prepend("<img src='../01-HTML基本标签/img/QQ图片1.gif'/>");
prependTo:
$("<img src='../01-HTML基本标签/img/QQ图片2.gif'/>").prependTo("#div1");
3、在div1的外部,后面插入节点
after:
$("#div1").after("<p>这是一个p</p>");
insertAfter:
$("<p>11111</p>").insertAfter("#div1");
4、在div1的外部,前面插入节点
before:
$("#div1").before("<p>这是一个p</p>");
insertBefore:
$("<p>11111</p>").insertBefore("#div1");
用JS添加:
var div1 = document.getElementById("div1");
var first = div1.firstChild;
var p = document.createElement("p");
p.innerText = "123";
div1.appendChild(p);
div1.insertBefore(p,first);
document.body.insertBefore(p,div1);
5、为每一个选中的节点,都套一层父节点。
wrap:
$("div").wrap("<section></section>");
wrapAll:
$("div").wrapAll("<section></section>");
6、将选中的所有节点,包裹在同一个父节点中
wrapAll:
$("p").wrapAll("<section></section>"); // ×
$("div~p").wrapAll("<section></section>");
7、删除选中节点的父节点
unwrap:
$("#div1 p").unwrap();
8、将选中节点中的所有子元素,包裹在一个新的父节点中;
新的父节点依然是当前元素的唯一子节点
wrapInner:
$("#div1").wrapInner("<div></div>");
9、将所有选中的节点,重新替换为新的节点
replaceWith:
$("div p").replaceWith("<span>1</span>");
replaceAll:
$("<span>1</span>").replaceAll("div p");
只替换标签:
$("div p").wrapInner("<span></span>");
$("div p>span").unwrap();
10、empty:清空当前节点内容,但会保留当前节点标签
$("#div1").empty();
remove:删除当前节点,以及当前节点的所有子节点
$("#div1").remove();
detach:删除当前节点,以及当前节点的所有子节点
$("#div1").detach();
remove和detach的区别
1. 使用remove删除的节点,如果恢复以后,将不再保留节点所绑定的事件;
2.使用detach删除的节点,在节点恢复以后,可以恢复节点之前所绑定的事件。
案例:
$("#div1").click(function(){
alert(123);
});
var div1 = null;
$("button:eq(0)").click(function(){
div1 = $("#div1").remove();
});
$("button:eq(1)").click(function(){
div1 = $("#div1").detach();
}); //初级前端开发裙:裙员具有1-3年前端工作经验
//具备一定的前端开发能力,有需要学习,欢迎一起交流学习
// 本裙不是培训机构,不会推荐任何课程,qq裙聊号码:603765693
$("button:eq(2)").click(function(){
$("#div2").before(div1);
});
二、CSS和属性操作
1、设置节点的属性
$("#div1").attr("class","cls");
2、传入对象,以键值对的形式同时设置多对属性
$("#div1").attr({
"class":$("#div1").attr("class")+"cls1",
"name":"name1",
"style":"font-size:24px;color:blue" });</pre>
3、取到节点的属性
console.log($("#div1").attr("id"));
4、删除节点属性
$("#div1").removeAttr("class");
5、prop 和 attr一样,都可以对节点属性进行读取和设置
【两者的不同】
在读取 属性名="属性值" 的属性时,attr将返回属性值和undefined;而prop将返回true或false;
也就是说,attr要取到的属性,必须是在标签上已经写明的属性,否则无法取到。
6、在原有class的基础上,新增class名字
$("#div1").addClass("cls1");
7、 删除指定的class名称,其余未删除的class名,依然保留
$("#div1").removeClass("cls cls1");
8、 toggleClass 切换class:如果有指定class就删除,如果没有就新增。
$("button:eq(0)").click(function(){
$("#div1").toggleClass("div1");
});
9、.html:取到或设置节点中的html代码;
.text:取到或设置节点中的文本;
.val:取到或设置表单元素的value值;
console.log($("#div1").text("<p>11111</p>").text());
console.log($("input:eq(1)").val("<p>11111</p>").val());
10、.css():给节点添加css样式,属于行级样式表权限
$("#div1").css("color","green");
同时给一个节点添加多对css样式
$("#div1").css({
"color":"yellow",
"font-size":"24px" });
通过回调函数返回值,修改css样式: 修改div的宽
$("button:eq(0)").click(function(){
var id = setInterval(function(){
$("#div1").css({
"width":function(index,value){
var v = parseFloat(value) +1;
if(v>600){
clearInterval(id);
}
return v + "px";
} //初级前端开发裙:裙员具有1-3年前端工作经验
}); //具备一定的前端开发能力,有需要学习,欢迎一起交流学习
},10); // 本裙不是培训机构,不会推荐任何课程,qq裙聊号码:603765693
});
11、取到或者设置节点的宽高
console.log($("#div1").height(400));
console.log($("#div1").width("400px"));
12、取到节点的宽度+padding,不包含border和margin
console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());
13、不传参数,表示 宽高+padding+border
console.log($("div1").outerHeight());
传入true,表示 宽高+padding+border+margin
console.log($("div1").outerWidth(true));
14、返回一个节点,相对于浏览器左上角的偏移量
返回一个对象{top: 31, left: 8}
此方法,测量时,会将margin算作偏移量的距离
console.log($("#div1").offset());
15、 返回一个节点,相对于父容器的偏移量
注意:
① 使用此方法,要求父元素必须是定位元素,如果父元素不是定位元素,则依然是相对于浏览器左上角测量
② 此方法,测量偏移量时,将不考虑margin,而会将margin视为当前容器的一部分
console.log($("#div1").position());
16、scrollTop:、设置或取到指定节点的滚动条位置
console.log($("#div1").scrollTop(100));
结语
感谢您的观看,如有不足之处,欢迎批评指正。
本次给大家推荐一个学习交流群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。 603765693