jQuery学习

最新推荐文章于 2024-10-10 22:10:24 发布

暮w光

最新推荐文章于 2024-10-10 22:10:24 发布

阅读量100

点赞数

分类专栏：前端文章标签： jquery html javascript

本文链接：https://blog.csdn.net/qi_SJQ_/article/details/119880330

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.jquery概念：

jQuery 库可以通过一行简单的标记被添加到网页中。
在这里插入图片描述

2.语法：

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

在这里插入图片描述
$符号开头，括号内为选择的元素，"."后为执行的操作。

3.jquery与javascript入口函数：

在这里插入图片描述

4.jquery选择器：

基于css选择器（我不太了解：https://www.runoob.com/cssref/css-selectors.html），还有一些自定义的。

选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

5.jquery各种效果：

就是利用各种事件、函数、css实现。
略

6.jquery链（Chaining）：

实现在一条语句中运行多个 jQuery 方法（在相同的元素上）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });//换行其实也可以，语法没那么严格
});
</script>
</head>
<body>

<p id="p1">菜鸟教程!!</p>
<button>点我</button>

</body>
</html>

7.jquery html（DOM）操作：

获得/设置内容 - text()、html() 以及 val()；
获取/设置属性 - attr()；
添加元素-append()、prepend()、after()、before()；
删除元素-remove()、empty()；
获取并设置 CSS 类-addClass()、removeClass()、toggleClass()、css()

8.jQuery 尺寸：

处理元素和浏览器窗口的尺寸。

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

请添加图片描述

9.jquery遍历：

各种实例见：https://www.runoob.com/jquery/jquery-traversing.html

1）遍历祖先：

parent()
parents()
parentsUntil()

2）遍历后代：

children()
find()

3）遍历同胞：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

4）遍历过滤：

first()
last()
eq()
filter()
not()

10.jQuery 与AJAX：

1）ajax概念：

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。即AJAX 通过后台加载数据，并在网页上进行显示。

应用程序案例：谷歌地图、腾讯微博、优酷视频等等。
2）jquet与ajax：
jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

3）load方法：
语法:

$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

实例：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

function(responseTxt,statusTxt,xhr)即callback参数规定的回调函数，回调函数的三个参数值：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

4）get() 和 post() 方法：

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

https://www.runoob.com/jquery/jquery-ajax-get-post.html

11.jquery与其他js框架：

为避免jquery与其他js框架同时运行而都已“$”作为简写时引起的冲突，提供了解决方法：noConflict() 方法。

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

12.参考：

jQuery 动态粒子效果
 实例
 参考手册
 插件
 jQueyUI

暮w光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录