[JS] JavaScript由浅入深(2) jQuery

  jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

  官网API:

    http://api.jquery.com

  下载:

    NuGet:Install-Package jQuery

1.主要功能

  html选取,操作,css操作,事件,特效,遍历,ajax

2.版本

  1.x:IE6+(本人测试,部分方法还是不支持IE8及以下)    

  2.X:IE9+

3.基本语法

  $(selector).action()

  如:

        function func() {
            $(this).hide();             //所有div隐藏
        }
        $(‘div‘).click(func);
        $(‘div‘).bind(‘click‘, func);   //unbind
        $(‘div‘).on(‘click‘, func);     //off   bind本质用的就是on

4.事件

  jquery和js的事件对象不一样。(包装了一下js对象,originalEvent属性就是js event对象)

  事件对象:

    type:事件名,如:click

    target:触发源,实际点击目标。

    currentTarget:触发源,触发事件目标。

    <div>
        <p>Text</p>
    </div>
    <script>
        $(‘div‘).first().click(function (e) {
            console.log(e);
        })
    </script>

  阻止冒泡:

    <div>text</div>
    <div>text</div>
    <script>
        function func(e) {
            console.log(e);                     //打印事件
            e.stopImmediatePropagation();       //阻止所有冒泡
            e.stopPropagation();                //阻止父级冒泡
            //todo
        }
        $(‘div‘)[1].onclick = func;             //js事件
        $(‘div‘).first().click(func);           //jquery事件
    </script>

  

5.操作元素

  查、改:text,html,val,attr,css

    <p><a>p1</a></p>
    <p><a>p2</a></p>
    <input type="text" value="v1" />
    <input type="text" value="v2" />
    <script>
        var ps = $(‘p‘);            //所有p元素jquery对象
        ps.eq(0).text();            //innerText
        ps.eq(1).html();            //innerHTML
        $(‘input‘).val();           //value
    </script>

  增:

    <p> text </p>
    <script>
        $(‘p‘).prepend(‘prepend‘);          //向前插入
        $(‘p‘).append(‘append‘);            //向后插入
        $(‘p‘).before(‘before‘);            //向前插入,且换行
        $(‘p‘).after(‘after‘);              //向后插入,且换行
    </script>

  删:

    <div>
        <p> text </p>
    </div>
    <span>通过该位置及样式区别</span>
    <script>
        $(‘div‘).css({ height: ‘200px‘, background: ‘#0094ff‘ });           //设置div样式
        $(‘div‘).remove();                                                  //删除元素及子元素
        $(‘div‘).empty();                                                   //删除子元素
    </script>

  

6.特效

  语法:effect(time,func)

    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div>
    </div>
    <script>
        $(‘div‘).css({ height: ‘100px‘, background: ‘red‘ });
        $(‘button‘).eq(0).click(function () {
            $(‘div‘).show(1000);                        //显示
            $(‘div‘).fadeIn(1000);                      //淡入
            $(‘div‘).slideUp(1000);                     //滑动入
        })
        $(‘button‘).eq(1).click(function () {
            $(‘div‘).hide(1000);
            $(‘div‘).fadeOut(1000);
            $(‘div‘).slideDown(1000);
        })
        $(‘button‘).eq(2).click(function () {
            $(‘div‘).toggle(1000);
            $(‘div‘).fadeToggle(1000);
            $(‘div‘).slideToggle(1000);
        })
    </script>

  

7.AJAX

  语法:$.method(url,data,func)

    <script>
        $.get(‘handle.ashx‘,{ time: new Date().toLocaleString() }, function (data) {
            alert(data);
        }).error(function (e) {
            //todo  出现异常执行
        })
    </script>

  语法:$(selector).load(url,func)      //加载文件

  语法:$.getScript(url,func)        //加载script,本质是$.get( url, undefined, func, "script" );

8.扩展jQuery

  通过$.fn作为扩展,可实现链式编程。

    <div>text</div>
    <script>
        $.fn.func = function () {
            alert(this);                //this为jQuery对象
        }
        $(‘div‘).func();
    </script>

 

9.noConflict

  该方法会释放 $ 标识符的控制

    <div>text</div>
    <script>
        var my$ = $.noConflict();       //释放$
        my$(‘div‘).hide(1000);
        //$(‘div‘).hide(1000);          //无效
    </script>

  

10.css

  语法:    $(selector).css(name,value)      $(selector).css(obj)

  常用操作:  $(selector).addClass(className)    $(selector).removeClass(className)  $(selector).toggleClass(className)

        $(‘div‘).css(‘width‘, ‘200px‘).css(‘background‘, ‘blue‘);
        $(‘div‘).css({width:‘200px‘,background:‘blue‘});

11.遍历

  子元素:    chilrden()  find()

  父元素:    parent()  parents()  parentUntil(selector)

  同级元素:   

    <script>
        var d = $(‘div‘);
        d.siblings();                           //同级所有其他元素
        d.next();                               //同级下一个元素
        d.nextAll();                            //同级下面所有元素
        d.nextUntil(selector);                  //同级下面到selector间的所有元素
        d.prev();                               //同级上一个元素
        d.prevAll();                            //同级上面所有元素
        d.prevUntil(selector);                  //同级上面到selector间的所有元素
    </script>

  过滤:    first()  last()  eq(index)  filter(selector)  not(selector)    

    eq(index):        取jQuery对象数组中的第几个对象,从0开始

    filter(selector):      取jQuery对象数组中符合selector的对象,not(selector)相反。

12.DOM对象jQuery对象互转: 

  DOM对象  =>  jQuery对象:    $(DOM对象)

  如:      var ele = document.getElementById(‘id‘);  $(ele);   

  常用操作:    $(‘<a href="#">a标签<a>‘);    //直接将html标签转成DOM对象

  jQuery对象  =>  DOM对象:    jQuery对象[0]

  如:      $(ele)[0];

时间: 2024-10-12 23:47:24

[JS] JavaScript由浅入深(2) jQuery的相关文章

[JS] JavaScript由浅入深(3) 进阶

本节,将围绕以下几点来讲. 知识点:多线程.作用域.闭包.this 先顶后看 1.多线程 在不支持H5的浏览器中.使用Concurrent.Thread.js. 在支持H5中,使用WebWork. 在H5以前,js是不支持多线程的.其中存在同步池和异步池的概念.当同步池处理完后,会调用异步池的事件,定时任务等. 以下很明显的区分js是否是多线程执行的 c# js <script> setInterval(function () { alert('1'); }, 1000); </scri

[JS] JavaScript由浅入深(1) 基本特性

1.全局变量的特性: 在函数体内直接写的变量(未用var标志)自动升级为全局变量. (function func() { i = 100; }()); alert(i); 非常不建议不写var. var num = 1; (function func() { i = 100; }()); delete i; delete num; if (typeof i != "undefined") alert(i); if (typeof num != "undefined"

jquery js javascript select 无限级 插件 优化foxidea版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <sc

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

在JavaScript中重写jQuery对象的方法

jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" value="

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu

通过原生js的ajax或jquery的ajax获取服务器的时间

在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.客户端时间通过 javascript中的Date对象可以获取,如 Java代码   var dt = new Date(); var tm = dt.getTime(); 那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...但这个时间可靠吗?好吧,那取服务器时间吧经常用到的是后台写一个php,jsp,cgi,asp..

Atitit.&#160;数据约束&#160;校验&#160;原理理论与&#160;架构设计&#160;理念模式java&#160;php&#160;c#.net&#160;js&#160;javascript&#160;mysql&#160;oracle

Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq  index2 3. 检查约束 (Check Counstraint) 对该列数据的范围.格式的限制(如:年龄.性别等)2 4. 默认约束 (Default Counstraint) 该数据的默认值2 5. trigger2 6. 外键机制  参照完整性:2 7. 断言约束:不必与特定的列绑定,可以理解为能应用于多个表的

Javascript Fromdata 与jQuery 实现Ajax文件上传

<!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css"> fo