jQuery
奄奄一息的一条咸鱼
这个作者很懒,什么都没留下…
展开
-
jQuery:jQuery尺寸和位置操作
jQuery尺寸:语法用法width() / height()获得匹配元素的宽度和高度,只计算width / heightinnerWidth() / innerHeight()获得匹配元素的宽度和高度,包含padding值outerWidth() / outerHeight()获得匹配元素的宽度和高度,包含padding和borderouterWidth(true) / outerHeight(true)获得匹配元素的宽度和高度,包含padding、bord原创 2021-06-04 13:25:22 · 239 阅读 · 0 评论 -
jQuery:jQuery多库共存$.noConflict()
在使用jQuery库时如果担心和别的库有冲突,js给我们提供了两种方法:如果是$符号冲突了,我们就可以使用jQuery如果担心$和jQuery也冲突,我们可以自己决定,使用.noConflict()代码示例:<div></div><p>123</p><script> $(function(){ // 我们自己使用$封装了一个函数 function $(ele){原创 2021-05-19 13:08:57 · 124 阅读 · 0 评论 -
jQuery:对象拷贝之深拷贝和浅拷贝
如果想把某个对象拷贝给另一个对象使用,可以使用$.extend()方法。语法格式:$.extend([deep],target,object1,[objectN]);参数说明:deep:如果为true则是深拷贝,默认是浅拷贝false;target:要拷贝的目标对象,就是你要拷贝的目标;object1:待被拷贝的第一个对象,比如把object1拷贝给target;objectN:待被拷贝的第N个对象(因为可以拷贝很多对象,不止一个)<script>$(function()原创 2021-05-18 13:31:31 · 930 阅读 · 0 评论 -
jQuery:自动触发事件(trigger和triggerHandler)
当给一个元素绑定好一个事件后,不需要触发该事件就会自动触发,我们有三种方式可以做。第一种方式是元素.事件()。比如元素.click() 元素.mouseover()等;第二种和第三种都是jQuery封装的方法:trigger()和triggerHandler()。<div></div><input type="text" name="" id=""><script>$(function(){ // 只要文本框得到焦点 就写入文字:你好~ $("原创 2021-05-17 13:03:03 · 701 阅读 · 0 评论 -
jQuery:one()方法的使用,只会触发一次事件
<p>我只能被触发一次</p><script>$(function(){ $("p").one("click",function(){ // 只会触发1次就不会再触发了 console.log(1); })})</script>原创 2021-05-15 13:26:54 · 236 阅读 · 0 评论 -
jQuery:事件处理之off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。语法格式:$(“p”).off(); 解绑p元素身上的所有事件处理程序$(“p”).off(“click”); 只解绑p元素身上的点击事件$(“ul”).off(“click”,“li”); 解绑事件委托代码示例:<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul原创 2021-05-15 13:23:14 · 679 阅读 · 0 评论 -
jQuery:事件注册和事件处理(on()绑定事件)
jQuery单个事件主侧比较麻烦,如果要给一个元素添加点击和鼠标经过事件,需要我们写两个事件:click和mousemove。而在jQuery中给我们进行了处理,有一个新的事件:on()绑定事件on()方法在匹配元素上,可以绑定一个或多个事件的事件处理函数。语法格式:element.on(events,[selector],fn);参数:events:一个或多个用空格隔开的事件类型,如click、mouseenter,里面也可以是对象selector:元素的子元素选择器,比如element原创 2021-05-12 13:13:52 · 531 阅读 · 0 评论 -
jQuery:jQuery元素操作:创建、添加和删除元素
一、创建元素语法:$("<li></li>"); // 动态创建了一个li标签二、添加元素1.内部添加语法:// 把内容放入到元素的最后面element.append("内容");// 把内容放入到元素的最前面element.prepend("内容");简单代码示例:$(function(){// 向ul中动态添加了一个li标签 且放到元素的最后面$("ul").append($("<li>5</li>"));// 又向ul中动态原创 2021-05-11 13:21:51 · 313 阅读 · 0 评论 -
jQuery:jQuery元素操作(遍历、创建、添加、删除元素)
主要是遍历、创建、添加、删除元素操作。1.遍历元素jQuery的隐式迭代是对同一类元素做了同样的操作,如果想给同一类元素做不同操作,就需要用到遍历,隐式迭代并不能满足。<script>$(function(){// jQuery的隐式迭代只能将字体全部设置成红色 $(".car").css("color","red");})</script>那如果想要第一个字体红色,第二个字体蓝色,第三个字体粉色呢?因此还是需要用到遍历。遍历语法1:参数:index:是每个原创 2021-05-10 13:20:31 · 1392 阅读 · 0 评论 -
jQuery:parents()选择器和保留2位小数toFixed()方法
parents()可以返回指定祖先级的元素,不用像parent()需要一级一级往上寻找。<div class= "three"> <div class="two"> <div class="one"> 我好难 </div> </div></div><script>// 使用parents查找$(".one").parents(".three");// 使用parent查找$(".one").p原创 2021-05-08 20:42:34 · 110 阅读 · 0 评论 -
jQuery:jQuery获取元素的内容文本值:html()、text()、val()
主要针对元素的内容还有表单的值操作。1.普通元素内容html(),相当于原生js中的innerHTML获取到的内容会带标签。<div class="box"> <span>你好</span></div><script>$(function(){ console.log($(".box").html()); // 获得内容 console.log($(".box").html(123)); // 修改内容})</scrip原创 2021-05-08 13:13:45 · 1555 阅读 · 0 评论 -
jQuery:设置或获取元素固有的属性值prop()和设置或获取元素自定义的属性值attr()
设置或获取元素固有的属性值prop()固有属性就是元素本身自带的属性,比如链接a里的href属性,input里的type属性等。1.获取固有属性的语法格式:prop(“属性”);2.设置固有属性的语法格式:prop(“属性”,“属性值”); <a href="javascript:;" title="文字">hello world</a><script>$(function(){ // 1.获取固有属性的语法格式:prop("属性"); console原创 2021-05-06 08:22:15 · 835 阅读 · 0 评论 -
jQuery:jQuery的自定义动画效果animate
1.语法格式:animate(params,[speed],[easing],[fn]);2.参数说明:params:想要更改的样式属性,比如left、top、opacity等,需要以对象的形式传递,不能省略。属性名可以不带引号,如果是复合属性需要采用驼峰命名法,其余中括号里的参数可以省略。speed:有slow、normal、fast以及表示动画时长的数值1000。easing:用来指定切换效果,默认是swing,可以用linear。fn:回调函数,在动画执行完成时执行的函数。<b原创 2021-05-06 07:17:21 · 312 阅读 · 0 评论 -
jQuery:jQuery淡入淡出效果语法及修改透明度fadeTo()
1.淡入效果:fadeIn([speed],[easing]),[fn];淡入效果参数:参数是可以都省略的,和之前show()、hide()参数一样;speed:有slow、normal、fast三种速度,或者也能写数字(如:100);easing:默认是swing,可以是linear;fn:回调函数,在该动画执行完毕后再执行2.淡出效果:fadeOut();fadeOut([speed],[easing]),[fn];参数同上。3.修改透明度:fadeTo();fadeOut(s原创 2021-04-30 10:02:08 · 1319 阅读 · 0 评论 -
jQuery:动画队列及停止排队的方法
1.动画队列动画一旦触发就会执行,如果多次触发,就会造成多个动画排队执行,他不会等着上一个动画执行完了之后才执行,而是只要触发就会执行。2.停止排队方法stop()方法用法停止动画排队要注意的是,stop()要写道动画的前面,相当于是定制/结束上一次的动画。$(function( $("ul li").hover(function(){ // 写在slideToggel动画的前面即可,谁做动画写在谁的前面 $(this).children("ul").stop().slideToggel(原创 2021-04-30 09:32:57 · 309 阅读 · 0 评论 -
jQuery:hover事件切换效果
hover([over],out);hover里的参数over,是指鼠标移动到元素上要触发的函数(相当于mouseenter)hover里的参数out,是指鼠标移出元素要出发的函数(相当于mouseleave)tips:如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数。<script>$(function(){// hover其实就是鼠标经过和离开的复合写法$("ul li").hover(function(){ // 鼠标经过 $(this).siblings("原创 2021-04-30 09:32:33 · 355 阅读 · 0 评论 -
jQuery:jQuery库中封装的一些常见动画效果
常见的动画显示效果:1.显示和隐藏:show()hide()toggle()—语法规范:show([speed],[easing],[fn]);[]表示里面的参数都是可以省略的,speed表示可以让元素按照某个速度显示或隐藏,speed的值有:“slow”,“normal”,“fast”,也可以直接写成数字(如:1000)。easing用来更换效果,默认是swing,可以换成linear。fn是回调函数,在动画完成时执行该函数。<div class="box"></di原创 2021-04-27 21:08:43 · 245 阅读 · 0 评论 -
jQuery:jQuery的类操作和JS中className的区别
原生JS中的className会覆盖掉原先里面的类名。<div class="box"></div><script>// 原先的类名box会被覆盖掉 取而代之的是new var box = document.querySelector(".box"); box.className = "new";</script>而jQuery里面的类操作只是对指定的类进行操作,不会影响到原先里面的类名。<div class="box"><原创 2021-04-27 20:56:50 · 268 阅读 · 0 评论 -
jQuery:jQuery样式操作,直接操作css和设置class类
jQuery可以使用css方法修改简单的元素样式,也可以操作class类,修改多个样式。1.直接操作css方法:// 使用css方法 属性名和属性值需要加引号$(this).css("color","blue");// 单纯的数字可以不加引号和单位px jQuery内部自己处理了$(this).css("width",500);// css里的参数也可以是对象形式,可以设置多个样式// 属性名和属性值用冒号隔开,属性名可以不加引号// 复合属性依旧采取驼峰命名法$(this).css({原创 2021-04-26 12:48:53 · 472 阅读 · 0 评论 -
jQuery:jQuery的排他思想小练习
功能:点击当前按钮,当前按钮背景变颜色,其他按钮不变。<button>警告</button><button>危险</button><script>$(function(){ $("button").click(function(){ // 点击当前按钮,当前按钮背景变颜色 $(this).css("background","skyblue"); // 当前按钮的其他兄弟不变 $(this).siblings("button"原创 2021-04-24 22:27:47 · 126 阅读 · 0 评论 -
jQuery:jQuery的筛选方法(重点记住)
语法格式及用法说明parent() $(“li”).parent()查找父级children(“sel”) $(“ul”).children(“li”)相当于$(“ul>li”),查找最近一级(亲儿子)find(“sel”) $(“ul”).find(“li”)相当于$(“ul li”),后代选择器find(“sel”) $(“ul”).find(“li”)相当于$(“ul li”),后代选择器siblings(“sel”) $(".box...原创 2021-04-24 22:03:07 · 121 阅读 · 0 评论 -
jQuery:jQuery隐式迭代(很重要)
遍历内部DOM元素(以伪数组形式存储)的过程就叫隐式迭代。也就是说,会给匹配到的所有元素进行循环遍历,而不用我们自己再进行循环,简化了我们的操作,方便调用。 <ul><li></li><li></li><li></li></ul><script>// 不用我们再循环li,jQuery在内部已经隐秘的进行了遍历循环// ul里的每个li都会变为天蓝色 $("ul li").css("原创 2021-04-23 21:46:06 · 318 阅读 · 0 评论 -
jQuery:jQuery基础选择器($(“#id名“))和筛选选择器($(“li:first“))
名称说明ID选择器:$("#id名")获取指定ID元素全选选择器:$("*")匹配所有元素class类选择器:$(".class类名")获取同一个类的元素标签选择器:$(“div”)获取同一类标签的所有元素并集选择器:$(“div,span,ul”)获取多个元素交集选择器:$(“li.current”)获取交集元素简单代码示例:<div class="nav">哈哈哈</div><div id="nav"&...原创 2021-04-23 21:39:54 · 1012 阅读 · 0 评论 -
jQuery:jQuery对象和DOM对象互相转换
DO对象转换为jQuery对象:$(DOM对象):// 1.DOM对象转换为jQuery对象// 此时的box是js对象,只能使用js的方法,不能使用jQuery方法var box = document.querySelector(".box");// 转换为jQuery对象后就可以使用jQuery的方法$(box).hide(); jQuery对象转换为DOM对象(两种方法):...原创 2021-04-23 21:26:24 · 306 阅读 · 0 评论 -
jQuery:jQuery对象和DOM对象的区别
1.DOM对象:用原生js获取过来的对象是DOM对象:var btn = document.querySelector(".btn");// 此时的btn就是一个DOM对象2.jQuery对象:用jQuery方式获取到的对象是jQuery对象:$(".btn");// 此时$(".btn")就是jQuery对象3.jQuery对象只能使用jQuery方法,DOM对象只能使用原生js的属性和方法:$(".btn").style.backgroundColor = "red"; //会报错b原创 2021-04-23 13:09:53 · 70 阅读 · 0 评论 -
jQuery:等页面DOM加载完毕后再执行代码
等着页面DOM加载完毕后再执行代码第一种方式(比较麻烦,不常用):$(document).ready(function(){… })第二种方式(常用):$(function(){…})<div class="box"></div><script>$(function(){ $(".box").hide(); // 隐藏box盒子})</script>...原创 2021-04-23 13:01:12 · 3370 阅读 · 0 评论