Web前端 | jQuery

最新推荐文章于 2024-05-09 17:54:26 发布

_leyilea

最新推荐文章于 2024-05-09 17:54:26 发布

阅读量212

点赞数

分类专栏： Web前端文章标签： web前端 js jQ jQuery

本文链接：https://blog.csdn.net/qq_45305211/article/details/100130042

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

jQuery简介

1. 介绍

jQuery是JS的工具库，对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。

2. 使用

1）引入

先引入jquery文件，才能使用jquery语法

CDN 有网

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> -->
<!--<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">-->
</head>

本地文件（常用）

<head>
<script src="./jquery-1.10.2.min.js"></script>
</head>

2）工厂函数 - $()

"$()"函数用于获取元素节点，创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。
例 :

 //$()获取元素节点,需传入字符串的选择器
 $("h1")
 $("#d1")
 $(".c1")
 $("body,h1,p")

3）原生JS对象与jQuery对象

原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

原生JS转换jQuery对象

 $(原生对象) --> 返回 jQuery 对象

jQuery对象转换原生JS对象

+ 方法一 : 根据下标取元素,取出即为原生对象
  var div = $("div")[0];
+ 方法二 : 使用jQuery的get(index)取原生对象
  var div2 = $("div").get(0);

4）jQuery获取元素

jQuery通过选择器获取元素，$(“选择器”)
选择器分类 :

基础选择器

标签选择器：$("div")
ID选择器：$("#d1")
类选择器：$(".c1")
群组选择器：$("body,p,h1")

层级选择器

后代选择器： $("div .c1")
子代选择器： $("div>span")
相邻兄弟选择器： $("h1+p")  匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素

过滤选择器
需要结合其他选择器使用。

:first
  匹配第一个元素 例:$("p:first")
:last
  匹配最后一个元素 例:$("p:last")
:odd
  匹配奇数下标对应的元素
:even
  匹配偶数下标对应的元素
:eq(index)
  匹配指定下标的元素
:lt(index)
  匹配下标小于index的元素
:gt(index)
  匹配下标大于index的元素
:not(选择器)
  否定筛选,除()中选择器外,其他元素

子元素过滤选择器

:first-child
   匹配第一个子元素
:last-child
   匹配最后一个子元素
:nth-child(n)
   匹配第n个子元素(n从1开始计数)

5）操作元素内容

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性

通用:
- 参数中有值表示赋值-->jq对象.text('abc')
- 参数中无值表示取值-->jq对象.text()

6）操作标签属性

attr("attrName","value")
设置或读取标签属性
prop("attrName","value")
设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
removeAttr("attrName")
移除指定属性

7）操作标签样式

为元素添加id/class属性,对应选择器样式
针对类选择器,提供操作class属性值的方法

addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

<style>
    .red{
        color: white;
        background-color: red;
        width: 200px
    }
</style>

<div id="box">点我</div>
<script>
    $('#box').on('click',function(){
        // 实现样式的切换
        $(this).toggleClass('red')
    })
</script>

操作行内样式

css("属性名","属性值")  //设置行内样式
css(JSON对象)			 //设置一组CSS样式
/*
JSON对象:常用数据传输格式
语法 :
   {
    "width":"200px",
    "height":"200px",
    "color":"red"
   }
 *///可以省略key的双引号

链式写法：
jq.对象.方法.属性.方法.属性…

8）根据层级结构获取元素

parent()
返回父元素
parents('selector')
返回满足选择器的祖先元素
children()/children("selector")
返回所有直接子元素/返回满足选择器的直接子元素
find("selector")
返回所有的后代元素(包含直接与间接)
next()/next("selector")
返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器
prev()/prev("selector")
返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器
siblings()/siblings("selector")
返回所有的兄弟元素/满足选择器的所有兄弟元素

9）元素的创建,添加,删除

创建
使用$(“标签语法”)，返回创建好的元素

var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容，属性和样式

添加至页面

1）作为子元素添加

$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中

2）作为兄弟元素添加

$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

3）移除元素

$obj.remove();	//移除$obj

使用不同的方法在不同位置同时添加多个元素时，只会添加最后一个

10）动画

显示和隐藏 show(2000,callback)/hide(2000,callback)
下拉和上推 slideDown()/slideUp()（块元素才能实现）
淡隐淡现方式显示 fadeOut()/fadeIn()
动画函数，可以实现自定义动画 animate 函数

11）jQuery事件处理

1. 文档加载完毕（入口函数）

入口函数作用
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

原生JS 方法：

window.onload = function () {
   // 执行代码
}

jQuery:

//语法一 
$(document).ready(function (){
  //文档加载完毕后执行
})
//语法二 
$().ready(function (){
  //文档加载完毕后执行
})
//语法三 
$(function(){
  //文档加载完毕后执行
})

区别：

原生onload事件不能重复书写，会产生覆盖问题；
jquery中对事件做了优化,可以重复书写ready方法,依次执行
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

2. 事件绑定方式

事件名称省略 on 前缀

  //on("事件名称"，function)
  $("div").on("click",function(){});//新版本使用的多些
  //bind("事件名称",function)
  $("div").bind("click",function(){});//1.6-1.8间的版本
  //事件名作为方法名
  $("div").click(function(){});

3. this

this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。

11）遍历元素

原生js：for
jQ：each()
jQ集合对象.each(function(i,ele){})
$.each()

<ul>
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <li>DD</li>
    <li>EE</li>
</ul>

<script>
    var $lis = $('ul>li');
    var arr = [1, 2, 3, 4, 5];
    // jq集合对象的方法(遍历集合对象)
    $lis.each(function (index, elem) {
        console.log(index, elem)
    })
    // 遍历函数(专门遍历数据)
    $.each(arr, function (index, elem) {
        console.log(index, elem)
    })
</script>
 })

## 3.实现下拉列表框的三级联动

1. 页面效果

在这里插入图片描述

2. 代码分析

1. 页面元素

在这里插入图片描述

2. 初始代码

在这里插入图片描述

3. 绑定省份

在这里插入图片描述

4. 绑定城市

在这里插入图片描述

_leyilea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端 | jQuery

文章目录jQuery简介1. 介绍2. 使用1）引入2）工厂函数 - $()3）原生JS对象与jQuery对象4）jQuery获取元素5）操作元素内容6）操作标签属性7）操作标签样式8）根据层级结构获取元素9）元素的创建,添加,删除10）动画11）jQuery事件处理3.实现下拉列表框的三级联动1. 页面效果2. 代码分析1. 页面元素2. 初始代码3. 绑定省份4. 绑定城市jQuery简介...
复制链接

扫一扫