前端-JQuery，基础知识学习

JQuery优势：①代码简洁。②兼容性高。③已有大批写好的方法可直接调用。④解决一个页面不能有2个window.onload的困扰(js也能实现，只不过需要写个方法，麻烦点)

缺点：jq是页面标签加载完毕后就立即执行【无法马上获取图片的宽度高度】。而window.onload是等待标签中的src资源加载完毕后才执行。

1.jquery的入口函数

// 第一种
$(document).ready(function(){});
// 第二种
$(function(){});//模拟jq解决一个页面只能加载一个onload方法
function $(dom){return {ready:function(func){if(typeof(dom.onload)==="function"){var oldfun = dom.onload;dom.onload = function(){oldfun();func();}}else{dom.onload = func;}}}
}
//如此，如下两个方法都能执行，不会覆盖
$(window).ready(function(){alert("调用这个方法");
});
$(window).ready(function(){alert("调用这个方法21");
});

2.JQuery选择器（部分）【包含已经学习的css选择器】

//id选择器
$("#demo")
//类选择器
$(".cc")
//标签选择器
$("div")
//并集选择器
$("div,.cc")
//通配符选择器，一般配合其他选择器一起使用
$("*")【层级选择器】
//div下的儿子ul标签们
$("div>ul")
//div下的所有后代ul标签们，子子孙孙
$("div ul")
//紧挨着div的一个ul兄弟标签
$("div+ul")
//div后面的ul兄弟们
$("div~ul")基本过滤选择器
//index从0开始，2代表第三个元素
$("li:eq(2)").css("font-size", "20px");
//小于【不包含】
$("li:lt(2)").css("font-size", "20px");
//大于【不包含】
$("li:gt(2)").css("font-size", "20px");
//序号为奇数的
$("li:odd").css("background", "orange");
//序号为偶数的
$("li:even").css("background", "orange");
//第一个
$("li:first")
//最后一个
$("li:last")属性选择器
//有这个属性的就行
$("a[href]").css("font-size", "50px");
//属性等于XX的
$("a[href='www.baidu.com']").css("font-size", "50px");
//属性不等于XX的。包含没有href属性的
$("a[href!='www.sex.com']").css("font-size", "50px");
//属性以XX开头的
$("a[href^='http']").css("font-size", "50px");
//属性以XX结尾的
$("a[href$='cn']").css("font-size", "50px");
//属性值中，包含XX的
$("a[href*='sex']").css("font-size", "50px");
//属性选择可以写多个，求交集
$("a[href*='sex'][title$='jpg']").css("color", "pink");选择器方法
$("li").eq(1).css("font-size", "40px");
$("li").parent(".ul").css("font-size", "40px");
$("li").first().css("font-size", "40px");
$("li").last().css("font-size", "40px");
$("li").siblings(".li3").css("font-size", "40px");
$("ul").find(".li3").css("font-size", "40px");

3.常用方法

// 展示出来，再隐藏，再执行一个方法
$(".box").show(1000).hide(1000, function() {alert("fku");
});
// 拉动，下拉出来，上拉隐藏
$(".box").slideDown(1000).slideUp(1000);
// 淡入淡出
$(".box").fadeIn("fast").fadeOut("normal");
// 500毫秒内，将box的透明度（opacity）调整成0.5
$(".box").fadeTo(500,.5);
// 拉下（显示）或者拉上（隐藏）
$(".box").slideToggle();
// 淡入或淡出
$(".box").fadeToggle();
// 自定义动画
$(".box").animate({"width": "600px","height": "400px","opacity": .3,"left": 500
}, 2000, function() {alert(1);
});
// 停止前面的动画，执行下面的动画
$(".box").stop().slideToggle();// 添加某个样式
$(".box").addClass("current");
// 移除某个样式
$(".box").removeClass("current");
// 添加或移除某个样式
$(".box").toggleClass("current");
// 判断是否有某个样式，有返回true，没有返回false
$(".box").hasClass("current");// 获取选中元素在所有元素中的下标
// 案例：Tab栏切换中，上方选中，可快速定位下方应当显示的div的index下标
$("li").click(function() {console.log($(this).index());
});

补充：edge打开的第一页有两个轮播图，2个都没有什么动画效果，很符合之前的将所有图片放在一行后，直接定位left值完成。但是其中一个为了加一点动画效果，很逗得加了一个遮罩层，每次换图的时候，这个遮罩层就会快速显示出来再隐藏掉。试了一下，挺像这个效果的

$(".box").fadeIn("fast").fadeOut("fast");

//设置属性
$("input").attr("title", "newtitle");
//获取属性值
$("input").attr("title");
//移除属性
$("input").removeAttr("title");
//获取内容，不包含标签
$("#box").text();
//设置内容
$("#box").text("内容");
//获取内容，包含标签
$("p").html();
//设置内容
$("p").html("内容");//当前元素相对浏览器左上角的距离。number【可赋值】
$("ul").offset().top
$("ul").offset().left
//当前元素相对于最近的定位父级元素的距离。number【不可赋值】
$("ul").position().top
$("ul").position().left
//当前页面已经卷动的距离，number，【可赋值】
$(document).scrollTop();
$(document).scrollLeft();
//元素本身的宽高，纯宽高，不包含padding和border。number【可赋值】
$("ul").height()
$("ul").width()

【不常用的方法】

// 【父子局】
//在div内部的后面追加元素
$("div").append("<p>一个p标签</p>");
//将p标签添加到div内部的最后
$("<p>一个p标签</p>").appendTo($("div"));
// 在div内部的前面追加元素
$("div").prepend("<span>一个span标签</span>");
// 把span标签追加到div内部的前面
$("<span>一个span标签</span>").prependTo($("div"));//【兄弟关系】把一个标签放到指定div后面，做兄弟，【关联选择器+】
$("div").after("<em>标签</em>");
$("<p>ppp</p>").insertAfter($("div"));
//【兄弟关系】把一个标签放到指定div前面，做兄弟
$("div").before("<i>标签</i>");
$("<h1>").insertBefore($("div"));//干掉这个标签以及这个标签下的所有，可以用来自
$("div").remove();
//清空这个标签内部的所有内容。但是推荐用$("div").html("");这个效率高
$("div").empty();//只克隆这个标签，true[同时克隆这个标签绑定的方法]
$("div").clone(true);//之前,之后的所有兄弟，可以加选择器
$("div").prevAll();
$("div").nextAll();

其中一个方法css的用法，function参数使用展示

$(function(){//获取被选中元素的样式var c = $("#li3").css("color");//1设置被选中元素的样式$("#li3").css("background-color","red");//2...传入json，批量修改$("#li3").css({"background-color" : "red","font-size" :"20px"});//3...传入方法，灵活修改$("li").css("background-color",function(index,value){// :index 指代当前元素下标// :value 指代当前元素样式值// 此处需要返回样式值return index%2==0? "pink":"orange";});
});<body><ul><li>很多兄弟1</li><li>很多兄弟2</li><li id="li3">很多兄弟3</li><li>很多兄弟4</li><li>很多兄弟5</li><li>很多兄弟6</li><li>很多兄弟7</li><li>很多兄弟8</li></ul>
</body>

4.绑定事件，尽量用on，兼容。取消绑定用off

触发事件

//触发box的点击事件【单纯的触发了这个事件，不进行冒泡】
$("#box").click();
//触发绑定的事件，除了click也可以换别的
$("#box").trigger("click");
//触发绑定的事件，但不触发浏览器行为，比如a标签不跳转
$("a").triggerHandler("click");

5.隐式迭代，each，map

隐式迭代：$("li").html("go0d");jq对象包含得数组，会默认隐式循环，为这些数组赋值。

如果只获取对象内容，则默认返回数组第一个元素得值【html()方法。经过测试，text()方法返回数组中所有元素得值】

$.each($("li"), function(index, ele) {console.log(ele.innerHTML + index);
});
$.map($("li"), function(ele, index) {console.log(ele.innerHTML + index);
});
1.上面输出得结果一致，map方法中function传参顺序变了。
2.map方法可以return，return得数据是新的数组，并非原数组

6.事件对象

event.currentTarget    在事件响应方法中等同于this，当前Dom对象
event.target            事件触发源。不一定===thisevent.pageX            鼠标距离浏览器左边得 坐标
event.pageYevent.stopPropagation()    阻止事件冒泡
event.preventDefault()    阻止默认行为event.type            事件类型：click，dbclick...
event.which            鼠标得按键类型：左1 中2 右3

7.全局变量污染冲突

.JQ，一共污染了三个全局变量，$,jQuery,name

$.noConflict();    让jQuery释放 $ ,让 $ 回归到jQuery之前的对象定义上去。此方法有返回值，返回值可以代替 $ 做之前的操作，或者用jQuery代替var someone_jQ = $.noConflict();<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>冲突的案例</title><script>$ = {show: function (argument) {console.log("my $");}}</script><script src="jquery-1.11.3.min.js"></script><script>var myJQuery = $.noConflict();jQuery(document).ready(function(){jQuery("div").css("color","red");// $("div").css("color","red"); //$就不能用了myJQuery("div").css("color","red"); //这个可以用了});$.show("sdf");</script>
</head>
<body><div>sfadfsdf</div>
</body>
</html>

jQuery.data()

$(".box").data("name",123);//设置值

var t = $(".box").data("name"); //获取值

t.name = 18; // 对象值的更改，会直接保存到元素对象设置的值。

前端-JQuery，基础知识学习相关推荐

JQuery 基础知识学习（详尽版）
JQuery 详尽的基础知识学习 jQuery 语法 jQuery 选择器 jQuery 选择器(大全) jQuery 事件 ready() holdReady() on() off() one() ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
零基础学前端之SEO 基础知识学习--SEO优化学习教程【学习笔记】
[前端总路线学习笔记] 本笔记的参考视频–SEO 基础知识学习视频 SEO优化学习教程学习笔记 SEO用到的网站 1.百度指数 2.站长之家 1.什么是SEO – 搜索引擎优化 Search Engi ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
2021-7-19-OpenStack基础知识学习
OpenStack基础知识学习参考文献:Wolf_Coder,百度百科 1,云计算 1.1,出现原因由亚马逊公司提出.1.随着业务增加公司内部的服务器不够使用,进行虚拟化技术->2.随着公司 ...
K8s基础知识学习笔记及部分源码剖析
K8s基础知识学习笔记及部分源码剖析在学习b站黑马k8s视频资料的基础上,查阅了配套基础知识笔记和源码剖析,仅作个人学习和回顾使用. 参考资料: 概念 | Kubernetes 四层.七层负载均衡的 ...
uniapp 基础知识学习
uniapp 基础知识学习 uniapp 基础知识学习 [uniapp 介绍](https://uniapp.dcloud.io/README) 有哪些uni-app的作品 uni-app的社区规模 ...
网络安全基础知识学习之Web安全百问百答
网络安全基础知识学习之Web安全百问百答 1.什么叫Web应用系统? 答:Web应用系统就是利用各种动态Web技术开发的,基于B/S(浏览器/服务器)模式的事务处理系统.用户直接面对的是客户端浏览器, ...
Javascript 基础知识学习
Javascript 基础知识学习参考自:https://www.w3cschool.cn/javascript/ javascript 简介 JavaScript 是互联网上最流行的脚本语言,这门 ...

前端-JQuery，基础知识学习

前端-JQuery，基础知识学习相关推荐

最新文章

热门文章