JQ的基本应用

最新推荐文章于 2024-08-14 19:43:25 发布
最新推荐文章于 2024-08-14 19:43:25 发布
阅读量1.6k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43158056/article/details/90480438
版权

JQ的基本应用

JQ的导入方式

第一种方式

$(document).ready(function(){
		代码块
		})

第二种方式

$(function(){
	alert('第二种方法')
	})

注意:在js中只允许有一个入口函数
在这里插入图片描述

JQ的初步接触

JQ的选择器

在这里插入图片描述

绑定鼠标事件

在这里插入图片描述

设置隐藏和控制时间

在这里插入图片描述
在这里插入图片描述

JQ选择器详解

类选择器

在这里插入图片描述

id选择器

在这里插入图片描述

标签选择器

在这里插入图片描述

通过属性值查找

在这里插入图片描述

其他

在这里插入图片描述

JQ事件的格式问题

在这里插入图片描述

通过JQ控制类名

首先把div实体可视化

//实体可视化
<style>
        .new1{
            width: 500px;
            height: 200px;
            background: pink;
        }
        .new2{
            width: 100px;
            height: 100px;
            background: green;
        }
        .new3{
            width: 150px;
            height: 150px;
            background: blue;
        }
    </style>
<script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //1.去除ｉｄbox１的div标签的类名
            $('#box1').removeClass('new1')
            //2.追加对应的ｎｅｗ2的css样式
            $('#box1').addClass('new2')
            //$('#box1').addClass('new3')
            //3.移除所有的css样式
            $('#box1').removeClass('new2 new3')
			//4.取反,有则删除,无则添加
			$('#box1').toggleClass('new2')
        })
    </script>
    </head>
<body>
<div class="new1 new2" id='box1'></div>
</body>
</html>

关键词记忆

关键词解释
removeClass移除
addClass添加
toggleClass切换(取反)

this的用法及链式编程

this(排他思想):我有你不能有,我变化你不能变化
链式编程:拥有相同主语

<script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $('this').click(function () {
                //$('this').css({'background':'green'})
                //$('this').siblings().css({'background':''})
                 //ｔｈｉｓ的用法，排他思想及链式编程
                 $('this').css({'background':'green'}).siblings().css({'background':''})
            //
            })
        })
    </script>

下拉菜单

下拉菜单的四种方法(第三和第四种重点)

 <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //方法一
            //选中ｌｉ
            $('.box li').mouseover(function () {
                //选中子集
                $(this).children('ul').show()
                //当鼠标移动到大的标签之后，就展示子类标签
            })
            $('.box li').mouseout(function () {
                //当鼠标离开就隐藏
            $(this).children('ul').hide()
            })

            //方法二
        $('.box li').hover(function () {
            $(this).children('ul').show()
        },function () {
            $(this).children('ul').hide()
        }

        //方法三
        $('.box li').hover(
            function () {
                $(this).children('ul').toggle()
            }
        )
        //方法四：动画效果
        $('.box li').hover(
            function () {
                $(this).children('ul').stop().slideToggle()
            }
        )
        })

关键词记忆

关键词解释
hover()悬浮
children()子类
mouseover()鼠标悬停
mouseout()鼠标移开
hide()隐藏
show()显示
slideToggle()下拉显示,上拉隐藏
toggle()触发并切换

获取指定标签属性值并对其进行设置

 $('#a_href').click(function () {


                //１．获取到指定Ａ标签的href的值
                console.log('这是修改之前的获取', $('#a_name').attr('href'))
                //2.将指定a标签的属性值进行设置，链接淘宝
                $('#a_name').attr({href: 'taobao'})

                console.log('这是修改之后的获取', $('#a_name').attr('href'))
            })
        })

关键词记忆

关键词解释
console控制台输出
attr()属性

文本内容的获取

 //1.点击之后，把地址更改为卖家地址
     console.log($('li').html())
     html()不仅是获取文本，还有页面标签，也可以设置内容
     console.log(=====================================)
     console.log($('li').text())
     text()只获取文本内容，也可以设置内容
     console.log(=====================================)
     console.log($('li').val())
     val()仅获取表单字段的值，也可以设置内容

关键词记忆

关键词解释
html()
text()
val()

注意点:需要进行页面标签以及内容设置的时候,需要用HTML()

以上内容所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 600px;
            height: 50px;
            background: pink;
            margin: 300px auto;

        }
        .box li{
            width: 200px;
            height: 50px;
            text-align: center;
            float: left;
            line-height: 50px;
        }
        .box ul ul{
            display: none;
        }

    </style>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //方法一
            //选中ｌｉ
            $('.box li').mouseover(function () {
                //选中子集
                $(this).children('ul').show()
                //当鼠标移动到大的标签之后，就展示子类标签
            })
            $('.box li').mouseout(function () {
                //当鼠标离开就隐藏
                $(this).children('ul').hide()
            })

            /*     //方法二
        $('.box li').hover(function () {
            $(this).children('ul').show()
        },function () {
            $(this).children('ul').hide()
        }

        //方法三
        $('.box li').hover(
            function () {
                $(this).children('ul').toggle()
            }
        )
        //方法四：动画效果
        $('.box li').hover(
            function () {
                $(this).children('ul').stop().slideToggle()
            }
        )*/
            $('#a_href').click(function () {


                //１．获取到指定Ａ标签的href的值
                console.log('这是修改之前的获取', $('#a_name').attr('href'))
                //2.将指定a标签的属性值进行设置，链接淘宝
                $('#a_name').attr({href: 'taobao'})

                console.log('这是修改之后的获取', $('#a_name').attr('href'))
            })
        })



            //1.点击之后，把地址更改为卖家地址
            console.log($('li').html())
            html()不仅是获取文本，还有页面标签，也可以设置内容
            console.log(=====================================)
            console.log($('li').text())
            text()只获取文本内容，也可以设置内容
            console.log(=====================================)
            console.log($('li').val())
            val()仅获取表单字段的值，也可以设置内容

          })
        })


    </script>

</head>
<body>
<div id="a_href">点击</div>
    <div class="box">
        <ul>
            <li>

                <a href="www.baidu.com" id="a_name">地址</a>
                <ul class="box1">
                    <li><a href="#">北京</a></li>
                    <li><a href="#">上海</a></li>
                    <li><a href="#">天津</a></li>
                    <li><a href="#">南京</a></li>
                </ul>



            </li>

            <li>
                <a href="#">收藏夹</a>
                <ul class="box1">
                    <li><a href="#">店铺</a></li>
                    <li><a href="#">宝贝</a></li>><a href="#">南京</a></>
                </ul>



            </li>
            <li>
                <a href="#">千牛卖家</a>
                <ul class="box1">
                    <li><a href="#">ＬＶ</a></li>
                    <li><a href="#">ＧＸＧ</a></li>
                    <li><a href="#">ＨＭ</a></li>

                </ul>
            </li>
        </ul>
    </div>
</body>
</html>
闲鱼!!!
关注
JQuery的基本使用
pipizhen_的博客
08-13 1033
JQuery的基本使用： 使用JQuery完成页面定时弹出广告 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果 使用JQuery完成省市联动效果 使用JQuery完成下列列表左右选择 使用JQuery完成表单的校验(扩展) 定时器： setInterval clearInterval setTimeout clearTimeout 显示： img.style.display = “block” 隐藏： img.style.display = “none”
jQuery的应用
hongcaixia的博客
04-20 1706
jQuery的应用一、使用JQ完成首页的定时广告弹出1.需求分析在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】2.技术分析使用jQuery中的相关技术3.实现步骤 第一步：引入jQuery相关的文件 第二步：书写页面加载函数 第三步：在页面加载函数中，获取显示广告图片的元素。 第四步：设置定时操作(显示广告图片的函数
jq的使用(学习&&总结三)
最新发布
q2728137172的博客
08-14 892
(属性，值);用法同上数据缓存。
jq应用
qq_35401191的博客
07-14 264
属性 attr   从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说比较慢（可读可写）     $('div').attr('class')        读出div标签的class名)     $('div').attr('class=demo')        修改div标签的lacss名（可以设置多个属性名）     $('div').attr('data':'nu...
JQuery
喜欢藏风里
09-10 433
今日内容 JQuery 基础： 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 JQuery 基础： 概念： 一个JavaScript框架。简化JS开发 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Le...
JQ常见用法
笑释一切的博客
12-12 724
一、选择器 1、$('#table_info tr .disabled').not('.ban') 获得id为table_info下的所有tr标签，class包含disabled但不包含ban的标签。 2、$(&quot;.A.B&quot;) 选择class同时包含A和B的元素。 3、$(&quot;.A, .B&quot;) 选择包含A或者包含B的元素。 4、$(&quot;.A&quot;).filter(&quot;.B&quot;).
jq应用程序文件夹特效代码
03-20
【jq应用程序文件夹特效代码】是一个关于使用JavaScript库jQuery（jq）来实现应用程序文件夹样式的特效代码资源。虽然描述部分没有提供具体信息，但从标题和标签我们可以推测，这个压缩包可能包含了一些用于创建交互...
JQ8400-FN/JQ8400-FL语音芯片/模块、应用电路及程序
03-28
为了充分利用JQ8400系列的性能，开发者需要掌握单片机编程的基本技巧，如中断处理、内存管理、时间同步等，以实现高效且可靠的语音控制。 总结，JQ8400-FN和JQ8400-FL语音芯片以其卓越的性能和丰富的功能，为...
Homework20171123_jq综合应用1
08-08
在这个“Homework20171123_jq综合应用1”的任务中，我们需要实现一个功能丰富的表格，特别是关注数据行的全选/反选功能。下面将详细介绍这个功能的设计和实现步骤。 1. **全选功能**： - 在表格的表头添加一个复选...
jq 之 load应用@闪光网@源码
10-19
综上所述，“jq之load应用@闪光网@源码”涉及的核心知识点是jQuery的`load()`方法，它在Web开发中扮演着重要的角色，使得动态加载和更新页面内容变得更加便捷。通过理解`load()`的工作原理和用法，开发者可以更好地...
stm32+超声波测距+JQ8900语音报警+小喇叭放大声音
07-06
STM32是一款基于ARM Cortex-M内核的微控制器，由意法半导体（STMicroelectronics）生产...通过深入理解并实践这个项目，不仅可以掌握基本的硬件连接和软件编程技巧，还能了解到如何将多种技术整合到一个实用的应用中。
JQuery应用
waectr的博客
08-04 774
案例一：创建省市二级联动 1.首先要确定事件，所选的事件应该是change事件，并绑定 2.通过JQ的选择器获取这个对象 3.创建二维数组来存储对应省份所涉及的城市 4.通过一层遍历寻找对应的城市，再通过遍历得到该城市的所有节点 5.每次遍历出一个节点就要创建一个城市文本节点，创建一个option元素，并将这个文本节点添加到对应的元素节点中 6.每次在遍历出所有城市之前还要清除之前...
JQ用法
abma21132911的博客
08-08 235
jQuery简称jq，是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优 秀的js效果，jq可以帮你达到目的！下载地址：Starterkit （http://jquery.bassistance.de/jquery-starterkit.zip）jQuery Downloads （http://jqu...
jq应用总结（二）
echoerror的博客
10-20 417
（一）问题提出 这次说说进制转换问题 因为jq是弱语言类型，所以你会发现，他会自动转换进制，如当出现以0开头的数据时，它就会出现自动八进制转十进制 例：01111（八进制）   ->    585(十进制) 情景分析：我有这么一个函数 数据是数据库中取得的值01111 代码中呈现按道理来说是：getValue(01111); 但是事实是 getValue(585); 我们发现他直接将
jq使用心得
千寻的博客
11-25 434
use strict
关于jq及jquery的使用
小彩虹的博客
03-06 2507
关于jq jQuery也就是JavaScript和Query(查询),即是辅助JavaScript开发的库。 jQuery优势： 1).轻量级 2).强大的选择器 3).出色的DOM操作封装 4).可靠的事件处理机制 5).出色的浏览器兼容性 6).完善的Ajax支持 7).出色的浏览器兼容性等 8).jQuery理念：写的少，做的多 jquery的使用 因为jq库文件是...
jQuery 应用【转】
weixin_30945039的博客
01-04 84
原文：http://www.cnblogs.com/Eeyore/favorite/125798.html ASP jQuery AJAX无刷新评论 JQuery Tabs应用：添加、删除、新增Tab闪烁提醒 51+ Best of jQuery Tutorials and Examples 使用Jquery应用到Asp.net ajax中时3个误区应该避免 ...
jq的应用
kkddqq1121的博客
06-06 463
jq
常用jq的用法
beautifultian的博客
01-21 452
//1、 $('.test').removeClass().addClass('sub') //2、 $('.test').attr('src', 'http://www.baidu.com') //3、 $('.test').html($('.game-score').text()) //4、 $('.test').css({'marginTop':'1px'}) //5、 $(this).addClass('imgBorder').parents('.sysSubOne').siblings().fi.
JQ8400语音模块详细功能与应用指南
JQ8400-FL语音模块是一款功能强大的音频处理设备，由深圳佳强电子科技有限公司出品，其说明书V1.5提供了详细的技术参数和应用场景。该模块的主要特性包括： 1. **硬件解码与文件系统支持**：JQ8400支持MP3和WAV格式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值