day14-jQuery.md_jqmd-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41383195/article/details/125987028

内容回顾

# js语法
# ECMAscript
    # 变量
    # 基础数据类型 : number string boolean object array json
    # 运算符 : b=a++ b=++a 1=='1' 1===1
    # 流程控制
        # if(条件){
            # 条件满足之后的逻辑
        # }
        # else if(条件){
            # 条件满足之后的逻辑
        # }
        # else{
            # 上面条件都不满足之后的逻辑
        # }

        # for(var i=0;i<10;i++){
        # }
        # for(i in arry){
        # }

        # while(条件){
        # }
    # 定义函数
        # function 函数名(){
            # arguments
        # }
# Bom 浏览器对象模型
    # location.href
    # history.back()/history.forward()
    # history.go(-1)/history.go(1)
# Dom 文档对象模型
    # 创建标签 :document.createElement('标签的名字')
    # 查找标签 : 按照id 按照class 按照标签名查
    # 间接查找 : 父子兄弟
    # 操作节点 : 节点的增加 删除 替换
    # 值操作 : .innerText='要放在标签里的值'=  .innerHTML='<p>要放在标签里的整个标签内容</p>'
    # 属性操作
    # 类操作
    # 值操作
    # 样式操作

    # 事件 onclick事件
        # 找到一个标签的dom对象  :直接查找\间接查找
        # 给这个dom对象绑定一个事件
            # dom_obj.onclick = function(){
            # }

            # dom_obj.onclick = 函数名()
            # function 函数名(){
            # }
        # 给这个事件写一个动作函数
            # 动作就是函数内部的内容

今日内容

# jquery
# 高级的javascript 提供了js更加便利的使用方式

# bootstrap 别人写好的各种样式
# 引入一下,看看效果

jquery笔记

# jquery的导入
# jquery查找标签
    # jquery对标签的查找完全可以复用选择器规则
    # 通过jquery对象转换成dom对象 jq_obj[index]
# 选择器语法查找
    # 标签选择器
        # $('p')        标签选择器
        # $('.para1')   类选择器
        # $('#container')   id选择器
        # $('*')         通用选择器
        # $('p.para1')   交集选择器
        # $('div,p')   并集选择器
    # 层级选择器
        # $(div p) 后代选择器 : 找到子孙中符合条件的
        # $(div>p)子代选择器 : 找子代中符合条件的
        # $(div+p)毗邻选择器 : 找紧邻的下一个
        # $(div~p)弟弟选择器 : 找某一个标签下的所有xxx标签
    # 属性选择器
        # $('[属性名]')  $('[href]')
        # $('[属性名='属性值']')  $('[href='http://www.baidu.com']')
        # $('[属性名^='属性值']')  $('[href^='http')
        # $('[属性名$='属性值']')  $('[href$='com')
        # $('[属性名*='属性值']')  $('[href*='baidu')
        # $('[属性名!='属性值']')  $('[href!='baidu')

# 筛选器
    # $(选择器:筛选器)
    # 根据索引筛选
        # $('p:first')
        # $('p:last')
        # $('p:even')
        # $('p:odd')
        # $('p:eq(index)')
        # $('p:gt(index)')
        # $('p:lt(index)')
    # not 筛选不包含某选择器要求的xxx
        # $('p:not(.para3)')
    # has 通过子代找当前
        # $('li:has(a)')
    # 表单筛选器,根据type进行筛选
        # $('input:type类型:选中情况')
        # $('input:radio:checked')
        # $('input:text:disabled')
        # $('input:text')
        # $('input:password')
        # input中没有date筛选器
        # $(':selected')
        # $('option:selected')
# 标签的筛选方法
    # 兄弟 : siblings()
    # 弟弟 : next() nextAll() nextUntil()
    # 哥哥 : prev() preAll() prevUntil()

    # 祖辈 :parent() parents() parentsUntil()
    # 子  :children()

# 过滤方法
    # .first()
    # .last()
    # .eq(index)
    # .not('#disable')
    # .filter('.para1')
    # .find('a')
    # .has('a')

    
    
    # 操作标签的增 删 改 复制
    # 增
    # 父子关系
    #    append appendTo
        # jq.append(dom对象/jq对象/写好的标签字符串) 表示在jq对象中添加一个标签
        # jq对象.appendTo(父级标签选择器/标签字符串/jq对象/dom对象)
    #    prepend prependTo
        # 父jq对象.prepend(子元素)
        # 子jq对象.prependTo(父元素)
    # 兄弟关系
    #    after insertafter
        # 旧.after(新)
        # 新.insertafter(旧)
    #    before insertbefore
        # 旧.before(新)
        # 新.insertbefore(旧)
    # 删
        # remove 删除标签也删除事件
        # detach 删除标签但不删除事件
        # empty  清空标签内的子标签
    # 改
        # 旧的.replacewith(新)
        # 新的.replaceAll(旧)
    # 复制
        # clone()     单纯的克隆标签但不克隆事件
        # clone(true) 克隆标签包括标签所带事件
# 操作标签的文本
    # jq.text('要写的文本')
    # jq.html('要写的标签内容')
# 操作标签的属性
    # attr('class')     获取当前class的值
    # attr('class','value') 设置class的值
    # removeAttr('readonly') 删除readonly属性
    # prop('checked')   选中返回true 没选中返回false
# 操作标签的类
    # addclass('类名')    添加一个类
    # removeclass('类名') 删除一个类
    # toggleclass('类名') 有就删除 没有就添加
# 操作标签的值 - 针对表单标签
    # val()    如果不传参数表示获取value属性的值
    # val(值)  如果传参数,表示设置value属性的值
    # $(':checkbox').val([2])
    # 对于radio\checkbox\select标签,所有的修改选中的状况都需要把要选中的值放到数组中
# 操作标签的css样式
    # css('样式名')
    # css('样式名','样式值')
    # css({'样式名':'样式值'})
# jq绑定事件
'''
<body>
<button>点击</button>
</body>
<script>
    $('button').click(
        function () {
            alert('click')
        })
</script>
'''

# 添加 移除 按钮和事件绑定操作ul标签

jquery的导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
    <div id="container">
        <h1 class="para1">我是第一自然段</h1>
        <p class="para1">我是第一自然段</p>
        <form action="">
            <p>form p</p>
            <input type="text">
            <a href="https://www.baidu.com">baidu</a>
            <a href="http://www.bilibili.com" class="bl">bilibili</a>
            <a href="https://www.luffycity.com">luffy</a>
            <a href="http://www.jd.com">jingdong</a>
            <input type="checkbox" value="1">
        </form>
        <ul>
            <li class="city">北京</li>
            <li class="city"><a href="">上海</a></li>
            <li class="city">天津</li>
        </ul>
        <p class="para2">我是第二自然段</p>
        <p class="para3">我是第三自然段</p>
    </div>
    <p class="para4">我是第四自然段</p>
    <p class="para5">我是第五自然段</p>
    <p class="para6">我是第六自然段</p>
</body>
</html>

表单筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<form action="">
    <input type="text">
    <input type="password">
    <input type="checkbox">
    <input type="radio">
    <input type="submit" disabled>
    <input type="reset" disabled>
    <input type="button" disabled>
    <input type="date" disabled>
    <input type="file" disabled>
    <select name="" id="">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">河北</option>
    </select>
</form>
</body>
</html>

筛选方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div class="foo">
    <div class="son">
         <p class="para1">我是第一自然段</p>
        <p class="para2"><a>我是<span>第二自然段</span></a></p>
        <p class="para3">我是第三自然段</p>
    </div>
</div>
    <p class="para4">我是第四自然段</p>
    <p class="para5">我是第五自然段</p>
    <p class="para6">我是第六自然段</p>
    <p class="para7">我是第7自然段</p>
    <p class="para8">我是第8自然段</p>
    <p class="para9">我是第9自然段</p>
    <p class="para10">我是第10自然段</p>
</body>
</html>

query操作标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>
        .city{
            background-color: lightcyan;
        }
    </style>
</head>
<body>
<ul>
    <li class="city">北京</li>
    <li class="city">山东</li>
</ul>
<form action="">
    <input type="text" value="alexander" readonly="readonly" class="lst">
    <input type="text" value="alexander" readonly="readonly">
    <input type="checkbox" name="hobby" value="1">
    <input type="checkbox" name="hobby" value="2">
    <input type="checkbox" name="hobby" value="3">
    <input type="radio" name="sex" checked="checked"> 女
    <input type="radio" name="sex"> 男
</form>
<button>在之前插入</button>
<button>在之后插入</button>
</body>
<script>
    $('button:first').click(
        function () {
            var province = prompt('请输入省份:')
            var li = document.createElement('li')

            li.innerText = province
            $('ul').prepend(li)

        })
    $('button:last').click(
        function () {
            $('ul').append('<li>云南</li>')
        })
</script>
</html>

动画笔记

# $('div').stop()
# $('div').show(毫秒单位的数值)  从左上角到右下角逐渐显示
# $('div').hide(毫秒单位的数值)  从右下角到左上角逐渐消失
# $('div').toggle(毫秒单位的数值) 显示就消失 消失就显示

# 向下滑出,向上收起
# $('div').slideDown()
# $('div').slideUp()
# $('div').slideToggle()

# 淡入淡出
# $('div').FadeIn
# $('div').FadeOut
# $('div').FadeToggle

5 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: tomato;
            display: none;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
<button>显示</button>
<div></div>
</body>
<script>
    $('button').click(
        function () {
            $('div').stop()
            $('div').fadeIn(1000)
        }
    )
</script>
</html>

6 事件笔记

# jq对象.click(
#     function (){
#         出发了click事件的逻辑
# }
# )

# $('input').focus(function()
# {
# $('input').css('background-color', 'yellow')
# }) // 获取焦点
# $('input').blur(function()
# {
# $('input').css('background-color', 'white')
# }) // 失去焦点

# 事件冒泡
# 当某一个子元素出发了事件之后,这个事件会一直向上一层父元素冒泡
# 如果此时父元素也对这个事件绑定了方法,那么会一直向上触发父元素的事件
# 阻止事件冒泡的方法:
    # 在function中return false
    # 在function中接收event参数,并执行event.stopPropergation()

# 事件委托
    # 在一个元素还没有出现之前,就可以为它绑定一些事件
# $('div').on('click', 'button', function()
# {
#     alert('点击我了')
# })
# 其中div是一个已经存在的父级元素,button这里可以替换成任意的子元素选择器

# 肖峰

6 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div></div>
<input type="text">
<button>click</button>
<button>click</button>
</body>
<script>
    $(window).keyup(
        function (event) {
            if(event.keyCode===27){
                window.close()
            }
        }
    )
    // $('input').change()
    // $('div').mouseenter()
    // $('div').mouseleave()
    // $('div').mouseover()
    // $('div').mouseout()
    $('input').focus(function () {
        $('input').css('background-color','yellow')
        $('span').remove()
    })    //获取焦点
     $('input').blur(function () {
        $('input').css('background-color','white')
         if(!$('input').val()){
            $('input').after('<span style="color:red">不能为空</span>')
         }
    })    //失去焦点
    $('button:first').click(function () {
        alert(event.data.k)
    })
    // $('button:first').click({'k':'v'},function (event) {
    //     alert(event.data.k)
    // })
    // $('button:last').bind('click',{'k':'v'},function (event) {
    //     alert('点击我啦')
    //     console.log(event.data.k)
    // })

</script>
</html>

7 事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 400px;
            width: 400px;
            background-color: yellow;
        }
        div div{
            height: 200px;
            width: 200px;
            background-color: red;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
<div>
    <div id="outer">
        <div id="inner">

        </div>
    </div>
</div>

</body>
<script>
    $('#outer').click(
        function () {
            alert('click outer')
        }
    )
    $('#inner').click(
        function (event) {
            alert('click inner')
            event.stopPropagation()
            // return false
        }
    )
</script>
</html>

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div>
    <button>点击</button>
</div>
</body>
<script>
    $('div').on('click','button',function () {
        alert('点击我了')
    })
    // $('button').click(
    //     function () {
    //         alert('clicked')
    //     }
    // )


</script>
</html>

9 bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        #s1{
            color: #2e6da4;
        }
    </style>
</head>
<body>
<span class="glyphicon glyphicon-asterisk" id="s1"></span>
<span class="glyphicon glyphicon-heart" style="color: red"></span>
<div class="row">
    <form class="col-md-6 col-md-offset-3">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>


<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
  <div class="col-md-10 col-md-offset-1" style="background-color: yellow;">.col-md-4</div>

</div>

<blockquote>
  <p>吃饱了就不会饿</p>
  <footer>打油诗人<cite title="Source Title">松松</cite></footer>
</blockquote>

<table class="table table-hover">
    <thead>
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody>
        <tr class="warning">
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>

        </tr>
           <tr class="success">
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>

        </tr>
               <tr class="danger">
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>
            <td>内容</td>

        </tr>

    </tbody>
</table>
</body>
</html>

表单控件练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>

<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<table border="1">
   <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
   </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>抽烟、喝酒、烫头</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗头、不翻车、不要脸</td>
    </tr>
    </tbody>
</table>


<script>
    // 点击全选按钮 选中所有的checkbox
    // DOM绑定事件方法
    // $("#all")[0].onclick = function(){}
    // jQuery绑定事件方法
    $("#all").click(function () {
        $(":checkbox").prop('checked', true);
    });
    // 取消
    $("#cancel").on("click", function () {
         $(":checkbox").prop('checked', false);
    });
    // 反选
    $("#reverse").click(function () {
        // 1. 找到所有选中的checkbox取消选中
        // $("input:checked").prop('checked', false);
        // // 2. 找到没有选中的checkbox选中
        // $("input:not(:checked)").prop('checked', true);
        //你会发现上面这么写，不行，为什么呢？因为你做了第一步操作之后，再做第二步操作的时候，所有标签就已经全部取消选中了，所以第二步就把所有标签选中了

        // 方法1. for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中
        var $checkbox = $(":checkbox");
        for (var i=0;i<$checkbox.length;i++){
            // 获取原来的选中与否的状态
            var status = $($checkbox[i]).prop('checked');
            $($checkbox[i]).prop('checked', !status);
        }
        // 方法2. 先用变量把标签原来的状态保存下来
    //     var $unchecked =  $("input:not(:checked)");
    //     var $checked = $("input:checked");
    //
    //     $unchecked.prop('checked', true);
    //     $checked.prop('checked', false);
    })

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

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">

</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="1.jpg" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="2.jpg" alt="...">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>
</html>

自定义动画

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.js"></script>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定义动画
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("动画执行完毕！");
                    });
                });

            })
        })
    </script>

</head>
<body>
<button>自定义动画</button>
<div></div>
</body>
</html>