jQuery知识点总结,什么是jquery?它的特点?

分类 : 语言编程

一、什么是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);



作者:进入web前端
链接:https://www.jianshu.com/p/da923f63e13f
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。


分类: 语言编程  发布: 2019-07-10-星期三   访问() .NET技术    Web前端    JAVA开发    语言编程    数据库    电脑知识    代码案例

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved