jQuery学习记录

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

js 专栏收录该内容

2 篇文章

订阅专栏

学习参考：菜鸟教程

安装：

从官网下载
从CDN中载入jQuery

下载jQuery：
这里写图片描述
上面一个是精简压缩版本的，用于实际网站开发；
下面这个是可读代码，没有压缩，用于测试和开发

CDN各种版本介绍参考：
菜鸟教程之jQuery安装

语法

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

//文档就绪事件：
$(document).ready(function(){
    //your jQuery code here
});

文档就绪事件:
为了防止文档在完全加载之前运行jQuery代码，比如：
试图隐藏一个不存在的元素；
获得未完全加载的图像的大小

//文档就绪事件简单写法：
$(function(){
    //your jQuery code here
});

jQuery 选择器
选择的范围很广，比如：标签、类、id等，直接上一段代码

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

jQuery 事件

什么是事件？
鼠标事件、键盘事件、表单事件、文档/窗口事件

//鼠标点击某个p元素的时候，隐藏当前p元素
$("p").click(function(){
  $(this).hide();
});

菜鸟教程-不同事件的例子

jQuery效果

隐藏、显示
淡入淡出
滑动
动画（具有队列功能，队列里面的动画按顺序执行）
停止动画（在动画或效果完成之前对他们进行停止）
Callback 方法：只有在使用回调函数的时候才能是在效果完全实现之后才调用回调函数
jQuery 方法链接：允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条，使得浏览器不用多次查找相同的元素

jQuery HTML

DOM: Document Object Model

//获得内容：text(),html(),val()
text():设置或是返回所选元素的文本内容
html():设置或是返回所选元素的内容
val()：设置或返回表单字段的值
attr()：获取属性值

//设置内容和属性
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});

//添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

//删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

//jQuery操作CSS
//jQuery处理多种尺寸的方法

jQuery遍历
jQuery拥有遍历整个DOM树结构的方法，同时拥有过滤的功能，让我们能够轻松操作DOM

jQuery noConflict() 方法

该方法解决的问题：目前有很多JS框架，其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery AJAX
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

这里面做了一个测试：
让html读取本地文件内容，并展示到网页上。

tip：
我的电脑上面装了wamp服务器，并且单独安装了Mysql，由于wamp中封装了Mysql，两者有冲突，单独使用wamp的时候可以先在任务管理器里面将Mysql的服务关掉。

在wamp的www文件夹里面创建demo文件夹：
这里写图片描述

//ajaxTest.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").load("./data/aaa.txt");
            })
        })
    </script>
</head>
<body>
    <div id="div1">Hi</div>
    <button>get information</button>
</body>
</html>