jQuery知识点总结(第一篇:概述)

2018-09-06  本文已影响0人  进入web前端

一、什么是jquery?它的特点?

   jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程。

    特点:
    (1).一款轻量级的js库。
        JQuery核心js文件大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。,不会影响页面加载速度。与Extjs相比要轻便的多。
    (2).丰富的DOM选择器
        JQuery的选择器用起来很方便,好比要找到某个dom对象的相邻元素js可能要写好几行代码,而JQuery一行代码就搞定了,再比如要将一个表格的隔行变色,JQuery也是一行代码搞定。    
    (3).链式表达式。
        JQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
    (4).事件、样式、动画支持。
        JQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
    (5).Ajax操作支持。
        JQuery简化了AJAX操作,JQuery将所有的Ajax操作封装到一个函数$.ajax()里,后台只需返回一个JSON格式的字符串就能完成与前台的通信。
    (6).跨浏览器兼容。
        JQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
    (7).插件扩展开发。
        JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
    (8).链式操作方式。
        JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。
    (9).隐式迭代。
        当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。

二、jquery语法:

1.基础语法: $(selector).action()
        美元符号定义 jQuery
        选择符(selector)"查询"和"查找" HTML 元素
        jQuery 的 action() 执行对元素的操作

2.入口函数:
    (1)第一种:常用的
        $(function() {
                代码体...
        })

    (2)第二种:等价于第一种(第一种书写更简单)
        $(document).ready(function(){
                代码体...
        })

面试题:
    jQuery 入口函数与 JavaScript 入口函数的区别:
             jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
             JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

三、JavaScript和jQuery方法之间的互相转换:

   1. js 方法 转化成 jq 获取 (使用$美元符)
            /*方法一*/     /*[index]:中括号*/
                alert($(document.getElementsByClassName("box")[0]).attr("name"));     //用jquery的attr方法获取下标为0,class名为.box的name属性

   2.  jq 方法 转化成 js 获取
            /*方法一*/        /*[index]:中括号*/
                alert($(".box")[0].getAttribute("name"));        //用js的原生方法getAttribute方法获取下标为0,class名为.box的name属性
            /*方法二*/         /*get(0)方法*/
                alert($(".box").get(0).getAttribute("name"));     //用js的原生方法getAttribute方法获取下标为0,class名为.box的name属性

四、jQuery中$美元符的作用:(常见的用法)

    1.  将js方法转换成jQuery方法: $(JS的选择器)
        eg:$(document.getElementsByClassName("box")[0]).attr("name")
        注释:上述写法就是将JS获取的元素,通过$()的方式转换成jQuery的选择器,从而使用jQuery的attr()属性操作。
    2.  当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行:jQuery(callback):
        eg: $(function(){  })
        //以上代码和下面的效果是一样的
        $(document).ready(function(){
                  ...//代码
         })
    3.  用所提供的html代码创建DOM元素 : jQuery(html)|
        eg:$('<div>这是用jq方法创建的一个div,用appendTo将这个div动态添加到body里</div>').appendTo('body');
    4.  如果传入一个DOM元素或者是DOM元素的数组,则把DOM元素封装到jQuery对象中并返回。
        eg: // 传入DOM元素,
        $('li').each(function(){
            $(ele).on('click',function(){
                $(this).css('background','red');        //这里的DOM元素就是this
                 })
         })
    5. 当传进去的参数是一个jQuery对象的时候,则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素
        eg:var  aLi=$('li');
             var  copyLi=$(aLi);         //创建一个aLi的副本
             console.log(aLi);
             console.log(copyLi);
             console.log(copyLi===aLi);

上一篇下一篇

猜你喜欢

热点阅读