jQuery简介-01

异步请求局部刷新

架构

技术栈

执行过程

jQuery简介

什么是jQuery

jQuery的语法

jQuery的优势

jQuery的使用

文档就绪事件

测试

总结

异步请求局部刷新

jQuery简介

什么是jQuery

jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery的核心思想："写的更少，但做的更多"

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

jQuery** 库包含以下功能：**

HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

jQuery的语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法是：$(selector).action()

$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery的优势

1,简化了js的写法，用$替代了document.getXxx()

2,可以像CSS选择器一样非常方便的获取元素

3,可以通过修改css样式控制页面的效果

var ele = document.getElementById("username");            //js
var ele = $("#username");                        // jQueryvar ele = document.getElementsByTagName("p");   //js
var ele = $("p");                                //jQueryvar ele = document.getElementsByName("username");        //js
var ele = $('input[name="username"]');        // jQueryvar ele = document.getElementsByClassName("info");      //js
var ele = $(".info");                            // jQuery$("div").css("background", "red");
$("div").css({"background" : "blue","border" : "2px solid red","font-size" : "30px"
});

jQuery的使用

jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。

<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>

文档就绪事件

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

测试

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jq</title><!-- 引入jQuery文件 --><script src="jquery-1.8.3.min.js"></script><!-- 嵌入js代码 --><script>// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题// var a = document.getElementById("p1");
// alert(a); //null// alert(a.innerHTML);// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行//jQuery语法:$(选择器).action{ } ;$(document).ready(function(){var a = document.getElementById("p1");alert(a.innerHTML);});// 方式3: 简写$(function(){var a = document.getElementById("p1");alert(a.innerHTML);});</script></head><body><h1 id="p1">文档就绪</h1></body>
</html>

总结

什么时候该使用文档就绪事件函数？

如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！

将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！

jQuery简介-01相关推荐

JQuery简介选择器
JQuery简介&选择器文章目录 JQuery简介&选择器一.jquery介绍二.jquery加载三.jquery选择器 1.id选择器 2.类选择器 3.元素选择器 4.全选 ...
jQuery的简单了解和学习（1） jquery简介+语法+选择器+事件
jQuery jQuery简介 jQuery是一个Javascript函数库,可以让程序员写得少,而实现得多,主要包含以下功能:HTML元素的选取.操作:CSS操作:HTML事件函数:JavaScri ...
jQuery简介及选择器
一.jQuery简介 1.JS的onload事件只能实现一次,而且实现的是最后一次 2.jQ可以实现多次,按代码顺序实现 3.基本语法通过$ 符定义jQuery, $( 选择器 ) . 方法 ( ) ...
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery
目录一.jQuery简介二.引入jQuery 三.jQuery核心函数四.jQuery对象五.jQuery对象操作class 六.addClass补充七.jQuery对象复制一.jQuer ...
jQuery基础-01
jQuery基础-01 jQuery 1. 初识jQuery 1.1 使用JavaScript的方式去实现 1.2 使用jQuery的方式去实现 2. 什么是jQuery? 3. 使用的步骤 4. 版 ...
《锋利的jQuery》之jQuery简介
1.1 JavaScript简介 JavaScript的缺点: 复杂的文档对象模型(DOM), 不一致的浏览器实现, 缺乏便捷的开发.调试工具. Ajax(异步的JavaScript和XML)诞生,导 ...
jquery简介 each遍历 prop attr
一.JQ简介 jQuery是一个快速.简洁的JavaScript框架,它封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和 ...
jQuery 教程01——jQuery安装
1.简介 jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery ...
tomcat catalina localhost 没有项目_Tomcat简介--01
一.tomcat简介 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache,Sun和其他一些公司及个人共同开 ...

jQuery简介-01

异步请求局部刷新

架构

技术栈

执行过程

jQuery简介

什么是jQuery

jQuery的语法

jQuery的优势

jQuery的使用

文档就绪事件

测试

总结

jQuery简介-01相关推荐

最新文章

热门文章