首页 > 其他分享 >JQuery基础系统一:简介

JQuery基础系统一:简介

时间:2023-10-09 13:24:05浏览次数:37  
标签:JQuery jQuery DOM 对象 简介 系统 JS var cr

jQuery API 中文文档:

https://www.jquery123.com/

jQuery Mobile 菜鸟教程:
http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html

更多内容参考Github:

https://github.com/summerSongXia/summerProject/tree/master/JQuery

1. Javascript简介

1.1 JS的3个弊端:复杂的文档对象模型(DOM),不一致的浏览器实现和便捷的开发,调试工具的匮乏
1.2 为了简化JS的开发,一些JS程序库就诞生了,大部分的JS程序库都是封装了很多预定义的对象和实用函数,快捷开发并兼容各大浏览器
1.3 一些JS程序库:Prototype,Dojo,YUI,Ext JS,Moo Tools,JQuery库:轻量级,拥有强大的选择器,出色的DOM操作,可靠的事件处理,完善的兼容性,链式操作等功能

2. JQuery优势

2.1 轻量级:主要是采用UglifyJS压缩
2.2 强大的选择器:允许使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而复杂的选择器,另外还允许加入插件支持XPath选择器
2.3 出色的DOM操作的封装
2.4 可靠的事件处理机制
2.5 完善的Ajax:JQuery将所有的Ajax操作封装到一个函数$.ajax()里面,可以是开发者专心处理业务逻辑,无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用、
2.6 不污染顶级变量:jQuery只建立一个名为jQuery的对象,其所有的函数方法都是在这个对象之下。其别名$也可以随时交出控制权,不会污染其他的对象。这个特性使得jQuery可以与其他JS库共存。
2.7 出色的浏览器兼容性
2.8 链式操作方式:即对于发生在同一个jQuery对象上的一组操作,可以直接连写而不用重复获取对象
2.9 隐式迭代:当用jQuery找到带有.myClass类的全部元素,可以将他们直接全部隐藏,而不用循环遍历每一个返回的元素
2.10 行为层和结构层的分离
2.11 丰富的插件支持
2.12 完善的文档
2.13 开源

3. 配置jQuery环境

  官网下载:http://jquery.com/

  jquery.js 是开发版,主要用于测试、学习和开发

  jquery.min.js 是生产版,是经过工具压缩或经过服务器开启Gzip压缩过的,主要用于产品和项目

  一般是直接在head中直接引入:

4. 一般的代码风格

4.1
    $("#foo")等价于 jQuery("#foo")  $是jQuery的简写
4.2
 $(document).ready(function () { }) 等价于 $(function() {})
4.2 链式操作风格:

    $(this).addClass('active') //给当前元素添加 active类

    .next().show() //下一个元素显示

    .parent().sibliings().children('a').removeClass('active') //父元素的同胞元素的子元素a移除类active

    .next().hide() //他们的下一个元素隐藏

    对于同一个对象,不超过3个操作的,可以写在一行:$('li').show().unbind('click');

    对于同一个对象的多个操作,建议每一行写一个操作

    对于多个对象的少量操作,可以让每个对象写一行  

5. window.onload()与$(document).ready()区别

5.1 执行时机不同:window.onload()必须等待网页中所有的内容(包括图片)加载完毕以后,才可以执行;$(document).ready()是网页中所有的DOM结构绘制完毕就可以执行,可能DOM元素关联的东西并没有加载完毕
5.2 编写个数不同:window.onload()不可以编写多个;$(document).ready()可以同时编写多个

6. jQuery对象和DOM对象

6.1 DOM对象:DOM(文档对象模型),每一份DOM都可以表示成一棵树,在DOM树中,每个子节点都是DOM元素。可以通过JS的getElementById或getElementByTagName来获取元素节点,像这样得到的DOM元素就是DOM对象

  获取DOM对象:var domObj=document.getElementById("id")

6.2 jQuery对象:是通过jQuery包装DOM对象之后产生的对象
6.3 如果获取的对象是jQuery对象,在变量名前加$ var $varibal=jQuery对象;如果获取的是DOM对象,var varibal=DOM对象

7. jQuery对象和DOM对象的相互转换

7.1 jQuery对象转换为DOM对象

    方法一:jQuery对象是一个类似数组的对象,因此可以通过[index]的方法得到相应的DOM对象

    var $cr=$('#cr') //jQuery对象

    var cr=$cr[0] //DOM对象

    方法二:是jQuery本身提供的,通过get(index)方法得到相应的DOM对象

    var $cr=$('#cr') //jQuery对象

    var cr=$cr.get(0) //DOM对象

7.2 DOM对象转换为jQuery对象:对于一个DOM对象,只需使用$()将其包裹起来,就可以转换为jQuery对象了

    var cr=document.getElementByTd('id') //DOM对象

    var $cr=$(cr);

7.3 备注:DOM对象才可以使用DOM中的方法,jQuery对象不可以使用DOM对象中的方法

8. 其他

  is(":checked")是jQuery中的方法,判断jQuery对象是否被选中,返回boolean值

标签:JQuery,jQuery,DOM,对象,简介,系统,JS,var,cr
From: https://www.cnblogs.com/songxia/p/17751490.html

相关文章

  • jquery之each遍历
    jQuery的each和原生的JavaScript方法forEach原生的JavaScript方法forEach是EcmaScript5提供的不兼容IE8jQuery的each由jQuery这个第三方库提供jQuery2以下的版本是兼容IE8的它的each方法主要用来遍历jQuery实例对象(伪数组)同时它也可以作为......
  • 十天学完基础数据结构-第二天(数据结构简介)
    什么是数据结构?在计算机科学中,数据结构是一种组织和存储数据的方式。它定义了数据的布局,以及对这些数据执行的操作。你可以把数据结构看作是计算机内存中的特定组织方式,就像图书馆中书籍的排列一样。数据结构可以是各种形式,包括数组、链表、栈、队列、树、图等等。每种数据结构都有......
  • 全场景流量验证系统 | 京东物流技术团队
    本文介绍了一种基于线上流量实现对重构系统进行功能和性能验证的实践方案。针对线上流量如何拦截、如何录制、如何存储、如何回放以及如何发压均作了详细说明,为具有类似需求的读者提供了一种可供参考的思路。1业务背景随着百川项目的启动,中台需要对订单流量收口,将ECLP、各BP的接单......
  • 视频融合平台EasyCVR利用视频监控系统构建小区人员出入口管理方案
    安防视频监控平台EasyCVR是一个具有强大拓展性、灵活的视频能力和轻便部署的平台。它支持多种主流标准协议,包括国标GB28181、RTSP/Onvif、RTMP等,还可以支持厂家的私有协议和SDK接入,例如海康Ehome、海大宇等设备的SDK。该平台不仅拥有传统安防视频监控的功能,还具备接入AI智能分析的......
  • SpringBoot+RabbitMQ+Redis 开发一个秒杀系统,细节打满(附源码)
    一、简易版秒杀SeckillProject系统简介开发技术二、实现细节记录1、用户密码两次MD5加密2、分布式session维持会话3、异常统一处理4、页面缓存+对象缓存5、页面静态化6、内存标记+Redis预减库存+RabbitMQ异步处理7、解决超卖8、接口限流三、效果展......
  • 监控汇聚/视频监控系统EasyNVRAI智能分析网关:持刀检测算法场景汇总
    安防视频监控平台EasyCVR是一个具有强大拓展性、灵活的视频能力和轻便部署的平台。它支持多种主流标准协议,包括国标GB28181、RTSP/Onvif、RTMP等,还可以支持厂家的私有协议和SDK接入,例如海康Ehome、海大宇等设备的SDK。该平台不仅拥有传统安防视频监控的功能,还具备接入AI智能分析的......
  • 视频监控/监控汇聚系统EasyCVR网络监控设计思路
    安防视频监控平台EasyCVR是一个具有强大拓展性、灵活的视频能力和轻便部署的平台。它支持多种主流标准协议,包括国标GB28181、RTSP/Onvif、RTMP等,还可以支持厂家的私有协议和SDK接入,例如海康Ehome、海大宇等设备的SDK。该平台不仅拥有传统安防视频监控的功能,还具备接入AI智能分析的......
  • 全场景流量验证系统
    本文介绍了一种基于线上流量实现对重构系统进行功能和性能验证的实践方案。针对线上流量如何拦截、如何录制、如何存储、如何回放以及如何发压均作了详细说明,为具有类似需求的读者提供了一种可供参考的思路。1业务背景随着百川项目的启动,中台需要对订单流量收口,将ECLP、各BP的......
  • 视频监控/监控汇聚系统EasyCVR网络视频监控系统详细解决方案
    数字化技术在安防领域的广泛应用:无线网络通信技术和计算机技术的快速发展已经推动了数字化技术在安防领域的广泛应用,特别是在公安等重要执法部门。网络化的联网监控需求越来越大。传统视频监控系统的局限性:传统视频监控系统只能进行现场监视,并且报警信息传输简单,不能远距离传输视......
  • 图文结合丨Prometheus+Grafana+GreatSQL性能监控系统搭建指南(上)
    一、环境介绍本文环境,以及本文所采用数据库为GreatSQL8.0.32-24$cat/etc/system-releaseRedHatEnterpriseLinuxServerrelease7.9(Maipo)$uname-aLinuxgip3.10.0-1160.el7.x86_64#1SMPTueAug1814:50:17EDT2020x86_64x86_64x86_64GNU/Linux$ldd--......