jquery

最新推荐文章于 2024-06-24 20:52:55 发布
最新推荐文章于 2024-06-24 20:52:55 发布
阅读量277 收藏 3
点赞数 2
分类专栏： 前端 文章标签： jquery js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39787513/article/details/108479349
版权

jquery

一、jquery初识

在bootcdn找到jquery压缩文件:https://www.bootcdn.cn/
引入jquery：
将压缩文件的内容复制到一个空js文件中，再导入到html文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1 id="d1">12345</h1>
</body>
<script src="jquery.js"></script>
<script>
    
</script>
</html>

var d1=$(’#d1’) --jquery对象
var d=document.getElementById(‘d1’) --原生dom对象
jquery对象和dom对象不能调用互相的方法

jquery对象和dom对象可以互相转换
d1[0] — dom对象
$(d) —jquery对象

二、选择器

1、id选择器

写法：$(’#d1’)

运行结果

如图，可根据id取出找到对应标签，同css

2、类选择器

写法：$(’.c1’)

运行结果
如图，可根据类找到对应标签，同css

3、元素选择器

写法：$(‘标签名称’)
运行结果
如图，可通过元素名称找到所有对应标签

4、组合选择器

写法：$(’#d1,.c2’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1,.c2{
            background-color:red;
            height:100px;
            width:100px;
            border:1px solid black;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div class="c2">
    我是c2
</div>
</body>
<script src="jquery.js"></script>
<script>
    
</script>
</html>

页面效果：
页面效果
可通过组合选择器更换标签css样式：

$(#d1,.c2).css('background','blue');

示例
取出索引为0的dom对象和索引为0的jquery对象：

$('#d1,.c2')[0]  //索引为0的dom对象
$('#d1,.c2').eq(1)  //索引为0的jquery对象

示例：
运行结果

5、后代选择器

$('.c2 span')

示例：
页面效果

6、表单选择器

$(":input") 找到所有input标签
示例：
运行结果
$(":text") 找到所有input且type=“text"的标签
示例：
运行结果
$(”:password") 找到所有input且type=“password"的标签
示例：
运行结果
$(”:radio") 找到所有input且type=“radio”的标签

$(“checkbox”) 找到所有input且type="checkbox"的标签

7、筛选器方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li class="c1">张三</li>
    <li class="c1">李四</li>
    <li class="c2">王五</li>
    <li class="c3">赵六</li>
</ul>
</body>
<script src="jquery.js"></script>
</html>

运行结果

1）parent()
找寻子标签的父标签
2）parents()
找寻子标签的所有父级标签

运行结果
3）parentsUntil(‘父级标签’)
往上找，直到找到括号内的父级标签，不包含此父级标签
运行结果
4）children()
找寻所有子标签：

运行结果
5）children(“类”)
找到符合类选择器的子标签
运行结果
6）next()
找寻下面一个兄弟标签
运行结果
7）nextAll()
找寻下面所有兄弟标签
运行结果
8）nextUntil(“兄弟标签”)
直到某个兄弟标签为止，不包含此兄弟标签
运行结果
9）prev()
向上寻找兄弟标签
运行结果
10）prevAll和prevUntil
参考nextAll与nextUntil，不过顺序是反的
运行结果
11）siblings()
找到不包含自己的所有兄弟标签
运行结果
筛选兄弟标签中class为c2的兄弟标签：
运行结果

12）find()
找后代，同css后代选择器

$('li').find('span');

运行结果
13）first()和last()和eq(索引值)

$('li').first();  //找寻li标签中第一个
$('li').last();  //找寻li标签中最后一个
$('li').eq("0");  //按照索引取对应标签，索引从0开始
$('li')[0];  //dom原生对象

运行结果

三、文件操作

text()和html() 等同于innerText和innerHTML
获取文本：

$('.c1').text();
$('.c1').html();

运行结果
设置文本：

$('.c1').text('要设置文本');
$('.c1').html('<a href="">'文本'</a>')  //html可更改标签，text不行

运行结果
页面效果

四、class类值操作

1、添加类值

$('.c1').addClass('c2')

运行结果

2、删除类值

$('.c1').removeClass('c2')

运行结果

3、切换，有就删除，没有就添加

$('.c1').toggleClass('c2');

运行结果

五、css样式操作

$('.c1').css('样式');

运行结果
页面效果

六、值操作

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="username" value="username" disabled>
<input type="radio" class="a1" name="sex" value="1">男
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1">打篮球
<input type="checkbox" class="a2" name="hobby" value="2">看书
<input type="checkbox" class="a2" name="hobby" value="3">踢足球
<select name="city" id="s1">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">杭州</option>
    <option value="4">天水</option>
</select>
<select name="food" id="s2" multiple>
    <option value="1">烤鸭、羊蝎子</option>
    <option value="2">蟹黄包、白斩鸡</option>
    <option value="3">西湖醋鱼、龙井虾仁</option>
    <option value="4">天水酒碟、虾酱肉</option>
</select>
</body>
<script src="jquery.js"></script>
</html>

1）text获取值

$(:'text').val()

运行结果
2）text设置值

$(':text').val('user');

运行结果
运行结果
3）redio获取值
先选中要获取值的选项，再进行获取：
选择

$(':radio:checked').val();

运行结果
4）radio设置值

$('radio').val(['2']);

根据默认值，通过设置值单选框会自动切换
运行结果
页面效果
5）checkbox
checkbox获取值：

var s $(':checkbox:checked');
//循环取出

先选中多选框要取值的元素
页面效果

运行结果
补充：$.each循环
循环标签数组：
运行结果
运行结果
checkbox设置值：
可根据默认值进行设置：

$(':checkbox').val(['值1','值2'])

运行结果
页面效果
用类或id设置标签：
运行结果
页面效果
单选下拉框和多选下拉框查看及设置：
可通过类或id来设置：
运行结果
页面效果

jquery选择器补充：
表单对象属性选择器

:checked  //找到被选中的input标签和option标签
:selected  //找到被选中的select标签中的option标签
:disabled  //不可操作标签
:enabled  //可操作标签

七、创建标签

js创建标签方法：

var a=document.createElement('a');

jquery创建标签方法：

$({'<a>',{
	text:'链接',
	href:'www.baidu.com',
	class:'link',
	name:'baidu',
	id:'d1'
})

运行结果

八、文档操作

1、往标签内部的后面添加元素

append方法：
html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div></div>
</body>
</html>

2、append添加标签:

var a = $(<a>,"{href:"www.baidu.com",text:"百度"}"
$('div').append(a)

运行结果
页面效果

3、prepend方法：

往标签内部的前面添加元素
运行结果

4、insertBefore方法：

往标签外部前面添加元素
运行结果

5、insertAfter：

往标签外部后面添加元素：
运行结果

九、清空及删除标签

清空标签三种方法：

$('div').text('');
$('div').html('');
$('div').empty();

删除标签：

$('div').remove();

运行结果

十、克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1">
    <button class="btn">屠龙宝刀，点击就送</button>
</div>
</body>
<script src="jquery.js" class="btn"></script>
<script>
    $('.btn').click(function(){
        // var btn=$(this).clone(); //不克隆绑定的事件
        var btn=$(this).clone(true); //克隆绑定的事件
        $('.c1').append(btn);
    })
</script>
</html>

页面效果：
运行结果
可通过点击按钮克隆按钮

十一、模版字符串

var name='Lsir'
var ss='${name},你好'

运行结果

十二、事件绑定

方式1
点击事件
$('#btn').click(function (){
	$('.shadow,.mode').removeClass('hide');
})
方式2
$('.c1').on('click',function (){
          $(this).addClass('c2');
})

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
            width: 100px;
        }
        .c2{
            background-color: yellow;
        }
    </style>
</head>
<body>


<div class="c1"></div>


</body>
<script src='jquery.js'></script>
<script>

    // xx.onclick = function(){
    //     this
    // }
    // //方式1
    // $('.c1').click(function (){
    //     // this//dom对象
    //     $(this).addClass('c2');
    //
    // }) ;
    // 方式2
    $('.c1').on('click',function (){
          $(this).addClass('c2');
    })



</script>
</html>

页面效果：
运行结果
点击后变色：
页面效果

十三、事件委托

绑定子标签时，必须通过父标签来进行事件委托：

<div class="c1">
    <button class="btn">屠龙宝刀，点击就送！</button>
</div>
js代码部分
    $('.c1').on('click','.btn',function (){
        var btn = $(this).clone();

        $('.c1').append(btn);
        
    })

十四、属性操作

prop方法

针对的是checked\selected\enabled\disabled

$('#sex').prop('checked',true); //设置选中
$('#sex').prop('checked',false); // 取消选中

$('#uname').prop('disabled',true); //设置不可编辑
$('#uname').prop('disabled',false); //设置可以编辑

attr方法

示例:

$('#d1').attr('id')  // 获取属性对应的值
$('#d1').attr({'xx1':'oo1','xx2':'oo2'}); // 设置属性

十五、常用事件

1）失去光标时触发的事件
blur(function (){})

2）获取光标时触发的事件
focus(function (){})

3）change事件，域内容发生变化时触发的事件 ,如果是给input标签绑定的change事件，那么只有input标签中的内容发生变化，并且失去光标时才会触发
change(function (){})

4）鼠标进入时触发的事件
mouseenter(function (){})

5）鼠标离开时触发的事件
mouseleave(function (){})

6）鼠标悬浮事件
hover(function (){})

7）实时捕获输入内容的事件
input(function (){})

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #ff6700;
            height: 200px;
            width: 200px;
        }
        .c2{
            background-image: url("meinv.png");
            background-size: 100%;
            height: 350px;
            width: 400px;
            display: none;
        }
    </style>
</head>
<body>


<input type="text" id="username">

<!--<div class="c1">-->

<!--</div>-->


<div class="c2"></div>
</body>
<script src='jquery.js'></script>
<script>
    // 失去光标时触发的事件
    // $('#username').blur(function (){
    //     $(this).css({'background-color':'yellow'});
    // });
    // // 获取光标时触发的事件
    // $('#username').focus(function (){
    //     $(this).css({'background-color':'blue'});
    // });

    //change事件，域内容发生变化时触发的事件  ,如果是给input标签绑定的change事件，
    // 那么只有input标签中的内容发生变化，并且失去光标时才会触发
    // $('#username').change(function (){
    //     console.log($(this).val());
    // });

    // 鼠标进入时触发的事件
    // $('.c1').mouseenter(function (){
    //     $(this).css({'background-color':'red'})
    // })
    // // 鼠标离开时触发的事件
    // $('.c1').mouseleave(function (){
    //     $(this).css({'background-color':'yellow'})
    // })

    // // 鼠标悬浮事件
    // $('.c1').hover(
    //     // 鼠标进入时触发事件
    //     function (){
    //        $(this).css({'background-color':'red'})
    //     },
    //     // 鼠标离开时触发事件
    //     function (){
    //        $(this).css({'background-color':'yellow'})
    //     }
    // ) ;

    // input事件：实时捕获输入内容的事件
     // $('#username').on('input',function (){
     //     console.log($(this).val());
     // })


</script>
</html>
越墨
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
JQuery安装与下载教程
热门推荐
Muchen灬
05-25 13万+
jQuery安装与下载 JQuery 是一个javaScript库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery 极大地简化javaScript编程 --juery相比js优点： jquery的onload加载事件速度更快，并且多个加载并行 【jq绑定事件都是使用的事件函数，不需要加on】； js的onloa...
jQuery下载和安装详细教程
柯晓楠
01-15 3万+
下载jQuery 我们可以到jQuery的官网下载jQuery文件（PS：其实jQuery就是一个封装了很多函数的js文件，把这个js文件导入到网页中就可以了）。 jQuery官网地址： https://jquery.com/ 打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载： Production version - 用于实际的网站中，是已经被精简和...
前端主流框架--JQuery入门
最新发布
qq_56438516的博客
06-24 1097
jQuery是一个js框架，代码本质上就是js代码，使用时需要引入jQuery.js引人jQuery：使用标签AJAX即Asynchronous Javascript And XML（异步JavaScript和XML），是改善用户体验的网页开发技术；
jQuery详解
亦翼的博客
07-10 8583
文章目录Bootstrap简介概念为什么使用Bootstrap下载与使用Bootstrap的使用表格丰富的标签好看的类样式情景色类样式响应式表格表单表单布局默认布局内联布局表单控件输入框文本框复选框复选按钮单选框单选按钮按钮图片下拉菜单组件分页组件栅格系统缩略图组件模态框组件两个案例首页轮播大图响应式导航条 Bootstrap简介 概念 Bootstrap 来自 Twitter，是目前最受欢迎的响应式前端框架。 Bootstrap 基于 HTML、CSS、JavaScript，简洁灵活，使得 Web 开发
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1564
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery
weixin_70320000的博客
11-29 3343
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-27 5377
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
前端基础之jQuery
qq_53350943的博客
04-07 3606
jQuery是一个封装JS的框架。 使用jQuery可以更方便的编写JS脚本实现的功能。 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX（重要
JQuery详解
weixin_45845391的博客
12-22 4148
JQuery能做什么 访问和操作DOM元素 控制页面样式 对页面时间进行处理 扩展新的JQuery插件 与Ajax技术完美结合 JQuery能做到的JavaScript也都能做到，但使用JQuery能大幅度提高开发效率其实，JQuery和JavaScript之间的关系，可以理解为“成语” 和“白话文”之间的关系。成语是对白话文的高度压缩，而JQuery也是对JavaScript的高度压缩库进入JQuery官网：http://jQuery.comjQuery作为一个单独存在的js文件，并不会与其他的js文
一、Jquery入门（超详）
weixin_44009656的博客
05-02 4804
本文将带领大家了解 jQuery 的定义，它有什么作用，我们为什么要学它，以及如何使用它，它的语法是什么，最后对比了 jQuery 对象和 DOM 对象的区别。
jQuery基本介绍
m0_55836496的博客
09-15 2332
jQuery是一个快速的、轻量的、功能丰富的js库。 jQuery的官网 [http://jquery.com/](http://jquery.com/) jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。 js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js+）。 jquey和js的关系 1 就jq底层是计算，就是把js进行了封装。 2 jq能够很方便获取节点，发送ajax。
jQuery简介-01
qq_55624813的博客
11-19 7866
目录 异步请求局部刷新 架构 技术栈 执行过程 jQuery简介 什么是jQuery jQuery的语法 jQuery的优势 jQuery的使用 文档就绪事件 测试 总结 异步请求局部刷新 架构 主流方式： 技术栈 JavaScript 形成交互 jQuery 封装JavaScript，代码更加简洁高效 ajax 异步请求 json 数据传输 Web中间件(tomcat) 处理请求和响应 mysql数据库 存取数据 执行过程 用户页面中触发a
jQuery使用（超详细）
Eliauk_Doubling的博客
08-12 2万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
JQuery简介 - 什么是jQuery
柯晓楠
01-15 4万+
概念 官方概念： jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。 个人理解： jQuery是JavaScript的一个工具库，工具库就是指封装好的JavaScript函数，可以直接在程序中进行调用，那jQuery就是一款非常流行的JavaScript库。jQ...
jQuery
05-31
jQuery 是一个流行的 JavaScript 库，它可以简化 JavaScript 编写的复杂度。它是免费、开源的，可以跨浏览器使用，支持主流的浏览器。 jQuery 提供了很多的 API 和方法，可以用于 DOM 操作、事件处理、AJAX、动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值