jQuery day01

最新推荐文章于 2024-06-10 18:06:10 发布
最新推荐文章于 2024-06-10 18:06:10 发布
阅读量59 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dcwal/article/details/132994224
版权

1. 引入方式

  <!-- 1.引入cdn进行使用 -->
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
    <!-- 2.引入本地 -->
    <script src="./JS/jq.js"></script>

2. jQuery的入口函数

2.1 书写方式

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">/*方式1 */</span>
<span style="color:#000000">$</span>(<span style="color:#000000">document</span>).<span style="color:#000000">ready</span>(<span style="color:#770088">function</span>() {
​
});
​
<span style="color:#aa5500">//等价于上面的代码</span>
​
<span style="color:#aa5500">/*方式2 */</span>
<span style="color:#000000">$</span>(<span style="color:#770088">function</span>() {
​
});</span></span>

3.2 ready方法和onload方法的区别

 window.onload 当页面静态资源文件加载完毕时在执行函数体内的代码

① 多个事件后者会覆盖前者②必须等待内容及资源加载完毕执行

 window.onload = function () {
            var box = document.querySelector('.box');
            console.log(box);
        }

ready:①使用多次不会被覆盖② 等DOM加载完毕之后直接执行

$(window).ready(function () {
            console.log($('.box'));
        })

4. 选择器

4.1 基础选择器(重点)

选择器示例说明
全局选择器$('*')选择所有元素
标签选择器$('p')选择所有的p元素
ID选择器$('#top')选择所有id属性值为top的元素
Class选择$('.box')选择所有class属性值中包含box类名的元素

  • 注意: 隐式迭代:就是自动把匹配的所有元素内部进行遍历循环，给每一个元素添加方法.

4.2 按层次结构查找元素（匹配选择器）(重点)

通过样式名称来查找元素确实很方便，但是我们通常不需要查询整个页面来查找元素。有时可能只需要查找某个元素的子元素。

选择器示例说明
多重选择器$('div, p')选择所有的div元素和p元素(相当于css的并集选择器)
子代选择器$('div > p')选择作为div元素子元素的所有p元素
后代选择器$('div p')选择作为div后代的所有p元素
相邻选择器（同级兄弟）$('div + p')选择紧邻div元素且位于其后的p元素
兄弟选择器$('div ~ p')选择作为div元素且位于其后的所有p元素

4.3 使用属性选择元素

选择器示例说明
tag[attr]$('p[class]')选择所有带有class属性的p元素
tag[attr="value"]$('p[class="top"]')选择所有class属性值恰好等于top的p元素
tag[attr!="value"]$('p[class!="top"]')选择所有class属性值不等于top的p元素
tag[attr1="value"][attr2="value"]$('p[class="top"][id="con"]')选择所有class属性值恰好等于top(并且)带有id的属性值为con的p元素

5. 选择过滤器

5.1 位置过滤选择器(重点)

选择器描述
:first选择上下文匹配的第一个元素。p:first返回所有p元素中的第一个p标签
:last选择上下文匹配的最后一个元素。p:last返回所有p元素中的最后一个p标签
:even选择上下文中的偶数元素。p:even选择匹配元素集合中的偶数位的p元素（从0开始）
:odd选择上下文中的奇数元素。p:odd选择匹配元素集合中的奇数位的p元素（从0开始）
:eq(n)选择第n个匹配元素（从0开始）
:gt(n)大于，选择第n个匹配元素之后的元素（排除第n个）
:lt(n)小于，选择第n个匹配元素之前的元素（排除第n个）

5.2 子元素过滤选择器

选择器描述
:first-child第一个子元素
:last-child最后一个子元素
:first-of-type匹配上下文中特定类型的第一个子元素
:last-of-type匹配上下文中特定类型的最后一个子元素
:nth-child(n|even|odd|Xn+Y)匹配从前往后计数的第n个子元素
:nth-of-type(n|even|odd|Xn+Y)匹配从前往后计数的第n个特定类型的子元素

5.4 选取表单元素过滤器

jQuery提供了一些专门为表单设计的选择器，用于快速访问表单元素。

选择器描述
:checked选择处于选中状态的复选框、单选框或下拉框元素（checkbox，radio，option）
:disabled选择处于禁用状态的元素（button, input, optgroup, option, select, textarea）
:selected选择处于被选中状态的option元素

5.3 内容过滤器

选择器示例说明
:contains(text)$('div:contains("hello")')选择匹配元素集合中包含指定文本的所有div元素(匹配包含给定文本的元素)
:empty$('div:empty')选择所有没有子元素的div元素（包括文本节点）
:parent$('div:parent')选择所有非空的div元素（匹配含有子元素或者文本的元素）
:has(selector)$(div:has(p)')选择所有包含p元素的div元素(匹配含有选择器所匹配的元素的元素)
:not(selector)$('a:not(.active)')选择不匹配.active选择器的a元素

7. jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :

  1. 用原生 JS 获取来的对象就是 DOM 对象

  2. jQuery 方法获取的元素就是 jQuery 对象。

  3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

7.1 jQuery 对象和 DOM

JQ转原生:

 var p2 = $('p')[0];
        console.log(p2);

原生转JQ:$(p)

8. 操作jQuery集合

8.1 确定集合大小

 // 确定集合的长度
        console.log($('.box h3').length);

8.2 遍历集合元素

方法描述
$(selector).each(function(index,element))遍历集合中的所有元素

8.3 获取元素的索引(重点)

方法描述
index([element])指定元素相对于其他指定元素的 index 位置，从0开始计数。,如果未找到元素，index() 将返回 -1。

8.4 集合转数组

方法描述
toArray()将jQuery集合转换成包含所有元素的数组。

8.5 过滤(方法)

方法描述
get([index])返回集合中指定索引的元素。如果不指定索引，则返回所有的元素。
first()返回包含第一个元素的新集合。如果初始集合为空，则返回空集合。
last()返回包含最后一个元素的新集合。如果初始集合为空，则返回空集合。
eq(index)返回包含指定索引元素的新集合。参数可以为负数，表示从集合结尾开始计算。
filter(selector)创建一个集合副本，然后从新集合中删除不符合selector选择器条件的元素。
has(selector)创建并返回新的集合，只包含匹配selector选择器的子元素。
not(selector)创建不包含选择器selector参数匹配元素的新集合。
is(selector)确定集合中是否有元素匹配给定的选择器。返回是true,或者false
slice(start, [end])获取集合的子集。--还有splice方法等
map(callback)在集合中的每个元素上调callback函数，然后返回值到一个jQuery对象中。

8.6 根据关系获取集合(重点)

// 获取父元素
        console.log($(".paragraph").parent());// 获取父元素

        // 获取父元素及所有的祖先元素
        console.log($(".paragraph").parents());//获取元素的所有父元素

        // 获取所有子元素集合
        console.log($('.container').children());//获取所有子元素

        // 查找子元素的集合
        console.log($('.container').find('.foo'));//获取foo元素

        // 查找当前元素的上一个元素集合
        console.log($('#box3').prev());//获取box3的上一个元素

        // 返回前面所有兄弟元素的集合
        console.log($('#box3').prevAll());//获取box3前面所有兄弟元素

        // 查找当前元素的下一个元素集合
        console.log($('#box3').next());//获取box3的下一个元素
        
        // 返回后面所有兄弟元素的集合
        console.log($('#box3').nextAll());//获取box3后面所有兄弟元素

        // 查找当前元素的所有兄弟元素集合
        console.log($('#box3').siblings());//获取box3的所有兄弟元素
方法描述
(selector).parent(filter)返回元素的直接父元素。如果设置选择器，则只会返回匹配选择器的父元素。filter可选，规定缩小搜索父元素范围的选择器表达式。
(selector).parents(filter)返回元素的祖先元素。如果设置选择器，则只会返回匹配选择器的祖先元素。filter可选，规定缩小搜索祖先元素范围的选择器表达式。
(selector).children(filter)取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。如果设置选择器，则只会返回匹配选择器的子元素。<br />filter可选。规定缩小搜索子元素范围的选择器表达式。
(selector).find(filter)(重点)返回元素中匹配选择器的后代元素。<br />filter必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。
(selector).prev(filter)返回元素前面的直接兄弟元素。
(selector).prevAll(filter)返回元素前面的所有兄弟元素。
(selector).next(filter)返回元素后面的直接兄弟元素。
(selector).nextAll(filter)返回元素后面的所有兄弟元素。如果设置选择器，则只会返回匹配选择器的兄弟元素。
(selector).siblings(filter)(重点)返回元素前后的所有兄弟元素。如果设置选择器，则只会返回匹配选择器的兄弟元素。

8.7 操作集合的其他方法

方法描述
.add()向集合中添加新元素。
.contents()查找匹配元素内部所有的子节点（包括文本节点）。
.end()在jQuery链式调用中使用该方法；在当前调用链中结束最近的过滤操作，然后返回匹配元素的集合到之前的状态。

8.7 创建新HTML元素

使用jQuery动态创建元素是非常容易的，只需要给$()函数传递一个包含HTML标签的字符串就可以创建一个jQuery对象。

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#000000">$</span>(<span style="color:#aa1111">'<div>Hello jQuery</div>'</span>);</span></span>

如果只是想创建一个空的<div>元素，那么可以直接使用下面的简写代码：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#000000">$</span>(<span style="color:#aa1111">'<div></div>'</span>);</span></span>

这种语法等价于下面的两种语法：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#000000">$</span>(<span style="color:#aa1111">'<div>'</span>);
<span style="color:#000000">$</span>(<span style="color:#aa1111">'<div/>'</span>);</span></span>

假如要创建一个<img>元素，它包含多个属性，并且可以点击该图片，我们可以下面的语法创建：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#000000">$</span>(<span style="color:#aa1111">'<img>'</span>, {
    <span style="color:#000000">src</span>: <span style="color:#aa1111">'img/photo.png'</span>,
    <span style="color:#000000">alt</span>: <span style="color:#aa1111">''</span>,
    <span style="color:#000000">title</span>: <span style="color:#aa1111">''</span>,
    <span style="color:#000000">click</span>: <span style="color:#770088">function</span>() {
        <span style="color:#000000">alert</span>(<span style="color:#aa1111">'nihao'</span>);
    }
}).<span style="color:#000000">appendTo</span>(<span style="color:#aa1111">'body'</span>);</span></span>

这段代码创建一个包含多个属性，并且可以点击的<img>元素，然后将该元素追加到了页面上的<body>元素中。

9. 扩展内容

9.1 jQuery的事件

下面是 jQuery 中事件方法的一些例子：

<span style="background-color:#f8f8f8"><span style="color:#333333">  <span style="color:#000000">$</span>(<span style="color:#aa1111">"button"</span>).<span style="color:#000000">click</span>(<span style="color:#770088">function</span>(){
   <span style="color:#000000">事件处理</span>
  });</span></span>

9.2 操作css 方法

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

常用以下三种形式 : 

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 1.参数只写属性名，则是返回属性值</span>
<span style="color:#770088">var</span> <span style="color:#0000ff">strColor</span> <span style="color:#981a1a">=</span> <span style="color:#000000">$</span>(<span style="color:#770088">this</span>).<span style="color:#000000">css</span>(<span style="color:#aa1111">'color'</span>);
​
<span style="color:#aa5500">// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号</span>
<span style="color:#000000">$</span>(<span style="color:#770088">this</span>).<span style="color:#000000">css</span>(<span style="color:#aa1111">''</span><span style="color:#000000">color</span><span style="color:#aa1111">''</span>, <span style="color:#aa1111">''</span><span style="color:#000000">red</span><span style="color:#aa1111">''</span>);
​
<span style="color:#aa5500">// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号</span>
<span style="color:#000000">$</span>(<span style="color:#770088">this</span>).<span style="color:#000000">css</span>({ <span style="color:#000000">"color"</span>:<span style="color:#aa1111">"white"</span>,<span style="color:#000000">"font-size"</span>:<span style="color:#aa1111">"20px"</span>});
​</span></span>

注意：css() 多用于样式少时操作，多了则不太方便。

9.3 添加与删除类名

<span style="background-color:#f8f8f8"><span style="color:#333333">作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
​
常用的三种设置类样式方法：</span></span>
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 1.添加类</span>
<span style="color:#000000">$</span>(<span style="color:#aa1111">"div"</span>).<span style="color:#000000">addClass</span>(<span style="color:#aa1111">"current"</span>);
​
<span style="color:#aa5500">// 2.删除类</span>
<span style="color:#000000">$</span>(<span style="color:#aa1111">"div"</span>).<span style="color:#000000">removeClass</span>(<span style="color:#aa1111">"current"</span>);
​
<span style="color:#aa5500">// 3.切换类</span>
<span style="color:#000000">$</span>(<span style="color:#aa1111">"div"</span>).<span style="color:#000000">toggleClass</span>(<span style="color:#aa1111">"current"</span>);
​
<span style="color:#aa5500">//4.检查当前元素是否含有某个特定的类,如有返回true</span>
<span style="color:#000000">$</span>(<span style="color:#aa1111">'div'</span>).<span style="color:#000000">hasClass</span>((<span style="color:#aa1111">"content"</span>);
​</span></span>

9.4 jQuery的编程思想

  • 链式编程

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 链式编程是为了节省代码量，看起来更优雅。</span>
<span style="color:#000000">$</span>(<span style="color:#770088">this</span>).<span style="color:#000000">css</span>(<span style="color:#aa1111">'color'</span>, <span style="color:#aa1111">'red'</span>).<span style="color:#000000">sibling</span>().<span style="color:#000000">css</span>(<span style="color:#aa1111">'color'</span>, <span style="color:#aa1111">''</span>); </span></span>

  • 隐式迭代

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。</span>
<span style="color:#aa5500">// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。</span>
 <span style="color:#000000">$</span>(<span style="color:#aa1111">'li'</span>).<span style="color:#000000">css</span>(<span style="color:#aa1111">'color'</span>, <span style="color:#aa1111">'red'</span>); <span style="color:#aa5500">// 页面中所有的li元素字体颜色设置为红色，不用循环操作</span></span></span>

  • jQuery 里面的排他思想

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。</span>
<span style="color:#000000">$</span>(<span style="color:#770088">this</span>).<span style="color:#000000">css</span>(<span style="color:#000000">“color”</span>,<span style="color:#000000">”red”</span>);
<span style="color:#000000">$</span>(<span style="color:#770088">this</span>).<span style="color:#000000">siblings</span>(). <span style="color:#000000">css</span>(<span style="color:#000000">“color”</span>,<span style="color:#000000">””</span>);</span></span>

9.5 案例：tab 栏切换

 $('.tab').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $(".detail section").eq($(this).index()).addClass('active-sec').siblings().removeClass('active-sec');
        })

暗香盈袖@
关注
Jquery day3.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
Jquery day2.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
Jquery-day01
weixin_50519232的博客
04-26 1528
jquery是一个js工具库，它是对js的封装形成工具类。 jquery选择器： 一. jquery操作DOM 1.如何获取dom get()获取到的是一个dom对象 console.log($("tr").get(1)); jquery转dom jq[0] dom转化为jquery $(js对象) con...
JQuery-day01
刘向阳的博客
09-16 204
JQuery基础 1. 概念： 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。 JavaScript框架：本质
jQuery学习day01
li的博客
08-25 130
1、jQuery介绍 2、使用与安装 1.本地js文件 $与jQuery都代表jQuery，使用时没有任何区别 2.cdn bootcdn在线引用的方式使用 在使用cdn引入的时候，必须联网 3、基本使用 4、基本语法 1.选择器 2.事件绑定 3.DOM操作 4.设置属性方法 ...
jQuery 01day 初识jQuery
qq_54088653的博客
05-01 167
jquery学习 目录 jquery学习 01 day 初识jQuery jQuery的两把利器 jQuery的核心函数 01 day 初识jQuery 是什么？ 为什么用？ 怎么用？ what: http://jquery.com 一个优秀的js函数库：封装了 Bom和Dom why: html元素选取（选择器） html元素处理 css操作 html事件处理 js动画效果 链式调用 读写合一 .
jQuery-Day01 基础
weiweianx的博客
02-04 156
jQuery-Day01基础 JavaScript库是一个封装号的特定的集合（方法和函数）。 常见的库有jQuery、YUI、Dojo、Ext Js、zeptol（移动端）； 都是对原生js的封装。 jQuery 宗旨：“write less， Do More" 学习jQuery，重在学会调用其内部函数 优点：核心文件齐全；跨浏览器兼容；链式编程，隐式迭代；对事件、样式、动画支持；支持插件扩展开发；免费、开源。 官网：”https://jQuery.com“; 选择版本： 1x: 支持IE678低
JQuery_day01
big_lu的博客
11-20 261
正课: 什么是jQuery 如何使用jQuery 查找 什么是jQuery jQuery是第三方提供的执行DOM操作的极简化的函数库 第三方: 先下载，才能用 执行DOM操作: 学jQuery还是在学DOM的增删改查，事件绑定 极简化: jQuery是对DOM API的终极简化 函数库: jQuery是用函数解决一切问题！ 为什么: 2个主要原因: API极简化: 4个方面:...
jQuery-Day3
2401_85122909的博客
06-10 760
🏆 学习の目标能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件🥇 一、jQuery 事件注册​ jQuery 为我们提供了方便的事件注册机制，使开发人员易于操作，优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
jQuery day_01(7.12)
m0_70328115的博客
07-14 172
样式操作-style、点击事件、class操作、显示与隐藏、动画效果、轮播图、属性操作
jquery学习day2
weixin_44807430的博客
11-21 329
学习up
day20 jquery01.zip
11-18
在“day20 jquery01.zip”这个压缩包中，我们很可能会找到一系列关于初识jQuery以及循环语句使用的教程或示例代码。 首先，jQuery的核心理念是“写得更少，做得更多”。它通过简洁的API（应用程序接口）让开发者...
Jquery day4.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
IMG_20241018_191757.jpg
10-18
IMG_20241018_191757.jpg
ECharts饼图-饼图纹理.rar
10-18
图表效果及代码实现讲解链接：https://blog.csdn.net/zhangjiujiu/article/details/143060743
《ESP32从0到1》收官篇：wifi版温湿度蓝牙网关 源码
最新发布
10-18
以“wifi版温湿度蓝牙网关”这一具体项目为载体，对《ESP32从0到1》专辑前面所有内容的整合练习。 《E SP32从0到1》收官篇：wifi版温湿度蓝牙网关 https://blog.csdn.net/u013534357/article/details/143059019
课程设计-基于Java swing带GUI界面的员工工资管理(源码+文档+数据库+视频+截图).zip
10-18
1.将项目导入到eclipse（myeclipse也可以）。 2.导入项目后要做必要的配置，因为这个项目是在我的电脑上开发的，所以导入后没啥问题，但是导入到别人电脑后由于Java环境不一样，需要做一些基本配置才能运行起来，下面看我演示需要做哪些配置。 3.配置完成后需要配置数据库连接信息了。 4.接下来我们要导入数据库闻见了，这里我们采用navicat数据库管理工具，如果没有这个工具可以到我们的网站去下载，演示下去哪里下载。 5.首先我们在navicat里面创建个数据库，新建后双击新建的数据库打开，然后右键导入数据库文件，导入完后按f5刷新，就可以看到数据表了。 6.现在左右前期工作都做好了，我们可以准备运行了： 运行登陆界面，如下图所示，可以切换角色，切换角色时界面会相应的改变：
15天掌握jQuery实战教程
- Day 11至Day 15进一步扩展jQuery的应用范围，如多文件上传、Lightbox插件、表格操作、工具提示以及拖拽效果和选择器，这些内容涵盖了网页交互设计的多个重要方面。 通过这个15天的学习计划，读者不仅可以掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值