jQuery 总结

最新推荐文章于 2024-04-07 13:07:29 发布
最新推荐文章于 2024-04-07 13:07:29 发布
阅读量590 收藏
点赞数
分类专栏： JQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55592592/article/details/127557529
版权

# jQuery 概述

jQuery 是原生 Javascript 开发出来的代码库，通常被称为框架。

jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。

jQuery 通常被用来优化HTML文档操作、事件处理、动画设计和Ajax交互。

```

中文名： 极快瑞

外文名： jQuery

核心理念： write less,do more

发布时间： 2006年1月

发布人： John Resig

发布地点： 美国纽约

最新版本： jQuery 3.1.1

第一个版本： jQuery 1.0（2006年1月）

```

>注意：jQuery2.0 以上的版本是不支持IE6、IE7、IE8的。

## jQuery 优势

- 体积小，使用灵巧(只需引入一个js文件)

- 方便的选择页面元素(模仿CSS选择器更精确、灵活)

- 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)

- 控制响应事件(动态添加响应事件)

- 提供基本网页特效(提供已封装的网页特效方法)

- 快速实现通信(ajax)

- 易扩展、插件丰富

## jQuery 下载

官网：http://jquery.com/

## 如何引入 jQuery 包

第一种方法：本地文件引入

```html

<script src="jquery.js"></script>

```

第二种方法：他站网络引入

```html

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

```

## 使用 jQuery

引入 jQuery 文件后，才能使用 jQuery 代码。

## jQuery 核心

### ready与load

load  等页面所有内容(文档,img,js,video)加载完毕    才会执行对应的函数

ready 等文档中所有的dom元素加载完毕 执行对应的函数(允许你绑定一个在DOM文档载入完成后执行的函数)

```

    $(document).ready(function () {

        console.log(1111111);

    })

    简写

    $(function () {

        console.log(1111111111);

    })

```

方法展示之基本HTML结构

```

    <div class="wrap" name="one" id="box">

        <h2>模拟封装</h2>

        <input type="text" class="con">

        <div class="list">

            <li class="first">01</li>

            <li>02</li>

            <li class="mid">03</li>

            <li>04</li>

            <li>05</li>

            <li class="last">06</li>

        </div>

    </div>

```

### each

jquery遍历方法

```

$(".list li").each(function(index,item){

    console.log(index,item);

})

```

### length

返回jQuery对象中元素的个数。

```

  $(".list li").length

```

### index()

返回元素对应的下标(默认 相对于同级)

```

$(".list .first").eq(3).index();   // 0

```

### data()  和 removeData()

data()  在元素上存放数据  

removeData()  删除 在元素上存放数据  删(对应属性名)

可以存( 属性名 -> 属性值(各种数据类型))        取(对应属性名 取值)

```

 $(".list li").eq(0).data("userInfo", { name: "张三", age: 18 });

 $(".list li").eq(0).data("userInfo");

 删除对应的数据

 $(".list li").eq(0).removeData("userInfo");

```



 

# jQuery 选择器

选择器的作用是选出元素节点，要注意的是结果为集合，就算只选出来一个元素节点，其结果也是集合。

- 基本选择器

- 层级选择器

- 伪类选择器

## 基本选择器

### ID选择器

$("#id")

### 标签选择器

$("element")

### 类选择器

$(".className")

### 通配选择器

$("*") 匹配指定上下文中所有元素

### 组选择器

$("selector1,selector2,selectorN") 特点：无数量限制，以逗号分隔 (逐个匹配，结果全部返回)

```html

<div>

    <h4>论语</h4>

    <div class="div1">子在川上曰：</div>

    <p id="p1">“逝者如斯夫！</p>

    <p>不舍昼夜。”</p>

</div>

<script>

// 练习

console.log( $("#p1") );

</script>

```

## 层级选择器

### 包含选择器

$("a b")在给定的祖先元素下匹配所有后代元素。（不受层级限制）

### 子选择器

$("parent > child") 在给定的父元素下匹配所有子元素。

### 相邻选择器

$("prev + next") 匹配所有紧接在prev元素后的next元素。（紧随其后找1个元素）

### 兄弟选择器

$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。



 

## 伪类选择器

### 特定位置选择器

#### :first

匹配找到的第1个元素

#### :last

匹配找到的最后一个元素

#### :eq

匹配一个给定索引值的元素

### 指定范围选择器

#### :even

匹配所有索引值为偶数的元素

#### :odd

匹配所有索引值为奇数的元素

#### :gt(index)

匹配所有大于给定索引值的元素

#### :lt(index)

匹配所有小于给定索引值的元素

```html

<ul>

    <li>0</li>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

</ul>

<script>

$("li:first").css("color", "orange");

</script>

```

### 排除选择器

#### :not

去除所有与给定选择器匹配的元素

```html

<p>1</p>

<p id="mp">2</p>

<p class="c1">3</p>

<script>

$("p:not(.c1,#mp)").css("color", "orange");

</script>

```

### 内容选择器

#### :contains

匹配包含给定文本的元素

```html

<div>abcd</div>

<div>ABcd</div>

<div>xxyy</div>

<script>

console.log( $("div:contains('bc')") );

</script>

```

#### :empty

匹配所有不包含子元素或者文本的空元素

```html

<table>

    <tr><td>Value 1</td><td></td></tr>

    <tr><td>Value 2</td><td></td></tr>

</table>

<script>

console.log( $("td:empty") );

</script>

```

#### :has

匹配含有选择器所匹配的元素的元素

```html

<div><p>Hello</p></div>

<div>Hello again!</div>

<script>

console.log( $("div:has(p)") );

</script>

```

#### :parent

匹配含有子元素或者文本的元素

```html

<table>

    <tr><td>Value 1</td><td></td></tr>

    <tr><td>Value 2</td><td></td></tr>

</table>

<script>

console.log( $("td:parent") );

</script>

```

### 可见性选择器

#### :hidden

匹配所有不可见元素，或者type为hidden的元素

```html

<table>

    <tr style="display:none"><td>Value 1</td></tr>

    <tr><td>Value 2</td></tr>

</table>

<script>

console.log( $("tr:hidden") );

</script>

```

#### :visible

匹配所有的可见元素

```html

<table>

    <tr style="display:none"><td>Value 1</td></tr>

    <tr><td>Value 2</td></tr>

</table>

<script>

console.log( $("tr:visible") );

</script>

```

## 属性选择器

### [attribute]

匹配包含给定属性的元素

```html

<div>

  <p>Hello!</p>

</div>

<div id="test2"></div>

<script>

console.log( $("div[id]") );

</script>

```

### [attribute=value]

匹配给定的属性是某个特定值的元素

```html

<input type="checkbox" name="a" value="1" />

<input type="checkbox" name="a" value="2" />

<input type="checkbox" name="b" value="3" />

<script>

$("input[name='a']").attr("checked", true);

</script>

```

### [attribute!=value]

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

```html

<input type="checkbox" name="a" value="1" />

<input type="checkbox" name="a" value="2" />

<input type="checkbox" name="b" value="3" />

<script>

$("input[name!='a']").attr("checked", true);

</script>

```

### [attribute^=value]

匹配给定的属性是以某些值开始的元素

```html

<input type="checkbox" name="abc" value="1" />

<input type="checkbox" name="adc" value="2" />

<input type="checkbox" name="b" value="3" />

<script>

$("input[name^='a']").attr("checked", true);

</script>

```

### [attribute$=value]

匹配给定的属性是以某些值结尾的元素

```html

<input type="checkbox" name="abc" value="1" />

<input type="checkbox" name="adc" value="2" />

<input type="checkbox" name="b" value="3" />

<script>

$("input[name$='c']").attr("checked", true);

</script>

```

### [attribute*=value]

匹配给定的属性是以包含某些值的元素

```html

<input type="checkbox" name="abc" value="1" />

<input type="checkbox" name="adc" value="2" />

<input type="checkbox" name="b" value="3" />

<script>

$("input[name*='d']").attr("checked", true);

</script>

```


 

坨坨tuo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
jQuery总结
m0_59248606的博客
05-17 125
jquery到底是什么 jQuery的官网jQuery jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。 $ jQuery jquery文件引用 本地引用 <script src="./js/jquery-3.6.0.min.js"></script> 远程调用 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ...
jquery获取子元素的一些方法
m0_74265396的博客
07-30 1291
注意:find和children的区别,代码已给出详细解释,想要真正理解,还是得靠代码.光看不练那都是纸上谈兵。3.通过父元素的children进行查找。2.通过父元素进行find查找。1.通过id,class等。获取子元素的一些方法。
jquery按下标获取元素_jquery获取元素的方法
weixin_39673972的博客
12-22 2647
一.根据标签属性或属性值获取1.根据属性获取元素比如要获取页面p标签中属性有id的元素代码如下:$("p[id]").css("color","red");12.根据属性值获取元素特殊符号 $ ， ！ ， * ， @ ， ^ 的灵活使用。2.1 $[attribute$=value]，匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下：123jq代码：$("input[name$='let...
jquery获取父节点、子节点、兄弟节点
云泽的博客
10-10 927
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲test").parent(e…(“span”).parent()或者$(“span”).parent(".class") $("#test").parents(expr)，类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 $("#test...
jQuery知识点总结
qq_45030966的博客
09-10 242
1.jQuery ​ 是一个快速小巧、功能丰富的第三方JavaScript库 ​ 功能： ​ 1.选取HTML元素 ​ 2.操作元素 ​ 3.CSS操作 ​ 4.操作HTML事件 ​ … ​ 使用：引入链接到需要的HTML文件中 ​ 1.直接引入网络资源 ​ 2.将网络资源下载到本地去引入 ​ 2.jQuery的使用 2.1$(选择器) 普遍选择器 选取所有元素 console.log($("*")); 标签名选择器 选取的为数组 console.log($("p"));
jQuery中在不同场景下，通过点击事件获取当前子元素的下标
Yukinoshita_kino的博客
05-18 2867
jQuery中两种场景下，通过点击事件获取子元素的下标 html代码部分 // 1.第一种场景 <div class="box-one"> <div class="child-one">子元素一</div> <div class="child-one">子元素二</div> <div class="child-one">子元素三</div> </div> // 2.第二种场景 <div cla
jQuery总结1
08-03
6、总结jQuery是一个强大的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。它的核心优势在于提高了开发效率，降低了代码复杂性，同时具有良好的浏览器兼容性。jQuery通过其独特的选择器语法，使得选取...
jquery总结
10-24
1、查找元素的方法多种多样，非常灵活 2. 拥有隐式迭代特性，因此不再需要手写for循环了。 3. 完全没有兼容性问题。 4. 实现动画非常简单，而且功能更加的强大。 5. 代码简单、粗暴。
JQuery入门，JQuery总结
01-05
**jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库，它的出现极大地方便了JavaScript的编程，使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more"，即用更...
jquery总结学习资料JQuery总结
10-16
**jQuery 总结** 在实际开发中，jQuery 可以极大地提高工作效率，减少代码量，使得动态交互和界面美化变得更加简单。然而，随着 ES6 和现代前端框架的崛起，如 React 和 Vue，jQuery 在某些场景下可能不再是首选。...
jQuery中获取对应的下标
欢欢的博客
04-20 1294
$('.game .soft_title>div p').hover(function () { $(this).addClass('active').siblings().removeClass('active'); var _index = $(this).index() $('.game .soft_list .soft_item').eq(_index).addClass('active').siblings().removeClass('ac.
js,jQuery初步了解
qq_46003863的博客
11-24 855
JavaScript JavaScript 的导入方式 不需要显示定义 script 的 type 属性，默认就是 javascript 内部导入 一般放在 head 标签或 body 标签底部 <script> alert("hello,world!"); </script> 外部导入 html 中： 链接式： <script src="JS01/js01.js"></script> JavaScript 中： alert
jQuery怎样获取下标？
最新发布
FENGZXCjjjjj的博客
04-07 198
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。eq(index)；选择器选取带有指定 index 值的元素。下标都是从零开始的，如果元素只有一个，那么它的下标就是0,。jQuery中有一种方法，eq();当index的值可以为负数。
6-2、选择器
鸵鸟
09-06 892
选择器
js、jq获取当前点击元素的下标
m0_62098435的博客
10-02 3306
以下是原生js方法： //获取到所有的li标签 var li = technical.querySelectorAll("li") //遍历li标签 for (let i = 0; i < tr2.length; i++) { //将i的下标赋值到li的index上 li[i].index = i ; li[i].onclick = function (){ console.log(tihe.index); }; }; 以下是jq方法，相对于js方便一.
jquery如何获得ul下指定下标的li元素呢
Anhk丶
04-28 5494
jquery如何获得ul下指定下标的li元素呢 <ul> <li>第知1个</li> <li>第2个</li> <li>第3个</li> <li>第4个</li> </ul> 使用eq选择器获取道 语法：$(":eq(index)") index......
jQuery循环中获取指定下标的操作
LaoYe的博客
10-10 6263
第一种方式：循环中点击 for(var i=0;i&lt;list.length;i++){ list[i].index = i; $(list[i]).click(function(){ color = "#" + Math.random().toString(16).substr(2,6); $(list[this.index]).css("...
jQuery中直接获取标签的下标
qq_37687883的博客
07-25 5554
今天在使用jQuery做图片轮播的时候，遇到一个问题，就是为轮播图片对应的小圆图标，绑定对应的onclick事件时，用了如下代码： function getImg(m) { index=m; autoRun();//轮播图片的方法； } &lt;span class onclick="getImg(0)"&gt;&lt;...
"jQuery总结1：入门函数、优势及基本介绍
总结： 本文主要介绍了jQuery的...最后总结了本文的内容，再次强调了jQuery的优势，并鼓励读者继续深入学习和使用jQuery框架来提高开发效率。同时也提到了jQuery的开源特性，任何人都可以参与贡献代码或使用该框架。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坨坨tuo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值