jQuery基础

时间：2016-07-30 12:03:32 阅读：209 评论：0 收藏：0 [点我收藏+]

标签：

本文参考w3school网站。

jquery是一个十分流行的javascript库。

基础语法是：$(selector).action()

　　$：表示使用的语法为jquery

　　selector：选择器

　　action：行为

selector

　　jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。

选择器可以大体分为元素选择器和属性选择器。

1 元素选择器

jquery使用 css选择器对html元素进行选择

$("*")            //  所有元素
$("p")            //  所有p元素
$(".first")       //  所有class=first的元素
$("h1,p,tr")      //  支持选择器分组
$("#second")      //  所有id=second的元素
$("p.first")      //  所有类名为first的p元素
$(".first:hover") //  支持伪类/伪元素


//css中的组合选择符也适用于jquery
$(".first p")      //后代选择符,类名为first的元素中所包含的所有p元素
$(".first>p")      //子选择符，类名为first的子p元素，孙子p元素就不考虑了
$(".first+p")      //相邻兄弟选择符，紧邻的第一个
$(".first~p")      //普通相邻兄弟选择符，靠着的所有

2 属性选择器

使用 css属性选择器对具有某种属性的html元素进行选择。

$("[href]")   //选取所有带有 href 属性的元素。

$("[href=‘#‘]")   //选取所有带有 href 值等于 "#" 的元素。

$("[href!=‘#‘]")   //选取所有带有 href 值不等于 "#" 的元素。

$("[href$=‘.jpg‘]")   //选取所有 href 值以 ".jpg" 结尾的元素。

初步了解完选择器，那么接下来在看action之前，我们需要先了解一下事件

事件

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

来看一看常用的事件方法。

1 $(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。(一般jq中必加此函数，尽管我接下来的代码示例大部分都没加。。。。)

 $(document).ready(function(){
           
           //jq代码
       })

2 click() 鼠标点击事件

3 dbclick() 鼠标双击事件

4 mouseenter() 当鼠标指针穿过元素事件

5 mouseleave() 鼠标离开元素事件

6 mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键

7 hover() 用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个　　　　　　　　　　函数(mouseleave)。

8 focus() blur() 元素获得/失去焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
    
   </style>
</head>
<body>
   <form>
       姓名：<input name="name" value="欧阳锋"/><br/>
       功法：<input name="gongfa" value="蛤蟆功"/>
   </form>

    <script src="js/jq.js"></script>
    <script>
       $(document).ready(function(){
           $(‘input‘).focus(function(){
               $(this).css(‘background-color‘,‘#2aabd2‘)
           });
           $(‘input‘).blur(function(){
               $(this).css(‘background-color‘,‘white‘)
           });

           
       })




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

focus和blur演示

action

通常，action可以大体分为两类，一类就是对html（包含css属性）进行操作，另一类就是效果了。

html

1 获取以及设置html元素节点的值

　　text() 设置或返回所选元素的文本内容

　　html() 设置或返回所选元素的内容（包括 HTML 标记）

　　val() 设置或返回表单字段的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       
   </style>
</head>
<body>
    <p>hello <span>world</span></p>
    <select name="languane">
        <option value="chinese" >简体中文</option>
        <option value="english" selected>English</option>
    </select>


    <script src="js/jq.js"></script>  //个人jquery路径
    <script>
        console.log($(‘p‘).text());
        console.log($(‘p‘).html());
        console.log($(‘select‘).val());
    </script>
</body>
</html>

三种方法效果演示

2 获取以及设置html元素节点的属性

　　attr()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       a {
           color: #1b6d85;
           text-decoration: none;
       }

   </style>
</head>
<body>

    <a href="#" target="_blank">hello world</a>



    <script src="js/jq.js"></script>
    <script>
        console.log($(‘a‘).attr(‘href‘));
        $(‘a‘).attr({
            ‘href‘:‘http://baidu.com‘
        })

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

演示代码

3 添加或者删除元素

　　append() - 在被选元素的结尾插入内容

　　prepend() - 在被选元素的开头插入内容

　　after() - 在被选元素之后插入内容

　　before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       a {
           color: #1b6d85;
           text-decoration: none;
       }

   </style>
</head>
<body>

    <a href="#" target="_blank">hello world</a>



    <script src="js/jq.js"></script>
    <script>
        var a = $(‘a‘).eq(0);
        a.after(‘<b> after </b>‘);
        a.before(‘<b> before </b>‘)
        a.append(‘<b> append </b>‘);
        a.prepend(‘<b> prepend </b>‘)


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

View Code

4 删除元素

　　remove() - 删除被选元素（及其子元素）可以传入一个参数，参数语法与选择器类似。$(‘p‘).remove(‘.first‘) 删除class=first的所有p元素。

　　empty() - 从被选元素中删除子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .first{
           color: #0b79e9;
       }

   </style>
</head>
<body>

    <p id="id1">hello <span>lala</span> world</p>
    <p class="first">crazy</p>
    <div style="height: 200px;width:200px;background-color: #2e85e6">
        <p>crazy</p>
    </div>

    <script src="js/jq.js"></script>
    <script>
        var a = $(‘p‘);
        a.remove(‘.first‘);
        $(‘div‘).empty()
    </script>
</body>
</html>

View Code

5 操作css类

　　css() - 设置或返回样式属性，（当我们仅仅使用js时，element.style并不能获取内部样式或者外部样式中的css属性，使用jquery.css()则很方便）

　　　　如需设置指定的 CSS 属性，请使用如下语法: css("propertyname","value"); 多个属性使用逗号隔开。

　　addClass() - 向被选元素添加一个或多个类，注意：添加类时不要加 ‘.‘ ，添加多个类时用空格隔开。

　　removeClass() - 从被选元素删除一个或多个类

　　toggleClass() - 对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .first{
           color: #0b79e9;
       }
       .second{
           background-color: yellow;
       }

   </style>
</head>
<body>

    <p id="id1">hello world</p>
    <p class="first">crazy</p>
    <div style="height: 200px;width:200px;background-color: #2e85e6">
        <p>crazy</p>
    </div>

    <script src="js/jq.js"></script>
    <script>
        var a = $(‘p‘).eq(1);
        console.log(a.css(‘color‘));
        $(‘p‘).eq(0).addClass(‘first second‘);
        $(‘p‘).eq(0).removeClass(‘first‘);


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

View Code

6 尺寸

　　width() 设置或返回元素的宽度（不包括内边距、边框或外边距）。

　　height() 设置或返回元素的高度（不包括内边距、边框或外边距）。

　　innerWidth() 返回元素的宽度（包括内边距）。

　　innerHeight() 返回元素的高度（包括内边距）。

　　outerWidth() 返回元素的宽度（包括内边距和边框）。

　　outerHeight() 返回元素的高度（包括内边距和边框）。

　　outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）。

　　outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .first{
           color: #0b79e9;
           background-color: #9aaece;
           height: 300px;
           width: 300px;
           margin: 0;
           text-align: center;
           box-shadow: 2px 2px 2px grey;


       }
       .second{
           background-color: yellow;
           font-size: 32px;
           padding: 10px;

       }
       .third{
           margin: 10px;
           background-color: #afd9ee;
           font-size: 24px;
           color:white;
       }

   </style>
</head>
<body>

    <div class="first">
        <div class="second">
            <p>hello world</p>
        </div>
        <div class="third">
            <p>lala</p>
        </div>
    </div>


    <script src="js/jq.js"></script>
    <script>
        var a = $(‘.first‘).eq(0);
        console.log(a.width());
        console.log(a.height());
        var b = $(‘.second‘).eq(0);
        console.log(b.innerHeight());






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

View Code

效果

1 隐藏/显示

　　hide(speed,callback) 隐藏元素,speed表示速度，callback表示 回调函数。

　　　　Callback 函数在当前动画 100% 完成之后执行。两个参数非必需，若无特殊说明，以下所有方法中的speed和callback都为非必需参数

　　　　可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

　　show(speed,callback) 显示元素

　　toggle(speed,callback) 显示或者隐藏元素

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

   </style>
</head>
<body>
    <p>hello world</p>
    <button type="button">显示或者隐藏</button>
    <script src="js/jq.js"></script>
    <script>
        $(‘button‘).eq(0).click(function(){
            $(‘p‘).toggle(200,function(){
                console.log(‘haha‘)
            })
        })

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

View Code

2 淡入/淡出

　　fadeIn(speed,callback) 用于淡入已隐藏的元素。

　　fadeOut(speed,callback) 方法用于淡出可见元素。

　　fadeToggle(speed,callback) 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

　　fadeTo(speed,opacity,callback) 方法允许渐变为给定的不透明度（opacity值介于 0 与 1 之间）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .first{
           height: 100px;
           width:100px;
           background-color: #9aaece;
       }
       .second{
           height: 100px;
           width:100px;
           background-color: pink;
       }
       .third{
           height: 100px;
           width:100px;
           background-color: grey;
       }

   </style>
</head>
<body>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="first" style="display: none"></div>
    <button type="button">fadein/fadeout</button>
    <script src="js/jq.js"></script>
    <script>
        $(‘button‘).click(function(){
            $(‘div‘).eq(0).fadeOut(1000,function(){
                $(‘div‘).eq(3).fadeIn(1000,function(){
                    $(‘div‘).fadeTo(1000,0.24)
                })
            });


        })
    </script>
</body>
</html>

View Code

3 滑动

　　slideDown(speed,callback) 方法用于向下滑动元素。

　　slideUp(speed,callback) 方法用于向上滑动元素。

　　slideToggle(speed,callback) 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .first{
           height: 100px;
           width:100px;
           background-color: #9aaece;
           display: none;
           text-align: center;
       }
       .second{
           height: 100px;
           width:100px;
           background-color: pink;
       }
       .third{
           height: 100px;
           width:100px;
           background-color: grey;
       }

   </style>
</head>
<body>
    <div class="first">
        <p>hello world</p>
    </div>

    <button type="button">slideup/slidedown</button>
    <script src="js/jq.js"></script>
    <script>
        $(‘button‘).click(function(){
            $(‘.first‘).slideDown(1000,function(){
                $(‘.first‘).slideUp(2000)
            })
        })

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

View Code

4 动画

　　animate({params},speed,callback) 方法用于创建自定义动画。必需的 params 参数定义形成动画的 CSS 属性。

　　　　注意：1 jQuery 提供针对动画的队列功能。也就是说多个animate()调用会被逐一运行，不需要将animate嵌入到上一个animate的回调函数中。

　　　　　　 2 jQuery几乎可以操作所有css属性，当使用 animate() 时，必须使用 Camel标记法 书写所有的属性名，比如，必须使用 fontSize 而不是　　　　　　　　　　font-size。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .first{
           height: 100px;
           width:100px;
           background-color: #9aaece;
           text-align: center;
           opacity: 0.4;
           position: relative; /*默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
                                如需对位置进行操作，记得首先把元素的 CSS position 属性设置为
                                 relative、fixed 或 absolute。*/
       }
       .second{
           height: 100px;
           width:100px;
           background-color: pink;
       }
       .third{
           height: 100px;
           width:100px;
           background-color: grey;
       }

   </style>
</head>
<body>
    <div class="first">
        <p>hello world</p>
    </div>

    <button type="button">animate</button>
    <script src="js/jq.js"></script>
    <script>
        $(‘button‘).click(function(){
            $(‘.first‘).animate({
                left:‘150px‘,
                top:‘200px‘,
            },1000);
            $(‘.first‘).animate({
                fontSize:‘26px‘
            },1000)
        })


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

View Code

5 停止效果

　　stop() 方法用于停止动画或效果，在它们完成之前。

　　　　不带参数：仅仅停止滑动

　　　　一个参数 true：停止所有动画

　　　　两个参数 true,true:停止动画，但快速完成动作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .first{
           height: 100px;
           width:100px;
           background-color: #9aaece;
           text-align: center;
           opacity: 0.4;
           position: relative; /*默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
                                如需对位置进行操作，记得首先把元素的 CSS position 属性设置为
                                 relative、fixed 或 absolute。*/
       }
       .second{
           color: white;
           background-color: grey;
       }
       .third{
           height: 100px;
           width:100px;
           background-color: grey;
       }

   </style>
</head>
<body>
    <div class="second">
        <button type="button" id="first_but">animate</button>
        <button type="button" id="second_but">stop_animate</button>
        <button type="button" id="third_but">stop_but_runover</button>
        <button type="button" id="fourth_but">stop_slide</button>
    </div>

    <div class="first">
        <p class="third">hello world</p>
    </div>

    <script src="js/jq.js"></script>
    <script>
        $(‘#first_but‘).click(function(){
            $(‘.first‘).animate({
                left:‘150px‘,
                top:‘200px‘,
            },4000);
            $(‘.first‘).animate({
                fontSize:‘26px‘
            },4000)
        });
        $(‘#second_but‘).click(function(){
            $(‘.first‘).stop(true)
        });

        $(‘#third_but‘).click(function(){
            $(‘.first‘).stop(true,true)
        });
        $(‘#fourth_but‘).click(function(){
            $(‘.first‘).stop()
        })


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

View Code

jQuery基础

标签：

原文地址：http://www.cnblogs.com/MnCu8261/p/5709111.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行