[JQuery] JQuery快速上手

news/2024/7/11 1:19:17 标签: jquery

JQuery

概述

JQ是JS写的插件库，说白了，就是一个封装了很多方法的js文件，凡是用jq能实现的，js都能实现，js能实现的，jq却不一定能实现，JQuery可以帮助程序员，写更少的代码，实现更多的功能

引入方法

由于JQuery是一个插件库，所以需要手动去相关网站上去获取链接，或者时下载源码到本地，以下三种途径均可以获取:

https://www.bootcdn.cn/ 前端开源项目共享平台
https://api.jquery.com JQuery的官网
https://jquery.cuishifeng.cn JQuery的中文官网，不过有可能不会及时更新

引入方式如下,src中的link是在线获取的JQ库

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script></script>

jq的API只对自己开放 jq不能用js的API js也不能用jq的API

jQuery API 3.3.1 速查表：http://jquery.cuishifeng.cn

基本使用

修改内容

html()

修改标签内的所有内容，可以识别html代码

<p>这是一段测试文字</p>
<script src="jquery.js"></script>
<script>	
    $("p").html("This is test text")	//修改p标签中的显示文字//:This is test text
    $("p").html("<h3>测试文字</h3>")	//添加一段html源码//:测试文字
</script>

text()

只能修改标签内的内容，不会识别html代码

<p>这是一段测试文字</p>
<script src="jquery.js"></script>
<script>	
    $("p").html("This is test text")	//修改p标签中的显示文字//:This is test text
    $("p").html("<h3>测试文字</h3>")	//添加一段html源码//:<h3>测试文字</h3>
</script>

val()

<input type="button" value="click">
<script src="jquery.js"></script>
<script>	
    $("input").val("OK");   //修改标签的value
</script>

eq()

获取指定的元素

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script src="jquery.js"></script>
<script>	
    var $oLi = $("ul li");
    $oLi.eq(1).text("haha");	//修改下标为1的元素内容
</script>

JQ与JS之间转换

JS转JQ

关键字： $()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var test = document.querySelector(".test");	//定义js对象
    // test.innerHTML = "abc";	//js常规修改用法
    $(test).html("def");	//js对象转jq
</script>

JQ转JS

关键字：$obj[]和$obj.get()

<div class="test">这是一段测试文字</div>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test")，	//定义jq对象
    	$oLi = $("ul li");
    $oTest[0].innerText = "111111"; //jq对象转js
    $oLi.get(1).innerHTML = "222222";   //指定一个jq对象转js
</script>

鼠标操作

点击 click()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    $oTest.click(function () {	//鼠标点击时触发函数内的事件
        alert("click!");	//弹窗:click!
    });
</script>

悬停 hover()

检测鼠标的移入和移出，hover方法内可以传入两个事件，分别对应移入和移出事件，如果之传入一个事件，则不论移入还是移除都会触发该事件

<div class="test" style="height: 200px;width: 200px;background: red">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    //hover事件
    $oTest.hover(function () {
        console.log("鼠标移入");	//第一个事件，当鼠标移入时执行
    },function () {
        console.log("鼠标移出");	//第二个事件，当鼠标移出时执行
    });
</script>

增加内容

尾部增加 append() & 头部增加 prepend()

可以识别html标签

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    $oTest.append("append!");   //:这是一段测试文字append!
    $oTest.append("<p>append!</p>");   //:append!
    $oTest.prepend("prepend!");    //:prepend!这是一段测试文字
	$oTest.prepend("<p>prepend!</p>");    //:prepend!
</script>

上一行增加 before() & 下一行增加 after()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    $oTest.before("before!");   //在上一行增加:before!
    $oTest.before("<d>before!</d>");   //即使是行内的标签也会在上一行增加:before!
    $oTest.after("after!");     //在下一行增加:after!
    $oTest.after("<span>after!</span>");     //即使是行内的标签也会在下一行增加:after!
</script>

删除内容

删除子标签 empty()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    $oTest.empty(); //：删除了所有的内容，但是标签还在
</script>

删除自身 remove()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    $oTest.remove(); // 不传参，默认删除全部标签
</script>

操作属性

设置/获取 attr() & 移除 removeAttr()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    alert($oTest.attr("class"));		// 获取属性值:"test"
    $oTest.attr("class","qq");	// 设置属性及值:class="qq"
    $oTest.removeAttr("class");	// 移除属性
</script>

添加 addClass() & 移除 removeClass()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    $oTest.addClass("qq");  //增加一个class名qq
	$oTest.removeClass("qq");   //删除名为qq的class
</script>

有就删没有则加 toggleClass()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
    $oTest.toggleClass("qq");   //没有class=qq,增加一个
    $oTest.toggleClass("qq");   //有class=qq,删除
</script>

索引

each()

以每一个匹配的元素作为上下文来执行一个函数。

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $("ul li").each(function (i) {//第一个参数默认是序号/下标/索引
            // this.innerHTML = "我是第"+i+"个";
            $(this).html("我是第"+i+"个");
        });
    </script>

索引 index()

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="jquery.js"></script>
    <script>
        $("ul li").click(function () {
            alert($(this).index());		//弹窗当前元素的索引
        });
    </script>

滚动条事件

scroll：http://jquery.cuishifeng.cn/scroll.html 当用户滚动指定的元素时，会发生 scroll 事件。

scrollTop：http://jquery.cuishifeng.cn/scrollTop.html 获取匹配元素相对滚动条顶部的偏移。

scrollLeft：http://jquery.cuishifeng.cn/scrollLeft.html 获取匹配元素相对滚动条左侧的偏移。

	<div class="test2" style="height: 800px; width: 1800px;">test</div>
	<script src="jquery.js"></script>
    <script>
    	$(window).scroll(function () {	//在检测到滚动事件是执行函数
        	console.log($(document).scrollTop());	//显示距离顶部的距离
        	console.log($(document).scrollLeft());	//显示距离左边的距离
    	});
    </script>

查找

找class hasClass()

<div class="test">这是一段测试文字</div>
<script src="jquery.js"></script>
<script>
    var $oTest = $(".test");
//hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true。否则返回false
    alert($oTest.hasClass("test"));    //返回布尔值:true
	alert($oTest.hasClass("abc"));    //返回布尔值:false
</script>

子/父/同辈标签查找

<body>
    <div id="box" class="show">
        <p class="box4">1</p>
        <p class="box2">2</p>
        <div class="wrap">
            <p>3</p>
            <p class="box4">4</p>
            <span class="box4">5</span>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        /*
       children 找儿子 可以不传参数
       find  不传参，默认不找  传参的话就找符合参数的后代
       parent 不需要参数  只找父级
       parents 会找所有的上代  直到html
       parents(".show")找到名字叫做show的祖先
       siblings 不传参找所有兄弟， 传参找所有符合条件的兄弟
        */
        console.log($("#box").children());//只找id=box的儿子标签
        console.log($("#box").find("p"));//找满足条件的后代

        console.log($(".box4").parent());//找id=box的父标签：div.wrap
        console.log($(".box4").parents());//找所有前辈标签：div.wrap, div#box.show, body, html
        console.log($(".box4").parents(".show"));//找前辈标签一直找到class=show的标签:div#box.show

        // $("p").siblings().css("color","red");//找所有同辈标签中符合color=red的标签
        $("p").siblings(".box4").css("color","red");//找class=box4的同辈标签中符合color=red的标签

    </script>
</body>

样式

距离 position() & offset()

position()代表到定位父级的 top/left的值；offset()代表到浏览器窗口的 top/left的值

<div class="box" style="
    height: 400px;
    width: 400px;
    border: 2px solid skyblue;
    position: relative;
    margin: 150px auto">
    <div class="lbox" style="
    height: 100px;
    width: 100px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
"></div>
</div>
<script src="jquery.js"></script>
<script>
    var $lBox = $(".box .lbox");
    alert($lBox.position().left);		//弹窗显示当前标签距离父类标签左边的距离：200
    alert($lBox.position().top);		//弹窗显示当前标签距离父类标签顶端的距离：200
    alert($lBox.offset().left);	//弹窗显示当前标签距离浏览器窗口左边的距离
    alert($lBox.offset().top);	//弹窗显示当前标签距离浏览器窗口顶端的距离
</script>

大小 width() & height()

<div class="box" style="
    height: 400px;
    width: 400px;
    border: 2px solid skyblue;
    position: relative;
    margin: 150px auto">
    <div class="lbox" style="
    height: 100px;
    width: 100px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 50px;
    margin: -50px -50px"></div>
</div>
<script src="jquery.js"></script>
<script>
    var $lBox = $(".box .lbox");
    alert($lBox.width());		// width: 100
    alert($lBox.innerWidth());	// width+padding: 200
    alert($lBox.outerWidth());	// width+padding+border: 204
    alert($lBox.height());		// height: 100
    alert($lBox.innerHeight());	// height+padding: 200
    alert($lBox.outerHeight());	// height+padding+border: 204
</script>

操作样式

除了查询还可以修改样式

    $lBox.width("300px");
    alert($lBox.width());// width: 300

一次性设置修改多个样式

$lBox.css({
            "width": "50px",
            "height": "50px"
        });

on() & off() 方法

on()

// on绑定单个事件
        $("ul li").on("click",function () {
            alert($(this).index());		//index()在jq里面是方法 对应的是你的下标
        });

//on绑定多个事件
        $("ul").on({
            "click": function () {
                console.log("click");
            },
            "mouseenter": function () {
                console.log("mouseenter");
            },
            "mouseleave": function () {
                console.log("mouseleave");
            }
        });

off()

        $("ul").off();		//不传参 移除所有的事件
        $("ul").off("mouseleave");		//移除满足条件的参数

动画

基本效果

改变宽、高、透明度

显示 show() & 隐藏 hide()

不传参 瞬间显示隐藏 传一个数字参数，代表毫秒，改变宽、高、透明度

<div class="lbox" style="
    height: 100px;
    width: 100px;
    border: 2px solid red"></div>
<script src="jquery.js"></script>
<script>
    var $lBox = $(".box .lbox"),
        off = 0;
    $(document).click(function () {	//事件：当点击页面时触发下列动作
        if (off){	//在lBox隐藏时执行
            $lBox.show(2000);	//在两秒内显示
        }else {		//在lBox显示时执行
            $lBox.hide(2000);	//在两秒内隐藏
        }
        off = !off;	//执行完show/hide后将其取反，以便重复执行
    })
toggle()

还有一个方法可以不用那么麻烦也能重复执行show/hide，就是使用toggle

    $(document).click(function () {
        $lBox.toggle(2000);		//有则show，无则hide
    })

改变高度

slideUp() & slideDown()

默认时间300毫秒 改变高度

<div class="lbox" style="
    height: 100px;
    width: 100px;
    border: 2px solid red"></div>
<script src="jquery.js"></script>
<script>
    var $lBox = $(".box .lbox"),
        off = 0;
    $(document).click(function () {	//事件：当点击页面时触发下列动作
        if (off){	
            $lBox.slideDown(2000);	//在两秒内展开
        }else {		
            $lBox.slideUp(2000);	//在两秒内折叠
        }
        off = !off;	//执行完slideUp/slideDown后将其取反，以便重复执行
    })
slideToggle(）
    $(document).click(function () {
        $lBox.slideToggle(2000);		//有则slideUp，无则slideDown
    })

改变透明度

默认时间300毫秒 改变透明度，fadeIn() / fadeOut() , 使用方法参考上面的改变高度

fadeTo(1000,0.1) 可以把透明度设置一个值，时间参数不能省略

小结

以上三组，不仅仅可以接受一个数字参数，能接受的参数有：

  • number / string 代表动画时间（可缺省） 毫秒数 / （“fast” “normal” “slow”）
  • string 代表运动曲线（可缺省）
  • function 代表回调函数（可缺省）

更多方法请参阅：http://jquery.cuishifeng.cn/index.html


http://www.niftyadmin.cn/n/1487965.html

相关文章

[django项目] 静态页面抽取模板

[django项目] 静态页面抽取模板

静态页面抽取模板 一、分析静态页面 1.静态vs动态 条目静态页面动态页面网站内容固定不变随访问时间&#xff0c;对象等不断变化访问速度更快&#xff0c;不需要脚本计算及读取后台数据库更慢改变内容不方便&#xff0c;需要修改页面文件然后上传简单&#xff0c;更新数据库…
阅读更多...
[爬虫] B站番剧信息爬取

[爬虫] B站番剧信息爬取

申明&#xff1a;本文对爬取的数据仅做学习使用&#xff0c;不涉及任何商业活动&#xff0c;侵删 简述 本次爬取目标是&#xff1a; 番剧的基本信息(名字, 类型, 集数, 连载or完结, 链接等)番剧的参数信息(播放量, 点赞, 投币, 追番人数等)时间信息(开播时间, 完结时间) 前提条…
阅读更多...
[django项目] 用户注册功能 之 用户模型与图片验证码

[django项目] 用户注册功能 之 用户模型与图片验证码

用户注册功能 之前我们完成了模板的抽取和配置, 前端的目标基本完成, 接下来开始对功能的设计与编写 由浅入深, 先从最基础的用户注册功能来设计 I. 用户模型设计 django的强大之处在于开发效率高&#xff0c;内置了权限模块之类的很多常用功能。在开始一个新的django项目时…
阅读更多...
[django项目] 用户注册功能 之 用户名与手机号校验

[django项目] 用户注册功能 之 用户名与手机号校验

前言 书接上文, 完成了图片验证码之后, 接下来就是对用户名密码和手机号的校验 相比较而言密码的校验围绕前端代码, 不涉及后台校验, 因此本文密码校验篇幅较少,为的是着重讲解的是用户名和手机号的校验. V. 用户名校验 判断用户名是否被注册, 提示验证信息到页面 1>接口…
阅读更多...
[django项目] 用户注册功能 之 发送短信验证码

[django项目] 用户注册功能 之 发送短信验证码

VIII. 获取短信验证码功能 短信验证码功能相比较用户名和手机号验证来说比较难, 我们来具体的分析一下流程 1>业务流程分析 校验手机号码, 前端校验完后端也要校验, 目的是进一步防止爬虫校验图片验证码设置发送延迟, 检查是否在60s内发送记录生成短信验证码发送短信保存…
阅读更多...
[django项目] 用户注册功能 之 注册用户到数据库

[django项目] 用户注册功能 之 注册用户到数据库

VIIII. 注册功能 谋定而后动, 先做分析在写代码 1>业务流程分析 对参数进行校验 判断用户名是否为空&#xff0c;是否已注册判断密码是否为空, 是否一致&#xff0c;格式是否正确判断手机号码是否为空&#xff0c;格式是否正确判断短信验证码是否为空&#xff0c;格式是否…
阅读更多...
[django项目] 实现用户登录登出功能

[django项目] 实现用户登录登出功能

用户登录登出功能 I. 功能需求分析 1>功能分析 1.1>流程图 1.2>功能接口 登录页面登录功能退出功能 II. 登陆页面 1>接口设计 1.1>接口说明 类目说明请求方法GETurl定义/users/login/参数格式无参数 1.2>返回结果 登陆页面 2.后端代码 user/views.…
阅读更多...
[django项目] 用户注册登录模块复盘+总结

[django项目] 用户注册登录模块复盘+总结

用户注册登录模块复盘总结 前言 之前我们分别完成了注册模块与登录模块, 距离整个博客网站的搭建又近了一步 接下来对这两个模块做一下总结, 一是回顾之前的知识点, 二是整理自己的代码思路 小编自己首先想到两个问题:为什么不对每个模块做总结? 为什么不在项目的最后总结…
阅读更多...
最新文章

Copyright @ 2022~2023