前端之jQuery

最新推荐文章于 2023-06-08 14:10:08 发布

qq_52159647

最新推荐文章于 2023-06-08 14:10:08 发布

阅读量229

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_52159647/article/details/112972382

版权

jquery

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery简介

jQuery相当于是python的模块(在前端称为'类库'),内部封装了js的一些代码,能够帮助我们更简单的书写前端代码

Jquery的两种导入方式:
	1.直接将jQuery代码下载到本地,放入js代码中,直接导入
	2.基于直接引入jQuery的CDN服务(基于网络请求加载)
		免费的cnd网址:bootcdn
		 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

jQuery选择器相关

基本选择器

// 用法与css选择器基本一致
$(Jquery)
1.id选择器
	$('#d1')
	k.fn.init [div#d1]
$('#id')
2.class选择器
$('.class')
3.标签选择器
$('Tag')
5.所有选择器
$('*')
5.jQuery对象与非jQuery对象的相互转换 
1.) jQuery对象转化为普通对象
	$(...)[索引]
2.) 普通对象转化为jQuery对象
	$(标签)

组合选择器

1.后代选择器
	$('父标签 后代标签')
	ps:如果要拿到一个标签内部拥有的标签也可以用：
	$('父标签').find('后代标签')
2.儿子选择器
	$('父标签>子标签')
3.毗邻选择器
	$('标签1+标签2')
4.弟弟选择器
	$('哥哥标签~弟弟标签')

分组与嵌套

// 支持各种选择器之间相互使用
1.混用
	$('#d1,.c1,div')
2.限定
	$('div#d1') // 有id = 'd1'的div标签
	// k.fn.init [div#d1, prevObject: k.fn.init(1)]

基本筛选器

适用于一个标签查询结果下有多个标签：对子标签的精确查找
格式如下：
	$('单个标签(~+ >多种)多个标签:筛选器条件')
	或单个

	$(标签:方法)
	$('div:has('#p1')')
1.first
	$('ul li:list')
2.last
3.eq(索引取值)
	$('ul li:eq(2)')
4.even(拿偶数索引标签)
	$('ul li:even')
5.odd(拿单数索引对应的标签)
6.gt(大于索引,顾头不顾尾)
	$('ul li:gt(2)')
7.lt(小于索引)
8.not(条件) -->不在条件里的
9.has('') # 选取出包含一个或多个标签在内的标签  必须内部要有标签才可以,如果内部没有标签用不了
ps:以上方法都可以写成
	$().xxx()的形式:
		$().first()

属性选择器

1.属性名
$('[username]')
2.属性名+值
$(['username="able"'])
3.标签名+属性名+值
$('p[username="able"]')

表单筛选器

针对表单里面的元素可以不使用标签名+属性名+值的属性选择器样式：
直接使用：
	:属性值
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
:enabled
:disabled
:checked
:selected
ps:只有针对表单对象可以使用
checked与selected属性的区别
:checked 会拿到包括selected属性在内的所有标签
:selected指挥拿到selected属性的标签

筛选器方法

1.同级别的方法
向后：
	next() //下一个
	next() //标签下所有
	nextUntil('条件') //直到顾头不顾尾
向前：
	prev() //上一个
	prevAll() // 上方所有
	prevUntil() // 上方直到
2.父子兄弟方法
	1.parent() //获得标签的父标签
	$('.c1').parent()
	k.fn.init [ul, prevObject: k.fn.init(1)]
	2.parentsUntil()
	3.parents() // 获取祖宗十八代	
	$('.c1').parents()
	k.fn.init(3) [ul, body, html, prevObject: 
k.fn.init(1)]
	2.children() //获得儿子标签
	$('ul').children()
	k.fn.init(10) [li#l1, li, li, li, li, li, li, li.c1, li, li, prevObject: k.fn.init(1)]
	3.siblings() //获得兄弟标签,同级别上下所有
	$('.c1').siblings()
	k.fn.init(9) [li#l1, li, li, li, li, li, li, li, li, prevObject: k.fn.init(1)]

jQuery操作标签

操作类

1.js如何操作标签的类？
	标签.classlist.add()  //增加
	标签.classlist.remove ()//移除
	标签.classlist.contains() //判断是否有
	标签.classlist.toggle() //无则加 有则删除
2.jq如何操作标签的类？
$('..').addclass()
	$('#d1').addClass('c1')
	k.fn.init [div#d1.c2.c1]
$('..').removeclass()
	$('#d1').removeClass('c1')
	k.fn.init [div#d1.c2]
$('..').hasclass()
	$('#d1').hasClass('c1')
	true
$(..).toggleclass()
	$('#d1').toggleClass('c1')
	k.fn.init [div#d1.c2.c1]
	$('#d1').toggleClass('c1')
	k.fn.init [div#d1.c2]

操作css与链式操作

1.js如何操作css
标签名.style.各种具体的css样式
2.jq如何操作css
$('...').css('属性','属性值')

jq支持链式操作,每次执行完函数之后都会将执行前的对象返回,如同python中返回类对象一致
$('#d1').css('color','red').next().css('color','green')
class MathMethod:
    def a(self):
        print('代码1')
        return self

    def b(self):
        print('代码2')
        return self


math1 = MathMethod()
math1.a().b()

操作位置

1.offset() //相对于浏览器的位置
{top: 16, left: 8}
2.position() //相对于父标签的位置
{top: 0, left: 8}
3.scrollTop() //相对于浏览器顶部的位置
$('#p1').scrollTop()
0
ps:括号里加值就是设置,没有就是获取
ps:$(window) //当前窗口
4.scrollLeft() //现对于浏览器左部的位置
同上

操作尺寸

1.height() //文本的高度
	$('#p1').height()
	21.3333
2.width() //文本的宽度
	$('#p1').width()
	496.333
3.innerheight() //文本加padding的高度
4.innerwidth() //文本加padding的宽度
	$('#p1').innerWidth()
	504.333
5.outheight() //文本加padding加border的高度
6.outerwidth() //文本加padding加border的宽度
	$('#p1').outerWidth()
	510.333

操作文本

1.在js中操作文本的方式
	1.).innerText
	2.).innerHtml
2.在jq中操作文本的方式
	1.).text()
	"
        123123
    "
	2.).html()
	"
        <p id="p1">123123</p>
    "
ps:如果括号中没有值默认获取,有值默认修改

操作获取值

1.在js中获取值得方式
	1..value // 获取输入的文本信息
	2..files[0] // 获取输入的文件信息
2.在jq中获取值的方式
	1..val() // 获取输入的文本信息
	"12312312"
	2.获取文件的方式采用js获取的方式
	$('#i2')[0].files[0]
	File {name: "}V$_O3$6%UFZ)0}T_DQDJ76.png", lastModified: 1611040653496, lastModifiedDate: Tue Jan 19 2021 15:17:33 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 455, …}

操作属性

1.在js中操作属性的方法
	setAttribute('属性名','属性值')
	getAttribute() //拿到属性值
	removeAttribute() //移除属性值
2.在jq中操作属性的方法
	attr(name) //查看
	$('div').attr('id')
	"d1"
	attr(name,value) //增加
	$('div').attr('username','s')
	k.fn.init [div#d1, prevObject: k.fn.init(1)]
	removeattr(name) //移除
	$('div').removeattr('username')
3.对于操作radio,checkbox,select中的checked和selected属性
如果使用一般的attr会造成拿不到属性标签的现象
.prop('checked')..('selected')
$('#d4').prop('selected',true) 
k.fn.init [option#d4]
ps:如果后面有true or false 则代表着选中这个标签或则取消选中

文档处理

在js中如何进行文档操作
1.createElement('p....')
2.内部属性添加以及文本添加
3.插入标签操作
	标签名.appendchild..
	标签名.insertbofore..
	...
在jq种如何进行文档操作
1.$('标签') 
	let $pEle = $('<div>') //创建div操作
2.尾部追加
	$('标签对象').append($pEle)
	$pEle.appendto($('标签对象'))
3.头部插入
	$('标签对象').proappend($pEle)
	$pEle.proappendto($('标签对象'))
4.放在某个标签之后
	$('标签对象').after($pEle)
	$pEle.insertafter($('标签对象'))
5.放在某个标签之前
	$('标签对象').before($pEle)
	$pEle.insertbefore($('标签对象'))
6.移除标签及子标签和内容
	$('标签对象').remove()
7.清空标签里的内容
	$('标签对象').empty()

事件

事件绑定的两种方式

1.$('...').事件名(function(){})
2.$('...').on(事件名,function(){}) // 支持事件委

常见的事件方法

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

阻止后续事件

// 阻止后续事件是当代码体运行到了此代码停止该标签所自带的后续事件以及绑定的后续事件
1.return flase
     <script>
        $('#i1').click(function (){
            alert('hello!');
            return false
        })
2.e/e.preventDefault() 
     <input id='i1' type="submit">
    <script>
        $('#i1').click(function (e){
            alert('hello!');
            e.preventDefault()
        })

阻止事件冒泡

// 阻止标签向上传递
1. return false
	<script>
    $('#d1').click(function (){
        alert('hello');
         return false  // 不会触发2,3
    })
        $('#d3').click(function (){
        alert('hello')
    })
        $('#d2').click(function (){
        alert('hello');

    })
</script>
2. e/e.stopPropagation()
 	<script>
    $('#d1').click(function (e){
        alert('hello');
         e.stopPropagation() // 不会触发2,3
    })
        $('#d3').click(function (){
        alert('hello')
    })
        $('#d2').click(function (){
        alert('hello');

    })
</script>

事件委托

// 在一块标签区域内，将事件委托给一块标签
    $('body').on('click','button',function () {
    alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的,动态创建的也可以触发事件
    })

页面加载

1. js中等待页面加载完毕的方法
	window.onload = function(){}
2. 
2.1. jq中等待页面加载完毕的方法
	$(document).ready(function(){})
2.2. 直接书写在body底部
2.3.直接书写在jq内部
	$(function(){将所有js代码放入,以上相同})

动画效果

1.hide // 隐藏
2.show // 出现
3.slideUp // 消失
$('#i1').slideUp(3000)
4.slideDown // 出现
$('#i1').slideDown(3000)
5.fadeOut  // 淡出
$('#i1').fadeOut(3000)
6.fadeIn // 淡入
$('#i1').fadeIn(3000)
7.fadeTo // 淡出到指定的透明度
$('#i1').fadeTo(3000,0.2)

jQ补充

1.each()
对拿到的所有标签进行操作,本质是for循环,循环对数据进行操作
可以传入两个参数,index(索引)和obj(标签对象)
1.)给标签使用
	$('div').each(function(index,obj){console.log(index,obj)})
	VM172:1 0 <div>11</div>
	VM172:1 1 <div>22</div>
	VM172:1 2 <div>33</div>
	VM172:1 3 <div>44</div>
	VM172:1 4 <div>55</div>
	VM172:1 5 <div>66</div>
	VM172:1 6 <div>77</div>
	VM172:1 7 <div>88</div>
	VM172:1 8 <div>99</div>
	VM172:1 9 <div>00</div>
	w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
2.) 传入可迭代对象使用
$.each([111,222,333,444],function())	
	$.each([1,2,3,4,5,6],function(index,obj){console.log(index,obj)})
	VM371:1 0 1
	VM371:1 1 2
	VM371:1 2 3
	VM371:1 3 4
	VM371:1 4 5
	VM371:1 5 6
	(6) [1, 2, 3, 4, 5, 6]
2.data()
可以给标签添加肉眼看不到的属性用来临时存储数据
1.data('属性名') 查看是否有该隐藏属性
$('div').first()
w.fn.init [div, prevObject: w.fn.init(10)]
$('div').first().data('info')
"123123"
2.data('属性名','值') 
3.removeData('属性名') //删除该属性
$('div').first().removeData('info')
w.fn.init [div, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined

事件案例

克隆事件

知识点储备：
	1.this 在操作一个标签时,this指代的是操作的标签本身
	2.clone() 可以克隆标签,如果在标签括号中书写true,即代表该克隆体不仅克隆标签，而且克隆事件
	3.button按钮是一种特殊的行级标签,可以为其设置长宽

代码：
	<body>
    <button id="b1">点我克隆下一个</button>
    <script>
        $('#b1').click(function (
        ){
            $(this).clone(true).insertAfter($('#b1'))
        })
    </script>
</body>

自定义模态框

知识点储备：
	display:none // 隐藏标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hidden {
            display: none;
        }
        #d1 {
            height: 100px;
            width: 100px;
            color: gold;
            font-size: 24px;
            z-index: 100;
        }
        #d2 {
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.4);
            position: fixed;
            z-index: 999;

        }
        #d3 {
            width: 200px;
            height: 300px;
            background-color: white;
            z-index: 1000;
            position: fixed;
            left:50%;
            top:50%;
            margin-left: -100px;
            margin-top: -150px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
    <div id="d1" >
        <p>这里是最底层！</p>
        <p>我马上就被遮住了！</p>
        <button id="b1">点击注册</button>
    </div>
    <div id="d2" class="hidden">

    </div>
    <div id="d3" class="hidden">
        <p>username:<input type="text" name="" id=""></p>
        <p>password:<input type="text"></p>
        <p><button id="b2">关闭</button></p>
    </div>
    <script>

        $('#b1').click(function (
        )
            {
           $('#d2').removeClass('hidden')
           $('#d3').removeClass('hidden')
                }
            )
        $('#b2').on('click',function (){
            $('#d2').addClass('hidden')
            $('#d3').addClass('hidden')
        })
    </script>
</html>

左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        #d1 {
            width: 20%;
            height: 100%;
            position:fixed;
            background-color: #4e4e4e;
            font-size: 12px;
        }
        body {
            margin: 0;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div class="title">标题一
            <div class="item">123</div>
            <div class="item">1234</div>
            <div class="item">1235</div>
        </div>
        <div class="title">标题二
            <div class="item">123</div>
            <div class="item">1234</div>
            <div class="item">1235</div>
        </div >
        <div class="title">标题三
            <div class="item">123</div>
            <div class="item">1234</div>
            <div class="item">1235</div>
        </div>
    </div>
    <script>
        $('.title').click(function (){
            // $('.item').addClass('hidden')
            $(this).children().removeClass('hidden').parent().siblings().children().addClass('hidden')
        })
    </script>
</body>
</html>

回到顶部

    <div class="d1" id="d3"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <a id="d2" href="#d3" class="hidden">点我回到顶部</a>
    <script>
        $(window).scroll(function (){
            if($(window).scrollTop() > 500){
                $('#d2').removeClass('hidden')
            }else{$('#d2').addClass('hidden')}
        })
    </script>

自定义登陆校验

  # 方法一
   <p>username<input type="text" id="t1"><span id ='s1' class="redCheng "></span></p>
    <p>password<input type="password" id="p1"><span id='s2' class="redCheng "></span></p>
    <p><button id="b1">提交</button></p>
    <script>
        $('#b1').click(function (){
            var $t1Ele = $('#t1').val()
            var $p1Ele = $('#p1').val()
            if (!$t1Ele){
                $('#s1').text('输入账号不能为空')
            }
            if (!$p1Ele){
                $('#s2').text('输入密码不能为空')
            }
            $('input').focus(function (){
                $(this).next().text('')
            })
        })
    </script>
# 方法二

    <p>username<input type="text" id="t1"><span id ='s1' class="redCheng hidden">输入账号不能为空</span></p>
    <p>password<input type="password" id="p1"><span id='s2' class="redCheng hidden">输入密码不能为空</span></p>
    <p><button id="b1">提交</button></p>
    <script>
        $('#b1').click(function (){
            var $t1Ele = $('#t1').val()
            var $p1Ele = $('#p1').val()
            if (!$t1Ele){
                $('#s1').removeClass('hidden')
            }
            if (!$p1Ele){
                $('#s2').removeClass('hidden')
            }
            $('input').focus(function (){
                $(this).next().addClass('hidden')
            })
        })
    </script>

input实时监控

username:<input type="text">
<script>
    $('input').on('input',function (){
        console.log($(this).val())
    })

hover事件

鼠标悬浮+鼠标移除两个事件
    <script>
        $('p').hover(function (){
            console.log('我是你')
        },function (){
            console.log(('你是我'))
        })
    </script>

鼠标监测事件

    $(window).keydown(function (event){
        console.log(event.keyCode)
    })

qq_52159647

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端之jQuery

jQuery简介jQuery相当于是python的模块(在前端称为'类库'),内部封装了js的一些代码,能够帮助我们更简单的书写前端代码Jquery的两种导入方式: 1.直接将jQuery代码下载到本地,放入js代码中,直接导入 2.基于直接引入jQuery的CDN服务(基于网络请求加载) 免费的cnd网址:bootcdn <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">&l
复制链接

扫一扫