JavaWeb--快速入门jQuery(一)

简介: JavaWeb--快速入门jQuery(一)

一、jQuery介绍



什么是jQuery ?

jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。


jQuery核心思想!!!它的核心思想是write less, do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。


jQuery流行程度

jQuery现在已经成为最流行的JavaScript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。


jQuery好处!!!

jQuery是免费、开源的,jQuery 的语法设计可以使开发更加便捷,例如操作文格对象、选择DoOM元素、制作动画效果、事件处理、使用,Ajax 以及其他功能


二、初试jQuery



使用 jQuery 给一个按钮绑定单击事件


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script type="text/javascript" src="../Demo/script/jquery-1.7.2.js"></script>
  <script type="text/javascript">
  // window.onload = function () {
  //  var btnObj = document.getElementById("btnId");
  //  // alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom对象
  //  btnObj.onclick = function () {
  //    alert("js 原生的单击事件");
  //  }
  // }
  $(function () { // 表示页面加载完成 之后,相当 window.onload = function () {}
    var $btnObj = $("#btnId"); // 表示按id查询标签对象
    $btnObj.click(function () { // 绑定单击事件
    alert("jQuery 的单击事件");
    });
  });
  </script>
</head>
<body>
  <button id="btnId">SayHello</button>
</body>
</html>


常见问题

1、使用 jQuery 一定要引入 jQuery 库吗?


是,必须


2、jQuery 中的$到底是什么?


它是一个函数


3、怎么为按钮添加点击响应函数的?


1、使用 jQuery 查询到标签对象


2、使用标签对象.click( function(){} )


三、jQuery 核心函数



$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。( ) 就 是 调 用 ()就是调用()就是调用这个函数


1.传入参数为[函数]时:


在文档加载完成后执行这个函数。相当于 window.onload = function(){}


2.传入参数为[HTML字符串]时:


根据这个字符串创建元素节点对象


3.传入参数为[选择器字符串]时:


根据这个字符串查找元素节点对象


${"#id属性值"},id选择器,根据id查询标签对象


$(“标签名”); 标签名选择器,根据指定的标签名查询标签对象


$(“.class 属性值”); 类型选择器,可以根据 class 属性查询标签对象


4.传入参数为[DOM对象]时:


将DOM对象包装为jQuery对象返回


四、jQuery对象和dom对象的区别



什么是 jQuery 对象,什么是 dom 对象

Dom 对象

1.通过 getElementById()查询出来的标签对象是 Dom 对象


2.通过 getElementsByName()查询出来的标签对象是 Dom 对象


3.通过 getElementsByTagName()查询出来的标签对象是 Dom 对象


4.通过 createElement() 方法创建的对象,是 Dom对象


Dom 对象 DOM 对象 Alert 出来的效果是:[object HTML 标签名Element]


jQuery 对象

通过 JQuery 提供的 API 创建的对象,是 JQuery 对象


通过 JQuery 包装的 Dom 对象,也是 JQuery 对象


通过 JQuery 提供的 API 查询到的对象,是 JQuery 对象


jQuery 对象 Alert 出来的效果是:[object Object]


jQuery 对象的本质是什么?

jQuery对象是dom对象的数组+jQuery提供的一系列功能函数


prototype 原型


image.png


jQuery对象和Dom对象使用区别

jQuery对象不能使用DOM对象的属性和方法


DOM对象也不能使用jQuery对象的属性和方法


// Dom对象的方法
document.getElementById("testDiv").innerHTML = "这是dom对象的属性InnerHTML";
// jQuery对象也不能用Dom对象的方法
$("#testDiv").innerHTML = "这是dom对象的属性InnerHTML";//不能用
$("#testDiv").click(function () {
   alert("click()是jQuery对象的方法");
});
document.getElementById("testDiv").click(function () {
   alert("click()是jQuery对象的方法");
});//不能用


Dom 对象和 jQuery 对象互转

dom转jQuery


alert( $(document.getElementById("testDiv")) );


image.png


jQuery转dom


alert( $(document.getElementById("testDiv"))[0]);


image.png

image.png

相关文章
|
6月前
|
JavaScript 前端开发 开发者
jQuery 下载与快速入门指南
jQuery 下载与快速入门指南
277 0
|
7月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(2)
jQuery操作元素或节点的方法 添加:append(),appendTo(),prepend(),after(),before() 删除:remove(),empty() 复制:clone(true)
53 5
|
7月前
|
JSON JavaScript 前端开发
javaweb实训第二天上午——jQuery笔记(3)
JSON格式数据 JSON格式数据概述
67 0
|
7月前
|
JavaScript
|
JavaScript
JavaWeb JQuery操作结点
JavaWeb——JQuery内容补充 JQuery操作DOM。
49 0
|
JavaScript 前端开发 数据安全/隐私保护
JavaWeb 速通JQuery
JavaWeb——JQuery 内容分享。
56 0
|
设计模式 JavaScript 前端开发
【JavaWeb】 JavaScript 开发利器之 jQuery
封装和抽象:jQuery库封装了一系列常见的DOM操作、事件处理、Ajax请求等功能,以简化开发人员的工作。它对底层的JavaScript操作进行了封装和抽象,提供了更简洁、易用的接口。 选择器引擎:jQuery库通过自定义的选择器引擎,可以使用CSS选择器来选择HTML元素。这使得开发人员能够方便地操作DOM元素,而不需要繁琐地编写原生的JavaScript代码。 链式调用:jQuery库采用链式调用的设计模式,使得可以对选择的元素进行连续的操作。通过返回相同的jQuery对象,可以在同一行代码中依次调用多个方法,提高开发效率和代码可读性。
|
JavaScript 前端开发 API
|
设计模式 JavaScript 前端开发
|
XML JavaScript 前端开发
【jQuery超快速入门教程】上篇
【jQuery超快速入门教程】上篇
128 0