jQuery速看

本文参考w3school网站。

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

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

　　　$：表示使用的语法为jquery

　　　selector：选择器

　　　action()：行为

selector 选择器

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

　　jquery基于 css选择器对html元素进行选择，并且还有一些自己的独特的选择器。

$("*")            //  所有元素
$("this")         //  选取当前html元素
$("p")            //  所有p元素
$(".first")       //  所有class=first的元素
$("h1,p,tr")      //  支持选择器分组
$("p:first")      //  选取第一个p元素

$("#second")      //  所有id=second的元素
$("p.first")      //  所有类名为first的p元素
$(".first:hover") //  支持伪类/伪元素

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

还可以对具有某种属性的html元素进行选择。

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

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

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

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

遍历方法

　　在实际生产环境中，我们可能会对所选中的元素的子元素或者父元素或者元素集中的某元素进行操作，所以我们需要知道jQuery用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素的方法。

1 父元素

　　parent() 返回被选元素的直接父元素。

　　parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

　　parentsUntil() 返回介于两个给定元素之间的所有祖先元素。

2 子元素

　　children() 返回被选元素的所有直接子元素

　　find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

3 同胞元素

　　siblings() 返回被选元素的所有同胞元素。

　　next() 返回被选元素的下一个同胞元素。

　　nextAll() 返回被选元素的所有跟随的同胞元素。

　　nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。

4 过滤

　　first() 返回被选元素的首个元素。

　　last() 返回被选元素的最后一个元素。

　　eq() 返回被选元素中带有指定索引号的元素。

　　filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

　　not() 返回不匹配标准的所有元素。

5 遍历

　　each() 为每个匹配元素执行函数

事件方法

　　在讲action()行为之前，得先介绍一下事件，因为行为一般由事件触发。

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

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

1 $(document).ready()

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

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

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() 行为

通常jQuery的行为可以分为两类，第一类是对html元素或者其属性进行操作，另一类就是jQuery所提供的效果

第一类

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 AJAX

　　AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

　　$(selector).load(URL,data,callback) 从服务器加载数据，并把返回的数据放入被选元素中

　　$.get(URL,callback) 通过 HTTP GET 请求从服务器上请求数据。

　　$.post(URL,data,callback) 通过 HTTP POST 请求从服务器上请求数据。

posted on 2016-07-30 11:22 MnCu 阅读(292) 评论(0) 编辑收藏举报