前端基础 jQuery

一 jQuery是什么

  • jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
  • jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
  • 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
  • jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
  • jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二 jQuery内容

  1. 选择器
  2. 筛选器
  3. 样式操作
  4. 文本操作
  5. 属性操作
  6. 文档处理
  7. 事件
  8. 动画效果
  9. 插件
  10. each、data、Ajax

下载链接：jQuery官网

三 什么是jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()
       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

详细参考：http://jquery.cuishifeng.cn/

四 寻找元素(选择器和筛选器)

4.1 选择器

4.1.1 基本选择器


1

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

4.1.2 层级选择器


1

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

4.1.3 基本筛选器


1

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

4.1.4 属性选择器


1

$(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)

4.1.5 表单选择器


1

$("[type=‘text‘]")----->$(":text")         注意只适用于input标签  : $("input:checked")

实例之左侧菜单

 

实例之tab切换

 

4.2 筛选器

4.2.1  过滤筛选器


1

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

4.2.2  查找筛选器


1

2

3

4

5

6

7

8

9

$("div").children(".test")     $("div").find(".test") 

                              

$(".test").next()    $(".test").nextAll()    $(".test").nextUntil()

                          

$("div").prev()  $("div").prevAll()  $("div").prevUntil()  

                       

$(".test").parent()  $(".test").parents()  $(".test").parentUntil()

$("div").siblings()

五 操作元素(属性，css，文档处理)

5.1 属性操作


1

2

3

4

5

6

7

8

9

10

11

12

13

14

--------------------------属性

$("").attr();

$("").removeAttr();

$("").prop();

$("").removeProp();

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

--------------------------HTML代码/文本/值

$("").html([val|fn])

$("").text([val|fn])

$("").val([val|fn|arr])

---------------------------

$("").css("color","red")

注意attr和prop：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此

//需要使用prop方法去操作才能获得正确的结果。

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    true

    console.log($("#chk1").prop("checked"));//false

    console.log($("#chk2").prop("checked"));//true

    console.log($("#chk1").attr("checked"));//undefined

    console.log($("#chk2").attr("checked"));//checked

</script>

实例之全反选

 

实例之模态对话框

 

5.2 文档处理


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

//创建一个标签对象

    $("<p>")

//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

    $("").appendTo(content)       ----->$("p").appendTo("div");

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()

    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

实例之复制样式条

 

5.3 css操作


1

2

3

4

5

6

7

8

9

10

11

12

13

14

CSS

        $("").css(name|pro|[,val|fn])

    位置

        $("").offset([coordinates])

        $("").position()

        $("").scrollTop([val])

        $("").scrollLeft([val])

    尺寸

        $("").height([val|fn])

        $("").width([val|fn])

        $("").innerHeight()

        $("").innerWidth()

        $("").outerHeight([soptions])

        $("").outerWidth([options])

实例返回顶部

 

六 事件


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

页面载入

    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

    $(document).ready(function(){}) -----------> $(function(){})

事件处理

    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

    //  $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定

    //  click事件；

    [selector]参数的好处:

        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和

        //$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个

        //li：$(‘ul‘).append(‘<li>js new li<li>‘)；这个新加的li是不会被绑上click事件的

        //但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加

        //li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件

    

    [data]参数的调用:

             function myHandler(event) {

                alert(event.data.foo);

                }

             $("li").on("click", {foo: "bar"}, myHandler)

实例之面板拖动

 

实例之放大镜

 

七 动画效果

显示隐藏


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

$(document).ready(function() {

    $("#hide").click(function () {

        $("p").hide(1000);

    });

    $("#show").click(function () {

        $("p").show(1000);

    });

//用于切换被选元素的 hide() 与 show() 方法。

    $("#toggle").click(function () {

        $("p").toggle();

    });

})

    </script>

    <link type="text/css" rel="stylesheet" href="style.css">

</head>

<body>

    <p>hello</p>

    <button id="hide">隐藏</button>

    <button id="show">显示</button>

    <button id="toggle">切换</button>

</body>

</html>

滑动


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

    $(document).ready(function(){

     $("#slideDown").click(function(){

         $("#content").slideDown(1000);

     });

      $("#slideUp").click(function(){

         $("#content").slideUp(1000);

     });

      $("#slideToggle").click(function(){

         $("#content").slideToggle(1000);

     })

  });

    </script>

    <style>

        #content{

            text-align: center;

            background-color: lightblue;

            border:solid 1px red;

            display: none;

            padding: 50px;

        }

    </style>

</head>

<body>

    <div id="slideDown">出现</div>

    <div id="slideUp">隐藏</div>

    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>

</html>

淡入淡出


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

    $(document).ready(function(){

   $("#in").click(function(){

       $("#id1").fadeIn(1000);

   });

    $("#out").click(function(){

       $("#id1").fadeOut(1000);

   });

    $("#toggle").click(function(){

       $("#id1").fadeToggle(1000);

   });

    $("#fadeto").click(function(){

       $("#id1").fadeTo(1000,0.4);

   });

});

    </script>

</head>

<body>

      <button id="in">fadein</button>

      <button id="out">fadeout</button>

      <button id="toggle">fadetoggle</button>

      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important;">></div>

</body>

</html>

回调函数


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

</head>

<body>

  <button>hide</button>

  <p>helloworld helloworld helloworld</p>

 <script>

   $("button").click(function(){

       $("p").hide(1000,function(){

           alert($(this).html())

       })

   })

    </script>

</body>

</html>

八 扩展方法 (插件机制)

8.1 用JQuery写插件时，最核心的方两个方法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<script>

    

$.extend(object)      //为JQuery 添加一个静态方法。

$.fn.extend(object)   //为JQuery实例添加一个方法。

    jQuery.extend({

          min: function(a, b) { return a < b ? a : b; },

          max: function(a, b) { return a > b ? a : b; }

        });

    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({

    "print":function(){

        for (var i=0;i<this.length;i++){

            console.log($(this)[i].innerHTML)

        }

    }

});

$("p").print();

</script>

8.2 定义作用域

定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。


1

2

3

4

5

6

(function(a,b){return a+b})(3,5)

       (function ($) { })(jQuery);

//相当于

        var fn = function ($) { };

        fn(jQuery);

8.3 默认参数

定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

/step01 定义JQuery的作用域

(function ($) {

    //step03-a 插件的默认值属性

    var defaults = {

        prevId: ‘prevBtn‘,

        prevText: ‘Previous‘,

        nextId: ‘nextBtn‘,

        nextText: ‘Next‘

        //……

    };

    //step06-a 在插件里定义方法

    var showLink = function (obj) {

        $(obj).append(function () { return "(" + $(obj).attr("href") + ")"});

    }

    //step02 插件的扩展方法名称

    $.fn.easySlider = function (options) {

        //step03-b 合并用户自定义属性，默认属性

        var options = $.extend(defaults, options);

        //step4 支持JQuery选择器

        //step5 支持链式调用

        return this.each(function () {

            //step06-b 在插件里定义方法

            showLink(this);

        });

    }

})(jQuery);

九 经典实例练习

实例之注册验证

 

实例之轮播图

 

原文地址：https://www.cnblogs.com/bigtreei/p/8184391.html

时间： 2024-10-16 01:57:27

前端基础 jQuery的相关文章

Web前端基础——jQuery（一）

前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书.现在是一边搜视频,一边看这本书. 认识jQuery,我将从以下几方面进行讲解. 一.JavaScript和JavaScript库 随着Web 2.0的兴起,JavaScript受重视的程度提高,带动JavaScript程序库也蓬勃发展起来. 过程:Prototype->Dojo->jQuery-

前端基础-jQuery中的如何操作标签

阅读目录 样式操作 文本操作 属性操作 文档操作 一.样式操作 1.样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加. ①.addClass( className )方法: 通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一

前端基础JQuery

JQuery对象是通过JQquery包装DOM对象后产生的对象.JQuery对象是JQuery独有的.如果一个对象是JQuery对象,那么它就可以使用JQuery中的方法. $("#test").html(); 获取ID为test的元素内的html代码 DOM实现代码:document.getElementById("test").innerHTML; 虽然JQuery对象是DOM对象包装后产生的,但是JQuery无法使用DOM对象的任何方法,同理DOM对象也不能使

Web前端基础——jQuery（三）

本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQuery 中的事件7 jQuery 中的动态效果 一. jQuery 节点遍历 == next()   //用于获取节点之后的第一个同辈元素 注意,next() 中可以加过滤器 例如 next("div") == nextAll()  //获取节点之后的所有同辈元素(注意: 是节点之后,这一点

Web前端基础——jQuery（二）

一.jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中 var arr=[1,3,5,7,9]; arr=$.map(arr,function(item){ return item*10; }); alert(arr); [10,30,50,70,90]; //上例是将数组中的每个元素乘10,然后返

前端基础---jquery练习

左侧菜单 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>left_menu</title>     <style>           .menu{               height: 500px;               width: 20%;         

前端基础-jQuery的最常用的的方法each、data、

阅读目录 each inArray get index data 一.jQuery中each方法的应用 jQuery中有个很重要的核心方法each,大部分jQuery方法在内部都会调用each,其主要的原因的就是jQuery的实例是一个元素合集 如下:找到所有的div,并且都设置样式,css只是一个方法,所以内部会调用each处理这个div的合集,给每个div都设置style属性 $('div').css(...) jQuery的大部分方法都是针对元素合集的操作,所以jQuery会提供$(sel

前端：jQuery笔记

前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收到服务器发送的AJAX请求,服务器端并不返回,而是将其Hold住,待到有东西要通知客户端时,才将这个请求返回. 客户端:请求异步Action,当接收到一个返回时,立即又再发送一个. 缺点:会长期占用一个Asp...阅读全文 posted @ 2015-02-10 12:01 逆心 阅读(1072)

前端之jQuery

前端之jQuery jQuery入门 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库: 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.    它的宗旨就是:“Write less, do more.“ jQuery包含以下内容 选器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each.data.Ajax(下载链接:https://jqu