jQuery基础

最新推荐文章于 2024-08-27 01:45:00 发布

若梦plus

最新推荐文章于 2024-08-27 01:45:00 发布

阅读量561

点赞数 18

分类专栏： JavaScript 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_40588441/article/details/139819242

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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 包

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

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

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

<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遍历方法

回调函数中，第一个参数是index，第二个参数是循环的当前元素
this也是指向循环的当前元素
如果想要原生dom元素，使用jquery的方法 =>$（this)转为jquery对象

$(".list li").each(function(index,item){
	console.log(index,item,this);
})

length

这是一个属性

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

  $(".list li").length

index()

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

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

拓展用法传入一个选择器可以作为查询下标的范围

 $(".first").index(".list li");  // 返回某个元素 相对于 某个集合范围的下标

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");

获取元素

css选择器
接收原生dom元素
接收原生dom元素的集合
接收一个jquery对象

jQuery 选择器

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

基本选择器
层级选择器
伪类选择器

基本选择器

ID选择器

$(“#id”)

标签选择器

$(“element”)

类选择器

$(“.className”)

通配选择器

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

组选择器

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

<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)

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

<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

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

<p>1</p>
<p id="mp">2</p>
<p class="c1">3</p>
<script>
$("p:not(.c1,#mp)").css("color", "orange");
</script>

内容选择器

:contains

匹配包含给定文本的元素

<div>abcd</div>
<div>ABcd</div>
<div>xxyy</div>
<script>
console.log( $("div:contains('bc')") );
</script>

:empty

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

<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

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

<div><p>Hello</p></div>
<div>Hello again!</div>
<script>
console.log( $("div:has(p)") );
</script>

:parent

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

<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的元素

<table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
</table>
<script>
console.log( $("tr:hidden") );
</script>

:visible

匹配所有的可见元素

<table>
    <tr style="display:none"><td>Value 1</td></tr>
    <tr><td>Value 2</td></tr>
</table>
<script>
console.log( $("tr:visible") );
</script>

属性选择器

[attribute]

匹配包含给定属性的元素

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>
<script>
console.log( $("div[id]") );
</script>

[attribute=value]

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

<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]

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

<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]

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

<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]

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

<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]

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

<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>