jquery 学习笔记及小练习
jQuery
1.简介
JQuery是js函数库 本质就是js库
jQuery总共有三个版本 1版本兼容性最好 2 版本3版本轻量化
jquery 核心函数
<!-- 1. 作为一般函数调用: $(param)1). 参数为函数 : 当DOM加载完成后，执行此回调函数2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象3). 参数为DOM对象: 将dom对象封装成jQuery对象4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象 2. 作为对象使用: $.xxx()1). $.each() : 隐式遍历数组2). $.trim() : 去除两端的空格 --><!--/*--> <!--需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框--> <!--需求2. 遍历输出数组中所有元素值--> <!--需求3. 去掉" my atguigu "两端的空格--> <!--*/--> <script type="text/javascript" src="js/jquery-1.10.1.js"></script> <script type="text/javascript"> // <!--需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框--> // 1. 参数为函数 则约等于页面加载完成（window.onload）的回调函数$(function () {// 2. 参数为选择器字符串 通过选择器去匹配的元素封装成jquery对象返回$('#btn').click(function () {// 3. 参数为dom对象 将当前的dom对象转换成jquery对象返回alert($(this).html()); // 4. 参数为html标签字符串 将当前这个标签创建 并且直接为jquery对象$('<input type="text" name="msg3"/><br/>').appendTo('div');}) // <!--需求2. 遍历输出数组中所有元素值-->var arr = [4,7,3,1,6]; // 回调函数中 第一个参数对应索引 第二个参数对应当前元素的值$.each(arr,function (index,item) {console.log(index,item);}); // <!--需求3. 去掉" my atguigu "两端的空格-->var str = ' my atguigu '; // console.log(str.trim())console.log($.trim(str))})
2.jquery使用
2.1 dom对象和jquery对象
1.引入文件
2.写入口函数
<script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){})</script>
jquery和原生入口函数的区别
jquery入口能写多个 js只能写一个
jquery入口函数执行的速度比原生的js快
$是一个函数
1.如果传递的是一个匿名函数 那么他就是一个入口函数
$(function(){})
2.如果穿的的是一个字符串 那么它就是一个选择器
$(“#box”);
3.也可以是创建一个标签
$(“
哈哈哈”);4.如果传递的是一个dom对象 那么它就会把dom对象转换成为jquery对象
$(“dom 对象”);
DOM&jquery对象
DOM对象及时原生的js获取的对象
DOM 对象只能调用dom的方法或者属性 不能调用jquery的属性或者方法
jquery 利用jquery对象选择器获取的对象
jquery 只能调用jquery的方法或者属性 不能调用dom的属性或者方法
DOM对象和jquery对象对互相转换
$(function(){let one=document.getElementsByClassName('one');let $one=$(one);})------------------dom 转jquery---------------------//通过下标来转let $div=$('div');let div=$div[0];//通过jquery的get方法来抓换let $div=$('div');let div=$div.get(1);
2.2 text方法
获取文本
$(‘#one’).text();
会获取到这个标签中的所有的文本 包括后代元素的文本
//里面给参数就是获取文本$(‘div’).text();
包含多个dom对象的 获取到的是多个dom对象的文本
设置文本
$(‘#one’).text(‘新的设置的文本’);
设置的文本会替代原来的文本
$(‘#one’).text(‘
fsdfasdf
’);
如果包含的有标签 也是不会把标签解析出来的
$(‘div’).text();
如果包含了多个dom对象的 设置文本 会把所有的dom对象的文本都替换掉
2.3 css方法
css是设置和获取样式的
获取样式
$(‘#one’).css(‘样式名称’);
$(‘#one’).css(‘height’); 获取class为one 元素的高度
$(‘div’).css(‘width’);
获取包含多个DOM对象的样式 只会获取第一个
设置样式
$(‘#one’).css(‘样式’，属性值)；如果带单位 px 需要加引号 如果是单纯的数值就不需要加引号
设置多样式
$(‘#one’).css({
样式名称：样式值，
样式名称2；样式值2，…
});
给一组DOM设置样式 这种会隐式遍历 会把每一个元素都遍历出来
$('div').css({样式名称：样式值，样式名称1:样式值2,....... });
2.4 选择器
让我们能跟快的找到自己需要的元素
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $(“*”) | 所有元素 |
| #id | $(“#lastname”) | id=“lastname” 的元素 |
| .class | $(“.intro”) | 所有 class=“intro” 的元素 |
| element | $(“p”) |
所有
元素 |
| .class.class | $(“.intro.demo”) | 所有 class=“intro” 且 class=“demo” 的元素 |
| :first | $(“p:first”) |
第一个
元素 |
| :last | $(“p:last”) |
最后一个
元素 |
| :even | $(“tr:even”) | 所有偶数 |
| :odd | $(“tr:odd”) | 所有奇数 |
| :eq(index) | $(“ul li:eq(3)”) | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
| :lt(no) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
| :header | $(“:header”) |
所有标题元素
- |
| :animated | 所有动画元素 | |
| :contains(text) | $(“:contains(‘W3School’)”) | 包含指定字符串的所有元素 |
| :empty | $(“:empty”) | 无子（元素）节点的所有元素 |
| :hidden | $(“p:hidden”) |
所有隐藏的
元素 |
| :visible | $(“table:visible”) | 所有可见的表格 |
| s1,s2,s3 | $(“th,td,.intro”) | 所有带有匹配选择的元素 |
| [attribute] | $(“[href]”) | 所有带有 href 属性的元素 |
| [attribute=value] | $(“[href=‘#’]”) | 所有 href 属性的值等于 “#” 的元素 |
| [attribute!=value] | $(“[href!=‘#’]”) | 所有 href 属性的值不等于 “#” 的元素 |
| [attribute$=value] | ("[href("[href("[href=‘.jpg’]") | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
| :input | $(“:input”) | 所有 元素 |
| :text | $(“:text”) | 所有 type=“text” 的 元素 |
| :password | $(“:password”) | 所有 type=“password” 的 元素 |
| :radio | $(“:radio”) | 所有 type=“radio” 的 元素 |
| :checkbox | $(“:checkbox”) | 所有 type=“checkbox” 的 元素 |
| :submit | $(“:submit”) | 所有 type=“submit” 的 元素 |
| :reset | $(“:reset”) | 所有 type=“reset” 的 元素 |
| :button | $(“:button”) | 所有 type=“button” 的 元素 |
| :image | $(“:image”) | 所有 type=“image” 的 元素 |
| :file | $(“:file”) | 所有 type=“file” 的 元素 |
| :enabled | $(“:enabled”) | 所有激活的 input 元素 |
| :disabled | $(“:disabled”) | 所有禁用的 input 元素 |
| :selected | $(“:selected”) | 所有被选取的 input 元素 |
| :checked | $(“:checked”) | 所有被选中的 input 元素大 |
元素 元素
后代选择器
父>子元素 ：获取父元素的子元素 不会获取父亲元素
父 后代元素：获取父元素的所有的后代元素
2.5 父代 兄弟 后代选择
,parent();返回的是元素的父亲元素
.parents();返回元素的祖先元素 返回的是该元素的 所有对祖先元素 一直到html
children();返回的是该元素的所有的之间子元素
find(); 返回的是被选元素的后代元素 一直到最后一个后代元素
$('div').find('span'); //返回的是div的后代的所有的span元素siblings() 方法返回被选元素的所有同胞元素
next（） 返回的是被选元素的下一个同胞元素
nextAll() 返回的是所有的后面的同胞元素
nextUntil() 返回的是两个参数之间的同胞元素
$('h2').nextUntil('h5'); //返回的是h2-h5之间的所有同胞元素first() 返回的是被选元素的第一个元素
$('div p').first(); //返回的是div元素中的第一个plast（） 返回的是被选元素的最后一个元素
$("div p").last(); //返回的是div元素中的最后一个peq() 返回的是 带有指定索引的元素
$("div").eq(1); //返回的是第一个divfilter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(document).ready(function(){$("p").filter(".url"); }); //返回带有类名 "url" 的所有 <p> 元素：not 法返回不匹配标准的所有元素、
$("div").not('.url'); 返回的是div中所有的不带url的元素
2.6 class类的操作
-----------------------------------添加和移除类的操作----------------------------------------
addClass(‘类名称’) 给元素添加类
addclass(‘l类1 类2’) 给元素添加多个类
removeClass(); 不写参数就是移除所有的类
removeClass(‘类名称’) 移除元素的类
removeClass(‘类名称1 类名称2’) 移除元素的多个类
$('#one').removeClass(); //移除one 的所有的类
-------------------------------------判断类的操作–--------------------------------------------
hasClass(‘类名称’) 判断类 判断一个元素有没有某个类 如果有就返回true 反正返回false
$('#one').hasClass('one'); //判断one里面有没有one这个类
-------------------------------------切换类的操作–--------------------------------------------
toggleClass(‘类名称’) 切换类
$('#one').toggleClass('ddd'); //把one的类切换为ddd
2.7 jquery 动画
显示与隐藏
show();如果没有参数就没有动画效果
show(时长，回调函数)；时长可以是毫秒数 也可以是其他的参数
$('div').show(2000,function(){alert('哈哈哈'); })hide()隐藏 没有参数就是没有动画效果 就直接消失了
hide（时长，回调函数）; 效果是和show一样的
toggle（）切换 ；切换动画的显示和隐藏两种状态
滑入与滑出
slideDown（） 没有参数的话就是默认的相当于给了一个默认的时长2s
slideDown（时长，回调函数）；
$('div').slideDown(200,function(){alert('hahhah'); })slideUp（） 滑出 默认效果
slideUp（时长，回调函数）；
slideToggle（） 切换
淡入与淡出（改的是透明度）
fadeIn（）；默认效果
fadeIn（时长，回调函数）；
fadeOut （）；淡出默认淡出效果
fadeOut（时长，回调函数）；
fadeToggle（） 淡出淡出的切换
fadeTo（时长，0-1的数字）；淡入到哪里 后面那个参数改的是透明度
自定义动画
animate（要改变的属性，时长，linear/swing，回调函数）；
参数1 ：必选的属性 是需要改变的值
参数2：执行动画的时长
参数3：代表的是匀速还是缓动 默认是缓动
$('div').animate({width:100, height:100, left:100, top:100 },200,linear,function(){//最后有一个回调函数意味着我们可以继续无线套娃 $('div').animate({windth:200,height:300 }200,swing,function(){}); });
动画队列与停止队列
动画队列 就是一组连续的动画
$('div').slideDown(2000).slideUp(2000); //滑入用2000毫秒随后使用2000毫秒的时间来滑出停止动画
stop（true/false , true/false）;
参数1：是否清除队列 （动画执行到一半了 点击停止 是否还继续执行未完成的动画）
参数2：是否跳到最终的效果（动画执行到一半了 点击停止 是否直接跳到动画的最终效果）
$('div').stop(true,false).slideDown(200); //div的第一个动画还没执行完的时候 下一个动画就来了就会产生动画的队列 然后进行设置 让动画队列继续存在 但是当前的动画不执行完 马上执行下一个动画
2.8 jquery节点
html方法：设置或者获取内容
html（） 不给参数就是获取内容 获取的是元素的所有的内容
html（参数）;设置的内容会替换掉原来的内容 、
如果设置的内容中包含标签 会把标签里面的内容解析出来
$('div').html('我是设置的内容'); $('div').html('我是设置的内容<a hrtf="www.baidu.com">百度<a>'); //下面的这个会把设置的里面的标签解析出来
$(参数);能够创建元素 但是创建的元素是单独的 需要追加到节点中
let aLink=$('<a href="www.baidu.com">百度<a>'); //创建元素 $('div').append(aLink); //把创建的a元素追加到div中
2.9 添加节点
append(对象);
父元素.append(子元素)；把子元素作为最后一个元素添加
$ul=$('ul'); $li3=$('#li3'); $ul.append('li3'); //假设ul里面有五个元素 上面的方法会把li3剪切到最后面去 小技巧把ul中的li3 剪切到ul2的最后一个位置上面
//获取ul中的li3 $ul2.append($li3); //完成剪切prepend（）；
父元素.prepend(子元素)；把子元素添加到父元素所有的子元素的第一个的位置上
剪切 同append（）方法
before（）；作为兄弟元素添加
在某某之前
元素A.before(元素B)；A和B是兄弟元素 B元素会添加到A元素的前面
after（）；
A.after(B);B元素会添加到A元素的后面
appendTo（）；
子元素.appendTo(父元素); 子元素会添加到父元素中去 作为最后一个子元素添加
2.10 移除元素
empty();清空
父元素.empty();清空父元素中的内容 同时也会移除元素的事件
remove（）； 清除掉素元素
元素.remove(); 自杀 自己清楚掉自己
$li.parent().remove(); //子元素清除掉父元素
2.11 克隆节点
clone();
元素.clone();克隆的节点只会存在在内存中 还需要把节点添加到页面中 克隆出来的元素和原来的元素的所有的属性都是一样的
clone(true/false); 参数是TRUE 就会把事件也一起克隆 如果是FALSE就不会
2.12 设置获取表单元素的值
获取的是表单元素的值
val（）；不给参数就是获取
val（‘值’）；给的参数就是设置的值
3.jquery 属性操作
3.1设置属性
attr();
对单属性进行设置
元素.attr(‘属性’，‘属性值’)；修改属性值
元素.attr(‘自定义属性’，‘自定义属性值’)；修改自定义属性值
元素.attr(‘自定义属性’，‘自定义属性值’); 修改自定义属性值
对多属性进行设置
元素.attr({
属性名1：属性值1，
属性名2：属性值2，
属性值3，属性值3.。。。。。。。。
})
3.2 获取属性
元素.attr(‘属性名’)；
自定义的属性也可以获取 如果没有这个属性就返回underfind
$("div").attr('height');
获取div的高度
3.3 移除属性
元素.removeAttr(‘属性名’)；移除单个属性
元素.removeAttr(‘属性名1 属性名2 属性名3.。。。。’)
3.4 操作布尔类型
在原生的h5 中有这样的一种属性 比如说checked 如果元素有这个属性就表示选中了 如果元素没有这个属性就表示元素没有被选中 在现在的js中不能使用attr来获取这类 属性只能使用prop来获取
元素。prop（）；获取属性的布尔值 例如checkde的值 TRUE或者flase
3.4尺寸和位置的操作（height 和width）
通过元素。css（‘属性名’）的方法也能够获取到元素的宽和高 但是获取的是一个字符串 后面带的有px 如果不想后面带有px 可以使用
元素.width（）； 获取元素的宽度 不包括内边距 外边距 和边框
元素.height（）;获取元素的高度 不包括内边距 外边距 和边框
元素.width(数值)；设置元素的宽 不包括 内外边距和边框
元素.heigth(数值);设置元素的高 不包括 内外边距和边框
含有padding的获取方式
元素.innerHeight/ innerWidth ();
含有内边距 和边框 的获取方式
元素.outerWidth() / outerHeingt() ；
含有内外边距 和边框的获取方式
元素.outerWidth( true )/outerHeight(true ) 需要在参数里面加上TRUE
3.5 获取页面可视区宽度和高度
window.height();
window.width();
3.6 元素的位置（相对于视口的位置 or 相对于元素父元素的位置）
元素.offset();元素相对于document的位置 获取会得到一个对象 对象里面包含了top 和 left的值
元素.position();元素相对于父元素的位置 获取会得到一个对象 对象里面包含了
3.7 设置或者获取滚动条的位置
元素.scrollTop 与 scrollLeft 获取的是元素被卷曲进 进度条的值 ( 一个div 200200 的宽高 里面放了一个400400的元素 形成了滚动条 被卷曲的部分为200*200)
元素.scrollLeft(数值) 元素.scroolTop(数值) 设置元素被卷曲进去的宽高
window.scrollLeft() window.scrollTOP 获取页面被卷曲的高度和宽度
加上数值 了以后就是设置
4 jquery 事件
4.1 事件注册（了解）
原生的js 注册事件 后面的事件会对前面的事件进行覆盖
jquery不会
bind 支持同时注册 但是不支持动态注册
- 同时注册 就是指能够同时注册多个事件 比如可以给一个对象同时注册鼠标移入和点击事件
- 动态注册 就是如果给ID为one 的div这个元素注册了事件 如果在重建一个id为one的div 那么这个新的div就不享受前面那个div所注册的事件
bind
元素.bind({
事件对象：function（）{
发生的内容
}，
事件对象2：function（）{
发生的内容2
}
})
$('div').bind({mouseenter:function(){alerta('sddsfa');}，cleck：function(){alert('发生的事件');
}
})
delegate 注册委托事件
支持同时注册也支持动态注册
父元素.delegate(‘要绑定的元素’,‘事件类型’，事件处理函数)
为ul下面的所有的li注册点击事件
$('ul').delegate('li','click',function(){alert('我是li的点击事件');
})
4.2 事件注册（重点）
on 简单注册
不支持动态注册
元素.on(‘事件名’，‘事件函数’)；
$('div').on('click',function(){alert('点击事件');
})
on 委托注册
支持动态注册
父元素.on(‘事件名’，‘事件对象’，事件函数)；
$('ul').on('click','li',function(){alert('我是li上面的点击事件');
})
4.3 事件的解绑
元素.off() 不给参数就是解绑所有的事件
元素.off(‘事件’) 给了参数就是解绑对应的事件
$('button').off('click');
//解除button上的click事件
4.4 触发器
一般来讲 如果要触发事件 肯定要有触发的条件 比如说 鼠标点击 鼠标移入等等.但是我们也可以自定义事件 自定义的事件没有触发的条件 这个时候就需要我们使用trigger来触发这个事件
元素.trigger(‘事件名称’);
//给button 自定义一个事件
$('button').on('haha',function(){alert("自定义的haha事件");
});
//这个haha事件在一般情况下没有办法触发 因为它没有触发的条件
$('#button2').on('click',function(){let res=confirm("选择是否");//弹框if(res){$('div').tigger('haha');}
})
4.5 事件对象
注册一个事件 系统就会帮助我们生成一个对象啦记录这个事件的一些信息，比如触发事件的时候有没有按住某个按键 鼠标的移动坐标啊 什么的
在原生的js中 在函数里面有一个参数event function（event）
jquery 的事对象是对原生js事件对象的一个封装 它帮助我们处理好了 ie兼容的问题
jquery 事件对象的写法
$('button').on('click',function(e){})
//在jquery中使用事件对象e来获取
事件对象常用的三个距离
screenX or screenY ：屏幕左上角距离你触发事件的那个位置的距离的值
clientX or clientY：可视区左上角 距离你触发事件的位置的距离的字值
pageX or pageY： 页面左上角 距离你触发事件位置的距离的值
阻止事件对象冒泡
由于事件的冒泡 子元素的事件对象被触发时 它的父元素的事件也会被触发
e.stopPropagation();组织事件冒泡
阻止浏览器的默认行为
e.preventDefault();
return false------既能阻止对象冒泡 也能阻止默认行为
获取按键
获取用户按下的按键
e.keyCode();
5.链式编程
如果给元素调用一个方法这个方法有返回值 并且这个返回的 是jquery对象 我们可以继续在这个返回对象的基础上在调用方法
返回的对象是jquery对象 如果返回的不是jquery对象 那么我们就没有必要在继续点击下去了
$('div').height(100).width(100).css('backgroundColor',red);
5.1 end
end 能够返回上一个this
元素.end();
end也是jquery对象的方法 只能是jquery对象才能够返回
end能够回到上一个状态 end后面也能跟end 这样的话就能够回到上一个元素或者对象
$('li').parent().parent();
//li的父元素是ul ul的父元素是div
$('li').parent().end().parent();
//li 的父元素是ul .end 就是还是返回li 然后在parent（） 就是还是li.parent();
5.2 显示迭代 each（）
each（）是用来遍历jquery对象的 为每一个匹配到的对象 执行一个函数
$(‘li’).each(function(index,element){})
index是对象的下标 element是该对象的dom对象
$（'li'）.each(function(index,element){//把DOM对象转换成为jquery对象 然后可以调用 $('element').css('color','red');
})
6.多库共存
如果引入了多个jquery 那么引入的是哪个jquery对象里面的 所用就需要查看jquery的版本
哪个jquery最后引入的 那么现在用的就是那个最后引入的jquery版本
$.fn.jquery;
//这行代码能够查看jquery的版本
后面引入的会把前面引入的jquery版本给覆盖掉 使用noConflict（）
$.noConflict();
//这行代码可以把$ 符号的控制权给释放掉 还有jquery 的版本没有被释放
7.jquery 插件
插件就是用来做扩展功能的
网站：jq22.com
7.1 插件调用方法
- 引入jquery文件
- 引入插件文件
- 调用插件方法
7.2 UI插件
从官网上面把ui插件下载下来 然后看下载内容里面的使用的方法自己使用
自己开发插件的知识需要补充
jquery 学习笔记及小练习相关推荐
- jquery学习笔记（-）
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
- jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...
- jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
- jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
- jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
- jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...
- jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
最新文章
- 优质网站策划从四个方面进行判断
- Python编程基础：第三十四节 文件移动Move a File
- CentOS7解决配置静态IP还是会出现动态IP地址的问题
- php system 返回值127,php system 返回值 1
- nodejs+nginx获取真实ip
- JavaScript数值类型及变量
- opencv matlab配置,Matlab下运行c++程序的配置（包含opencv的c++程序）
- 25个恶意JavaScript 库通过NPM官方包仓库分发
- 经典Mathematica函数大全
- 解决VScode无法输出中文的问题
- 具有多个生成器和多个判别器的GAN
- 别忽视分布式系统这六大“暗流”
- SaasSaaS架构设计之构建Multi-Tenant应用
- 小米8刷Magisk工具详细教程以及问题的解决方案
- 基于51单片机出租车计费设计（proteus仿真+程序+原理图+设计说明书）
- UltraCompare 激活
- 中英文金额大写转换器
- EXCEL图表的绘制: 如何把1个图表拆成多个？
- 3D打印技术如何影响未来
- 第34次中国互联网络发展状况统计报告