您的位置：首页 > Web前端 > JQuery

jQuery学习记录

2017-01-07 21:36 190 查看
学习参考：菜鸟教程

安装：

从官网下载

从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>


// data/aaa.txt

Hello Snow~~~


运行结果：



点击按钮之后：



测试成功啦~~

至此，入门结束，耶
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航