为了账号安全,请及时绑定邮箱和手机立即绑定

jQuery基础

标签:
JQuery

1.简介
jQuery 库可以通过一行简单的标记被添加到网页中。

1)什么是 jQuery ?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

除此之外,Jquery还提供了大量的插件。

2)为什么使用 jQuery ?
jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

2.jQuery 安装

1)从 jquery.com 下载 jQuery 库
2)从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
如果您不希望下载并存放 jQuery
如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软

百度CDN:
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
又拍云 CDN:
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
新浪 CDN:
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
Google CDN:
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

使用百度、又拍云、新浪、谷歌或微软的 jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间

3.jQuery语法

基础语法: $(selector).action()

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p .test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery 使用的语法是 XPathCSS 选择器语法的组合。

jQuery 是一个 JavaScript 库。
jQuery 库包含以下特性:

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:

<head><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script></head>

<script> 标签应该位于页面的 <head> 部分。

基础 jQuery 实例

下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p>元素。

<html><head><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script><script type="text/javascript">$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

$()
$是jQuery的一个别称,$() 构造了一个jQuery对象。所以$()可以叫做jQuery的构造函数。

  1. $()可以是$(expresion),即css选择器、Xpath或html元素.

$("a").click(function(){...})
alert($("div>p").html());

$()中的是一个查询表达式.也就是用“div>p”这样一个查询表达式构建了一个jQuery对象,然后的“html()”意思是显示其html内容。

$("<div><p>Hello</p></div>").appendTo("body");

$()中的是一个字符串,用这样一段字串构建了jQuery对象,然后向<body/>中添加这一字串。

  1. $()可以是$(element),即一个特定的DOM元素.如常用的DOM对象有document、location、form等.

$(document).find("div>p").html());

$()中的document是一个DOM元素,即在全文寻找带<p>的<div>元素,并显示<p>中的内容。

注意:DOM

图片.png


HTML DOM 定义了访问和操作 HTML 文档的标准。

什么是 DOM?
DOM 是 W3C(万维网联盟)的标准。
DOM 定义了访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

DOM 是 Document Object Model(文档对象模型)的缩写。

  1. 用jQuery对象的几个方法(如方法find()、each()等)

$("#orderedlist).find("li")

就像 $("#orderedlist li"). each()一样迭代了所有的li

表达式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”


ztree是 jQuery 的.

注意:
js中不能加$() 这些表达式,可以加../这些相对路径。


注意:

图片.png

如果引入到哪儿,那么因该是引入到的地方的相对路径。


示例:

function change_page_size(this){        var v = $(this).val();   // 这个$(this)是拥有此方法的html元素
        $.cookie()
    }



作者:廖马儿
链接:https://www.jianshu.com/p/df48836f0eb2

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消