一、jQuery好处：

①写得少，做的多

②链式编程

③隐式迭代

④解决兼容性问题

二、顶级对象

Dom中的顶级对象：document------>页面中的顶级对象

document.点出来的是Dom中的属性和方法

Bom中的顶级对象：window-------->浏览器中的顶级对象

window.点出来的是浏览器的属性和方法，window.document也可以点出来，document也属于window

jQuery中的顶级对象：jQuery------>$

$点出来的是jQuery中的方法

三、加载事件

页面加载事件有如下几种写法：

A.window.onload=function(){ } ------>JS中页面加载事件，只能写一次，如果写多个，后面的会把前面的覆盖

B.$(window).load( function(){ } )------>jQuery页面的加载事件，与A中代码作用相同，可以写多个

上述A和B两种页面加载方式，是页面中所有内容加载完毕后才触发，加载内容指的是：标签、文本内容、图片......等

C.$( document ).ready( function(){ });------>jQuery页面的加载事件

C方法比A和B方法的执行速度快很多，因为C的执行逻辑是把页面的基本标签加载完毕后就可以触发了。

C也可以写作  $( function(){ })

四、jQuery中引入文件注意问题

先引入文件，然后再使用，开发的时候引入正常的jQuery文件和压缩版的文件都没有问题

建议：开发引入普通版文件，上线后使用压缩版。

五、jQuery元素与DOM元素的互换

（一）为什么Jquery对象和DOM对象要互转？

　　　　DOM对象转Jquery对象操作方便,毕竟Jquery中方法都是封装好了的,而且兼容问题解决的很好,代码少,方便.

Jquery对象转DOM对象,因为Jquery中文件一直在更新，很多东西都是随着使用而进行封装和升级,不太可能把所有dom中用到的进行封装,还有很多未知的兼容问题没有封装进去,所以,有的时候jquery中不能解决的问题,还需要原生的js代码来解决,所以,jquery对象有的时候需要转成dom对象来进行。

（二）Jquery对象和DOM对象怎么转换？

dom对象---------->Jquery对象

　　　　　　$(dom对象)

Jquery对象---------->dom对象

　　　　　　$(“#btn“)[0]

　　　　　　$(“#btn“).get(0)

六、开关灯示例

示例要求：点击按钮开关，网页实现开灯关灯效果

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>网页开关灯</title>

         <!-- JS效果 -->

         <script type="text/javascript">

 //             window.onload=function(){

 //                 var btn=document.getElementById('btn');

 //                 btn.onclick=function(){

 //                     //首先判断按钮是开灯还是关灯

 //                     if(this.value=="开灯"){

 //                         this.value="关灯";

 //                         document.getElementsByTagName("body")[0].style.backgroundColor="white";

 //                     }else{

 //                         this.value="开灯";

 //                         document.getElementsByTagName("body")[0].style.backgroundColor="black";

 //                     }

 //                 }

 //             }

         </script>

         <!-- Jquery效果 -->

         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             $(function(){

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

                     if($(this).val()=="关灯"){

                         //.val()方法---->获取按钮的value属性的值

                         //.val("内容");---->设置按钮的value属性的值

                         $(this).val("开灯");

                         $("body").css("backgroundColor","black");

                     }else{

                         $(this).val("关灯");

                         $("body").css("backgroundColor","white");

                     }

                 });

             })

         </script>

     </head>

     <body>

         <input type="button"  id="btn" value="关灯" />

     </body>

 </html>

 

jQuery----初识jQuery的更多相关文章

  1. JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

  2. （李南江jQuery+Ajax）第一章：初识jQuery

    第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...

  3. jQuery初识、函数、对象

    初识jQuery 官方地址:http://jquery.com/ what:一个优秀的JS函数库(封装了BOM.DOM(主要)) why: HTML元素选取(选择器) HTML元素操作 CSS操作 H ...

  4. 前端---JQuery初识

    ---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.javascript基础部分包括三个部分: ECMAScript:JavaScript的语法标准 ...

  5. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  6. 初识JQuery（1）-选择器

    初识jquery 在学习jquery之前,就有看过一些相关的视频,才知道它是可以写很少的代码就可以完成很多事的.记得第一写轮播图的时候,首先就百度了篇轮播图的实现,当时还不知道自己百度的其实不是原生的 ...

  7. 前端07 /jQuery初识

    前端07 /jQuery初识 目录 前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...

  8. JavaScript交互式网页设计 • 【第6章 初识jQuery】

    全部章节   >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...

  9. 初识jQuery(适合初学者哟.........)

     您要知道!! jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库. 微软公司甚至把jQuery作为他们的官方库.对 ...

  10. jQuery基础学习(一)—jQuery初识

    一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...

随机推荐

  1. zookeeper应用 - 监控

    服务器端:监听zk上父节点的子节点变化 package monitor; import java.util.List; import java.util.concurrent.CountDownLat ...

  2. 使用 Azure CLI 创建 Linux 虚拟机

    Azure CLI 用于从命令行或脚本创建和管理 Azure 资源. 本指南详细介绍了如何使用 Azure CLI 部署运行 Ubuntu 服务器的虚拟机. 服务器部署以后,将创建 SSH 连接,并且 ...

  3. Oracle DB 12.2(12cR2)的一个新特性:硬解析失败的SQL语句(需要符合一定条件)打印到alert_sid.log中.

    How to Identify Hard Parse Failures (Doc ID 1353015.1)Bug 16945190 - Diagnostic enhancement to dump ...

  4. 数据库对比：选择MariaDB还是MySQL？

    作者 | EverSQL 译者 | 无明 这篇文章的目的主要是比较 MySQL 和 MariaDB 之间的主要相似点和不同点.我们将从性能.安全性和主要功能方面对这两个数据库展开对比,并列出在选择数据 ...

  5. 将CAGradientLayer用作maskView的遮罩图层

    将CAGradientLayer用作maskView的遮罩图层 说明 CAGradientLayer可以用作alpha遮罩,供maskView使用,这两种东西都是非常偏门的东西,但是,偏门不代表功能不 ...

  6. 执行一条sql语句update多条记录实现思路

    如果你想更新多行数据,并且每行记录的各字段值都是各不一样,你会怎么办呢?本文以一个示例向大家讲解下如何实现如标题所示的情况,有此需求的朋友可以了解下 通常情况下,我们会使用以下SQL语句来更新字段值: ...

  7. mysql8.0 安装

    之前一直使用的是zabbix3.4和mariadb5.5;感觉良好!!!但是...因其他原因需要重新部署 这次规划使用zabbix4.0和mysql8.0结合使用:嗯~~应该不会错吧!!! zabbi ...

  8. 使用Ajax无刷新页面登录

    <script> window.onload = function () { var myname = document.getElementById("uname") ...

  9. 使用 Bulk Copy 将大量数据复制到数据库

    如果一次要向数据库服务器提交多条记录 , 通常会执行多次Insert命令 , 这样就为要插入的每个记录执行一次与数据库服务器的往返 , 这就给服务器增加了压力 , 效率也大大的降低了... .Net  ...

  10. 洛谷 P4012 深海机器人问题【费用流】

    题目链接:https://www.luogu.org/problemnew/show/P4012 洛谷 P4012 深海机器人问题 输入输出样例 输入样例#1: 1 1 2 2 1 2 3 4 5 6 ...