JQuery

1显示隐藏功能

但凡有两个函数完成的功能是相反的,比如一个显示一个隐藏,那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词,那么肯定会有第三个单词,而且都和toggle有关。

hide()隐藏内容

show() 显示

toggle() 一下显示一下隐藏

括号中如果有参数,填数字(单位是毫秒),那么会有动画效果,如果不填,没有动画效果。

对比js和jq:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        height: 200px;
        background: green;
        display: none;
    }
    </style>
    <!-- <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn')
            var oBox = document.getElementById('box');
            oBtn.onclick = function(){
                oBox.style.display = 'none'
            }
        }
    </script> -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // $(document).ready(function(){})
        $(function(){

            // 找到按钮,绑定单击  找到div 隐藏
            $('#btn').click(function(){

                // $('div').hide(500)
                // $('div').show(500)
                $('div').toggle(500)
            })
        })
    </script>
</head>
<body>
    <!-- 需求:按钮 div,按钮单击控制div隐藏 display:none  style -->
    <button id="btn">按钮</button>
    <div id="box"></div>
</body>
</html>

2.jq控制HTML内容

html():传参数表示修改内容,不传参数表示访问内容

html()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // html(): 传参数表示修改内容,不传参数表示访问内容
            // alert($('div').html())

            // $('div').html('jq')
            // $('div').html('<p>jq</p>');
            $('div').html('')
        })
    </script>
</head>
<body>
    <div>div</div>
</body>
</html>

3.控制HTML属性

控制标签属性 k = "v" src value link中的href

3.1prop()

prop()用法:分为单属性和多属性两种写法

多属性就是字典的语法{k:v,k:v}:只支持修改,不支持访问。

单属性分为访问和修改两种。

访问(传一个参数是控制的key)

修改(参数一是key,参数二是这个key对应的值)参数之间用逗号隔开

3.2val()

val()只用来修改访问value属性值,用法和html()完全相同

传参表示修改,不传参表示访问

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // prop() : 单属性  和  多属性 -- 字典{k:v,} -- 只支持修改

            // 单属性: 访问(传一个参数是控制的key)  和 修改: 参数1是key,参数2是这个key对应的值
            // alert($('img').prop('src'))
            // $('img').prop('src', 'img3.jpg')
            // $('img').prop({'src':'img3.jpg', 'alt':'赵四'})
            // alert($('input').prop('value'))
            // $('input').prop('value', 'aaa')

            // val() -- 只用来修改访问value属性值 -- 用法和html()完全相同
            // alert($('input').val())
            $('input').val('aaa')
        })
    </script>
</head>
<body>
    <img src="img2.jpg" alt="">
    <input type="text" value="请输入用户名">
</body>
</html>

4.jq控制css

css()----和prop()完全相同

rgb颜色:三个0为黑色

小驼峰fontSize和font-size都对

在字典中,如果是有字符和数字混合的形式,那么必须写引号。

字典中如果属性key只是单纯的width,可以不写引号。

在前端中100px可以写成100,字典中属性key的value值100可以不加引号,但是100px必须写引号。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // alert($('div').css('color'))
            $('div').css('color', 'red')
            $('div').css({width:500, 'height':'300px', 'background':'green', 'font-size':'60px'})
        })
    </script>
</head>
<body>
    <div>div</div>
</body>
</html>

5.选择器

查找标签从而去控制它。

js的选择器都可以用,而且还有更多的选择器

eq equal 选中下标等于某个数字的标签(两种写法,可以看下面的代码块)

选择器转移(选择集转移):.next() .prev() .nextAll() .prevAll()

选中某个属性 = 某个值的标签,只要键值对存在

$('img[alt=aa]').css('background','green')

下面的环境都是父子集

has选中了谁的子级是xx,父级执行了命令

find选中子集执行了命令

下面的选择器很重要

.parent()选择元素的父元素

可以先用一个this,然后找到这个元素的父级。

.children()选择元素的所有子元素

括号里面放具体的哪一个子集。

.siblings()选择元素的同级别元素 -----排他思想:只许州官放火不许百姓点灯

先将自己控制一遍,然后调用siblings再把除了自己的其他同级元素控制一遍

这个 this

jq中使用this---$(this)

会自动检索事件发生的目标

链式编程(链式调用)的好处:简化代码量,执行的时候提高效率,

导航标签都用ul套li

jq中使用onclick、onmouseover等都取消on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // $('li').css('background', 'green')
            // $('li:first').css('background', 'green')
            // $('li:last').css('background', 'green')

            // eq equal 选中下标等于某个数字的标签
            // $('li:eq(0)').css('background', 'green')
            // $('li').eq(1).css('background', 'green')

            // 选择器转移  选择集转移
            // $('.box').next().css('background', 'green')
            // $('.box').prev().css('background', 'green')
            // $('.box').prevAll().css('background', 'green')
            // $('.box').nextAll().css('background', 'green')
            // 选中某个属性=某个值的标签,只要键值对真实存在
            // $('img[alt=aa]').css('background', 'green')
            $('.box1').has('p').css('background', 'green')  // 父
            $('.box2').find('p').css('background', 'green')  // 子 -- 层级
        })
    </script>
</head>
<body>
    <ul>
        <li>文字1</li>
        <li>文字2</li>
        <li class="box">文字3</li>
        <li>文字4</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
    </ul>
    <img src="aa.jpg" alt="aa">
    <img src="bb.jpg" alt="bb">
    <div class="box1">
        <p>box1里面的p  has</p>
    </div>
    <div class="box2">
        <p>box2里面的p  find</p>
    </div>
</body>
</html>

siblings():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                // 点了哪个按钮 这个按钮的背景色是绿色  ; 别人 其他的button不能是绿色
                // 这个this -- 会自动检索事件发生的目标 -- jq $(this)
                $(this).css('background', 'green').siblings().css('background', '')
            })
        })
    </script>
</head>
<body>
    <!-- 同级  排他思想:只许州官放火不许百姓点灯 -->
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>

6.***获取指定元素下标 -----index()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('li').click(function(){
                alert( $(this).index() )
            })
        })
    </script>
</head>
<body>
    <!-- 单击li,单击谁就弹出这个li的下标 -->
    <ul>
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
    </ul>
</body>
</html>

7.***添加类删除类

.addClass()添加类

.removeClass()删除类

删除了class=“xx”中的类名xx,而不会删除class。删除完之后是class。

class中可以添加多个类。

class=“aa bb cc”如果括号里面不填类名,会删除所有类名,如果填了类名,就删除指定的类名。

toggleClass()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                // $('div').addClass('aa')
                // $('div').removeClass('aa')
                // $('div').removeClass()
                $('div').toggleClass('daqiu')
            })
        })
    </script>
</head>
<body>
    <button>按钮</button>
    <div class="aa bb cc">div</div>
</body>
</html>

8.animate

jQuery提供的一个程序员可以根据自己的需求封装动画效果或功能的函数。

自定义封装动画的函数。

animate(字典形式的动画过程,动画时间,运动曲线,回调函数)

4个参数,只有参数1是必填项{}

动画时间 毫秒为单位,默认值是600;

运动曲线:字符串的形式 linear(默认值) 和swing----工作不常用

运动曲线就是加速减速

回调函数:前面动画过程执行完成之后,要执行的命令 --- 就是匿名函数而已。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 100px;
        height: 100px;
        background: green;
    }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // $('div').animate(字典形式的动画过程, 动画时间, 运动曲线, 回调函数)
            // animate4个参数只有参数1是必填项 {}
            // 动画时间 毫秒为单位  默认值是600
            // 运动曲线:字符串的形式 linear(默认值)  swing -- 工作不常用
            // 回调函数 前面动画过程执行完成之后要执行的命令 -- 就是匿名函数而已
            $('div').eq(0).animate({width:1000}, 2000, 'linear', function(){
                alert('动画完成了的命令')
            })
            // $('div').eq(1).animate({width:1000}, 2000, 'swing')
        })
    </script>
</head>
<body>
    <div></div>
    <!-- <div></div> -->
</body>
</html>

9.***常用动画函数

slideUp()隐藏

slideDown()显示

slideToggle() 一会显示一会隐藏

清除动画排队机制,在形成动画函数之前加stop()

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 一会淡入一会淡出

括号里面可以写动画时间,运动曲线,回调函数三个参数,但这三个参数可以可以不写

fadeTo() 设置透明度,参数一是时间,参数2是透明度0-1的数值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 200px;
        height: 200px;
        background: green;
        /* display: none; */
    }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('button').click(function(){
                // 1、滑动动画
                // $('div').slideUp()  // 隐藏
                // $('div').slideDown()  // 显示
                // 清除动画排队机制:在形成动画函数之前加stop()
                // $('div').stop().slideToggle()

                // 2、透明度动画
                // $('div').fadeIn(1000)  // 淡入
                // $('div').fadeOut()  // 淡出
                // $('div').fadeToggle()
                $('div').fadeTo(600, 0.5)  // 设置透明度参数是时间,参数2 是透明度0-1的数值
            })
        })
    </script>
</head>
<body>
    <button>按钮</button>
    <div></div>
</body>
</html>

10.***事件属性

click() 鼠标单击

ready() DOM加载完成

blur() 元素失去焦点

focus()元素获得焦点

submit()用户提交表单

hover()同时为mouseenter和mouseleave事件指定处理函数

mouseover()鼠标进入(进入子元素也触发)

mouseout()鼠标离开(离开子元素也触发)

mouseenter()鼠标进入(进入子元素不触发)

mouseleave()鼠标离开(离开子元素不触发)

上面的这些鼠标移入和离开,触发和不触发指的是不再次触发父级。验证两组不一样的时候,鼠标先进入父级,再进入子级,然后没有再次触发,验证成功。如果是直接进入子级的话,因为子级和父级是一体的,会触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .father{
        width: 300px;
        height: 300px;
        background: green;
    }
    .son{
        width: 200px;
        height: 200px;
        background: pink;
    }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 鼠标移入标签向下运动150px, 鼠标离开回到默认状态0  margin-top
            // $('.father').mouseover(function(){
            //     $(this).animate({'margin-top':150})
            // })
            // $('.father').mouseout(function(){
            //     $(this).animate({'margin-top':0})
            // })


            // $('.father').mouseenter(function(){
            //     $(this).animate({'margin-top':150})
            // })
            // $('.father').mouseleave(function(){
            //     $(this).animate({'margin-top':0})
            // })

            $('.father').hover(function(){
                // 鼠标移入
                $(this).animate({'margin-top':150})
            }, function(){
                // 鼠标离开
                $(this).animate({'margin-top':0})
            })
        })
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

表单验证:用户输入,然后利用正则判断,如果正确,那么让其登录。

XHTML1.0 $('form').submit(function(){}) ----- 一个页面只能有一个form标签

HTML5.0 表单域标签的id名.submit(function(){}) --- 一个页面可以有多个form

表单提交submit 组织默认提交行文 return false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 表单域.submit(function(){})
            // xhtml1.0  $('form').submit(function(){}) -- 一个页面只能有一个form标签
            // html5.0  表单域标签的id名.submit(function(){}) -- 一个页面可以有多个form标签
            $('#login').submit(function(event){
                // return false  //某些浏览器里面表单有默认提交行为 -- return false 不需要event
                // event.defaultPrevent()
                alert('ok')
            })
        })
    </script>
</head>
<body>
    <form action="" method="get" id="login">
        <input type="text">
        <input type="submit">
    </form>
</body>
</html>

原文发布于微信公众号 - 小闫笔记(Pythonnote)

原文发表时间:2018-12-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券