WEB--jQuery基础

最新推荐文章于 2023-11-27 17:13:48 发布

zyanwei2018

最新推荐文章于 2023-11-27 17:13:48 发布

阅读量270

点赞数

分类专栏： Web 文章标签： jquery js

本文链接：https://blog.csdn.net/qq_25672165/article/details/112552694

版权

Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

简介和使用

简介

jQuery: 目前最广泛使用的一个js库，极大的简化了js编程
官方文档：https://jquery.com/
在线手册：https://www.runoob.com/manual/jquery/

引用：下载到本地

下载地址：https://code.jquery.com/，点击对应版本的压缩文件(minified)并将弹框代码中的url粘贴到网页打开，在网页保存后放在js目录位置即可被引用

<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>

引用：网络引用

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
</script>

jQuery选择器

基本选择器

// id选择器
$("#a")
// 类选择器
$(".box1")
// 属性选择器
$("div[name=test]")
// 层级选择器
$("body div")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            // id选择器
            $("#a").css({background:'blue', height: '200px'})
            // 类选择器
            $(".box1").css({background:'blue', height: '400px', fontSize: '50px'})
            // 属性选择器
            $("div[name=test]").css({background:'blue', height: '800px', fontSize: '50px'})
            // 层级选择器
            $("body div").css({background:'blue', width: '800px', fontSize: '50px'})          
        }
    </script>

</head>
<body>
    <div id="a" class="box1" name="test", style="width: 100%; height: 100px; background-color:red;">jquery-1</div> 
</body>
</html>

选择同胞和父辈元素

// 选择div元素前紧挨的同辈元素
$("div").prev();
// 选择div元素之前所有的同辈元素
$("div").prevAll();

// 选择div元素后面紧挨的同辈元素
$("div").next();
// 选择div元素后面所有的同辈元素
$("div").nextAll();

选择过滤

// 选择div元素后代中所有的p标签
$("div").has('p');
// 选择div元素后代中class不等于p的元素
$("div").not('.p');
// 选择div元素后代中class等于p的元素
$("div").filter('.p');
// 选择第3个div
$("div").eq(2);
// 选择div的所有同辈节点
$("div")..siblings();

获取元素的索引

index()方法获取元素的索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
         $(document).ready(function(){
         	alert($('li').index(document.getElementById('baz')));  // 2, 传递一个DOM对象
            alert($('li').index($('#baz'))); // 2, 传递一个jQuery对象
            alert($('li').index($('li:gt(0)'))); // 1, 传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置  
            alert($('#baz').index('li')); // 2, 传递一个选择器，返回#baz在所有li中的索引位置 
            alert($('#baz').index()); // 2, 不传递参数，返回这个元素在同辈中的索引位置

}); 
    </script>
</head>
<body>
    <ul id="u">   
        <li id="foo">foo</li>   
        <li id="bar">bar</li>   
        <li id="baz">baz</li>   
    </ul> 
</body>
</html>

等待元素加载完成

<script type="text/javascript">

    // js中window.onload
    window.onload = function(){

    };

    // jQuery中等待页面加载完成
    $(document).ready(function(){

    });
</script>

jQuery操作样式

获取元素样式

$('#box').css('width')
$('#box').css('color')

修改元素样式

$('#box').css('width', '100%');
$('#box').css('height', '300px');
$('#box').css({'width': '100px', 'background': 'red'});

添加或移除元素样式

// 添加hide属性
$('#box').addClass('hide');  // 添加hide属性
$('#box').removeClass('box1');  // 移除box1属性
$('#box').toggleClass('box5');  // 重复切换样式

jQuery事件

click()： // 鼠标点击
change()： // 元素改变
mouseover()： // 鼠标进入子元素触发
mouseout() ： // 鼠标离开子元素触发
mouseenter()： // 鼠标进入子元素不触发
mouseleave()： // 鼠标离开子元素不触发
hover()： // 同时为mouseenter()和mouseleave()指定处理事件
ready() ： // 等待DOM加载完成
resize()： // 浏览器窗口大小改变触发
scroll()： // 滚动条位置发生改变触发
submit()： // 提交表单触发

绑定click事件

<script type="text/javascript">
        $(document).ready(function(){
        $('.box').click(function(){
            $(this).removeClass('m')
            $(this).addClass('n')
        })
}); 
</script>

jQuery操作属性

// 设置或返回被选元素的属性值
$('.box').attr('class')     // 设置或返回被选元素的属性值
$('.box').removeAttr('id')   // 删除属性

<script type="text/javascript">
        $(document).ready(function(){
        var res = $('.box').attr('class') // 设置被选元素class属性对应的属性值
        
        $('.box').attr({ name: "box", id: "box1" }) // 返回被选元素的属性和属性值

        $('.box').removeAttr('id') // 删除属性名为id的属性


}); 
</script>

jQuery操作元素

获取文本内容

.text(): 设置或返回所选元素的文本内容
.html(): 设置或返回所选元素的内容（包括html标签)
.val(): 设置或返回表单字段的值

<div class="box m" name='qwe'>
    <span>测试</span>
    <input value="pwd">
</div>

<script type="text/javascript">
        $(document).ready(function(){
        var res = $('.box').text()  // 测试
        var res = $('.box').html() // <span>测试</span>
        var res = $('input').val() // pwd
        console.log(res)



}); 
</script>

<!---判断字段长度并弹出提示-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/demo.css">
    <script type="text/javascript">
         $(document).ready(function(){
            $('#btn').click(function(){
                var name = $('#username').val();
                console.log(name);
                if (name.length < 8 || name.length > 12) {
                    alert('长度仅支持6-12位！')
                }
            })
    }); 
    </script>
</head>
<body>
    <div class="box1 m">
        <input type='text' id='username' class="input1 n" value="">
        <input type='button'  id='btn'class="button1 n" value="">
    </div>
</body>

添加新的HTML内容

.after(): 在被选元素之后插入内容
.before(): 在被选元素之前插入内容
.append(): 在被选元素内部末尾插入内容
.prepend(): 在在被选元素内部开头插入内容

// 添加砸input标签的外部之后和之前
var input1 = $('.input1')
input1.after('<span>添加在标签外部之后</span>')
input1.before('<span>添加在标签外部开头</span>')

// 添加砸div标签的内部的开头和结尾
var box2 = $('.box2')
box2.append('<span>添加在标签内部末尾</span>')
box2.prepend('<span>添加在标签内部开头</span>')

删除元素/内容

.remove(): 删除被选元素及其子元素
.empty(): 置空被选元素

// 递归删除box1标签
var box1 = $('.box1')
box1.remove()

// 删除box1标签内部元素
var box2 = $('.box2')
box2.empty()

jQuery效果函数

.hide(): 隐藏被选元素
.show(): 显示被选元素
.stop(): 停止在被选元素上运行动画
.toggle(): 对被选元素进行显示和隐藏的切换

zyanwei2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB--jQuery基础

文章目录简介和使用jQuery选择器简介和使用简介jQuery: 目前最广泛使用的一个js库，极大的简化了js编程官方文档：https://jquery.com/在线手册：https://www.runoob.com/manual/jquery/下载到本地下载地址：https://code.jquery.com/，点击对应版本的压缩文件(minified)并将弹框代码中的url粘贴到网页打开，在网页保存后防砸js目录位置即可被引用<script type="text/jav
复制链接

扫一扫

专栏目录