day 35 前端jquery

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量78 收藏
点赞数
分类专栏： 前端 文章标签： jquery javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_1617271856/article/details/120228100
版权

day 35 前端jquery

1.节点操作

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

B2C   business  consumer
C2C
B2B2C
-->
<div id="d1">

</div>

<script>
    // img标签
    // 1. 创建img标签
    // var img = document.createElement('img'); // <img>
    // var div = document.getElementById('d1')
    //
    // // 2. 设置属性, 点语法只能添加标签自带的属性
    // img.src = '1234.png';
    // img.alt = '1234.png';
    //
    // // 添加自定义属性需要用setAttribute
    // img.setAttribute('username', 'ly')
    // img.removeAttribute('username')
    // console.log(img.getAttribute('username'))
    //
    // // 3. 把img标签放到div里面
    // div.append(img)
    // console.log(img)

    // 创建a标签
    // 1. 创建标签
    var div = document.getElementById('d1');
    var a = document.createElement('a');

    // 2. 设置属性
    a.href = 'http://www.baidu.com';
    a.target = '_blank';

    // 3. 给a标签添加文本
    // 把所有的内容都当成文本了
    // a.innerText = '<span>点我哦</span>'; //

    // 也可以识别标签
    a.innerHTML = '<span>点我哦</span>'; //

    // 把a标签放到div中
    div.append(a);
    console.log(a)
</script>
</body>
</html>

2.获取值操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    用户名：<input type="text" id="d1" value="egon">
</p>
<p>
    密码：<input type="password" id="d2" value="123546">
</p>

<select name="" id="city">
    <option value="北京">北京</option>
    <option value="上海" selected>上海</option>
</select>

<textarea name="" id="textarea" cols="30" rows="10">
    textarea
</textarea>

<script>
    // 获取值操作
    var username = document.getElementById('d1').value;
    console.log(username)

    var password = document.getElementById('d2').value;
    console.log(password)

    var city = document.getElementById('city').value;
    console.log(city)

    var textarea = document.getElementById('textarea').value;
    console.log(textarea)

</script>

</body>
</html>

3.class的操作

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

<script>
    // 先找到标签
    var div = document.getElementById('d1')

    // 增加class
    // div.classList.add('c1')

    // 删除
    // div.classList.remove('c2')

    // contains, 判断是否有该class
    // console.log(div.classList.contains('c3'))

    // 有就删除，无则添加
    div.classList.toggle('c2')
    div.classList.toggle('c2')
    div.classList.toggle('c2')
</script>
</body>
</html>

4.指定CSS操作

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

</head>
<body>
<div id="d1" class="">div</div>

<script>
    var div = document.getElementsByTagName('div')[0]
    div.style.color = 'red'
    div.style.fontSize = '34px'
    // div.style.border = '3px solid red'
    div.style.borderLeft = '3px solid red'
</script>
</body>
</html>

5.事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var btn = document.getElementsByClassName('btn')[0];
            btn.onclick = function () {
                alert(123)
            }
        }

    </script>
</head>
<body>
<!--<button onclick="f1()">点我</button>-->
<button class="btn">点我</button>

<script>
    // 事件的两种绑定方式
    // function f1() {
    //     alert(123)
    // }

    // 第二种
    // var btn = document.getElementsByClassName('btn')[0];
    // btn.onclick = function () {
    //     alert(123)
    // }
</script>
</body>
</html>

6.开关灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }

        .bg_green {
            background: green;
        }

        .bg_red {
            background: red;
        }


    </style>
</head>
<body>
<div id="d1" class="bg_green bg_red"></div>
<button class="btn">点击</button>

<script>
    var btn = document.getElementsByClassName('btn')[0]
    var div = document.getElementById('d1')
    btn.onclick = function () {
        if (div.classList.contains('bg_red')) {
            div.classList.toggle('bg_red')
        }
        div.classList.toggle('bg_red')
    }
</script>
</body>
</html>

7.失去焦点和获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="d1" value="老板消费吗？">

<script>
    var inp = document.getElementById('d1')

    // 获取焦点事件
    inp.onfocus = function () {
        // inp.value = ''
        this.value = ''
        console.log(this)
    }

    // 失去焦点事件
    inp.onblur = function () {
        inp.value = '没钱，不去'
    }

    // xss攻击   <script>while (true) {alert(123)}<//script>
    // SQL注入
    // csrf
</script>
</body>
</html>

8.省市下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="pro">

</select>

<select name="" id="city">

</select>

<script>

    var pro = document.getElementById('pro')
    var city = document.getElementById('city')
    var data = {
        "河北省": ["廊坊", "邯郸"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
    };

    for (var key in data) {
        // key => 河北省,北京,山东
        // 创建省的option
        var option = document.createElement('option'); // <option ></option>

        // 设置属性
        option.value = key; //  // <option value='河北省'></option>

        option.innerText = key;// <option value='河北省'>河北省</option>

        // 把option放到select中， id=pro
        pro.append(option)
    }

    pro.onchange = function () {
        // 拿到当前的省
        var currentPro = this.value;
        var currentCityList = data[currentPro]; // ["朝阳区", "海淀区"]

        city.innerText = ''
        for (var i = 0; i < currentCityList.length; i++) {
            var option = document.createElement('option'); // <option ></option>

            // 设置属性
            option.value = currentCityList[i]; // ["朝阳区", "海淀区"]

            option.innerText = currentCityList[i];// <option value='河北省'>河北省</option>

            // 把option放到select中， id=pro
            city.append(option)
        }

    }


</script>
</body>
</html>

9.jq的引入方式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title><!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->    <script src="../../BaiduNetdiskDownload/代码%2035%20前端jQuery/jquery.min.js"></script></head><body></body></html>

10.jq的简单使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    <style>        #d1, .c2{        }        #d1 .c2 {        }    </style></head><body><div id="d1" class="c1">div    <span class="c2"></span></div><div class="c2"></div><script>    // js的写法    // var div = document.getElementById('d1'); // 标签对象    // console.log($(div))    // jq的写法    // jQuery === $    // var div = jQuery('#d1')    // var div = $('#d1')  // jq对象    // console.log(div[0])    // // class选择器    // var div = $('.c1')    // console.log(div)    // 标签选择器    // var div = $('div')    // console.log(div)    // console.log($("div#c1"))    // $('#d1, .c2')    // $('#d1 .c2')</script></body></html>

11.基本筛选器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul><script>    // .style.color = 'red'    // $("ul li").css('color', 'red')    // $("ul li:first").css('color', 'red')    // $("ul li:last").css('color', 'red')    // $("ul li:eq(2)").css('color', 'red')    // $("ul li:odd").css('color', 'red')    // $("ul li:even").css('color', 'red')    // $("ul li:lt(3)").css('color', 'red') //    $("ul li:gt(3)").css('color', 'red') //</script></body></html>

12.属性选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    <style>        [username] {        }        [username='ly'] {        }        div[username='ly'] {        }    </style></head><body><div username="egon">div</div><script>    $('[username]').css('')    $('[username="ly"]')    $('div[username="ly"]')</script></body></html>

13.表单选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><select id="s1">  <option value="beijing">北京市</option>  <option value="shanghai">上海市</option>  <option selected value="guangzhou">广州市</option>  <option value="shenzhen">深圳市</option></select><input type="checkbox" >1<input type="checkbox" checked> 2<input type="checkbox"> 3<input type="radio" name="gender1">1<input type="radio" name="gender2" checked> 2<input type="radio" name="gender" > 3<input type="radio" name="gender">1<input type="radio" name="gender"> 2<input type="radio" name="gender" checked> 3<script>    // console.log($(":selected"))  // 找到所有被选中的option    // console.log($("[type='checkbox']:checked"))  // 找到所有被选中的option    console.log($("[name='gender']:checked"))  // 找到所有被选中的option</script></body></html>

14.筛选器方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div id="d1">    <span class="c1"></span></div><div id="d2">    <span class="c1"></span></div><div id="d3"></div><div id="d4"></div><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul><script>    // console.log($("#d1").next())    // console.log($("#d1").nextAll())    // console.log($("#d4").prev()) // prev => previous    // document.getElementsByClassName('c1').parentElement.parentElement.parentElement.parentElement    // console.log($(".c1").parent().parent())    // console.log($("#d2").children())    //    // $('div span')    // $("div").find("span")    console.log($('ul li').eq(2))</script></body></html>

15.jq操作class

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div id="d1" class="c2"></div><script>    // js    // document.getElementById('d1').classList.add('c1')    // jq    $('#d1').addClass('c1')    // $('#d1').removeClass('c2')    // console.log($('#d1').hasClass('c2'))    console.log($("#d1").toggleClass('c2'))    console.log($("#d1").toggleClass('c2'))    console.log($("#d1").toggleClass('c2'))    console.log($("#d1").toggleClass('c2'))    console.log($("#d1").toggleClass('c2'))</script></body></html>

16.文本操作

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div class="c1"></div><input type="text" id="d1" value="123"><script>    // js    // document.getElementsByClassName('c1')[0].innerHTML = '宝贝'    // jq    // $('.c1').html('<h1>宝贝</h1>')    // $('.c1').text('宝贝')    // 获取值操作    // js    // document.getElementById('d1').value;    // jq    // console.log($('#d1').val()) // 获取值    // console.log($('#d1').val('456')) // 设置值</script></body></html>

17.属性操作

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script></head><body><div class="c1" >div    <span></span></div><span class="c1" >div</span><script>    // 属性操作    // js    // document.getElementsByClassName('c1')[0].setAttribute('username', 'ly')    // jq 设置属性    // console.log($('.c1').last())    $('.c1').last().attr('username', 'ly') // 链式操作    // 获取属性    console.log($('.c1').last().attr('username'))        $('.c1').last().removeAttr('username')    // $('span').parent().parent().parent().parent().parent()</script></body></html>

18.事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    <style>        .btn {            width: 100px;            height: 100px;            background: orange;        }    </style></head><body><button class="btn">    漂亮小姐姐，点击就送</button><script>    // 第一种    // $('.btn').click(function () {    //     alert(123)    // })    // 第二种    // $('.btn').on('click', function () {    //     alert(345)    // })    // 克隆事件    $('.btn').click(function () {        // 克隆事件        // console.log(this)        // $('body').append($(this).clone()) // 默认不克隆事件        // $('body').append($(this).clone(true)) // 克隆事件    })</script></body></html>

19.左侧菜单栏案例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    <style>        .left {            position: fixed;            width: 20%;            height: 100%;            background: darkgray;        }        .title {            text-align: center;            border: 1px solid green;        }        .hide {            display: none;        }    </style></head><body><div class="left">    <div class="menu">        <div class="title">菜单一            <div class="item">11111</div>            <div class="item">22222</div>            <div class="item">33333</div>            <div class="item">44444</div>        </div>        <div class="title"> 菜单二            <div class="item">11111</div>            <div class="item">22222</div>            <div class="item">33333</div>            <div class="item">44444</div>        </div>        <div class="title">菜单三            <div class="item">11111</div>            <div class="item">22222</div>            <div class="item">33333</div>            <div class="item">44444</div>        </div>    </div>    <script>        $('.title').click(function () {            $('.item').addClass('hide')            $(this).children().removeClass('hide')        })    </script></div></body></html>
迪迦张
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day35 JQuery的跨域+深浅拷贝
qq_63778549的博客
02-22 287
一、jQuery的跨域 二、深浅拷贝 三、jQuery的深浅拷贝 四、jQuery的事件绑定 五、jQuery的特殊事件类型 六、jQuery的事件删除 七、jQuery的节点操作 八、钩子函数
前端-jQuery开发：案例
qq_57210034的博客
05-21 281
前端-jQuery开发：案例 目录 1.图片的放大和缩小功能 2.自动更新-当地时间 3.反选 List item 4.商品图片局部放大（放大镜）效果 1.图片的放大和缩小功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片的放大和缩小功能</title> <style type="text/css">
Day 53 前端开发 jQuery
Tao.的博客
08-28 234
jS jQuery
Day 54 前端 jQuery
Tao.的博客
08-29 244
前端
前端学习Day27-jQuery
ITsheng_ge的博客
07-24 179
jQuery的应用
# day01 - jQuery
weixin_60651472的博客
05-08 202
> 学习目标： > 能够说出什么是 jQuery > 能够说出 jQuery 的优点 > 能够简单使用 jQuery > 能够说出 DOM 对象和 jQuery 对象的区别 > 能够写出常用的 jQuery 选择器 > 能够操作 jQuery 样式 > 能够写出常用的 jQuery 动画 ## 1.1. jQuery 介绍 ### 1.1.1 JavaScript 库 ​ JavaScript库：即 library，是一个封装好的特定的.
day31_JQuery
沐沐
03-14 195
jquery的学习,选择器,事件,dom操作
day76 jquery
weixin_45939821的博客
04-08 866
知识点:1 在HTML中引入jQuery2 jQuery中就绪函数3 jQuery中选择器4 使用jQuery获取表单元素的值 及标签中间的内容5 jQuery中获取标签属性6 jQuery设置和获取标签样式。
day01_jQuery
无
10-11 92
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基本使用 1.2.1 jQuery 的下载 1.2.2. 体验jQuery 1.2.3. jQuery的入口函数 1.2.4. jQuery中的顶级对象$ 1.2.5. jQuery 对象和 DOM 对象 1.2.6. jQuery 对象和 DOM 对象转换 1.3. jQuery 选择器 1.3.1. 基础选择
javaweb学习（day12-jQuery)
weixin_51580177的博客
04-23 1024
jquery就是简化了dom的操作，也确实很方便
Jquery day3.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
Jquery day2.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
06day_前端学习资料_
09-30
【前端学习资料】是针对...这些知识点构成了一个完整的前端学习路径，通过【06day】的学习资源，你可以逐步深入每个主题，从基础到高级，系统地提升自己的前端技能。记住，持续学习和实践是成为优秀前端开发者的关键。
Jquery day4.zip
12-21
欢迎来到我们的WEB前端学习视频！在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 151
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 77
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 171
【代码】前端javascript中的排序算法之插入排序。
day21_JQuery高级教案1
08-08
"Day 21 of the JQuery Advanced Teaching Plan focuses on several key learning objectives, including mastering shell programming, understanding various ways of jQuery event binding, completing a case ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值