jQuery学习笔记

最新推荐文章于 2024-07-25 22:24:14 发布

jedi-knight

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量54

点赞数

分类专栏：库文章标签： jquery 学习 javascript

本文链接：https://blog.csdn.net/weixin_43325228/article/details/125702658

版权

库专栏收录该内容

24 篇文章 3 订阅

订阅专栏

安装

jQuery的下载地址为https://jquery.com/download/

html中的引用方式为

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

打开html，在浏览器的控制台输入$.fn.jquery命令即可检查jQuery的版本

基本语法

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

$()符号表示选择器，选择器中的.表示类别class，选择器中的#表示id

以下代码表示DOM加载完成之后的事件,所有jQuery代码应该写在该函数以内

$(document).ready(function(){
   // 开始写 jQuery 代码...
});

鼠标点击事件

$("p").click();

效果

元素的隐藏和显示:

$("p").hide(speed,callback);
$("p").show(speed,callback);
$("p").toggle(speed,callback);

speed的单位是毫秒,callback是回调函数
淡入淡出 :

$("p").fadeIn(speed,callback);
$("p").fadeOut(speed,callback);
$("p").fadeToggle(speed,callback);
$("p").fadeTo(speed,opacity,callback);

下滑上滑:

$("p").slideDown(speed,callback);
$("p").slideUp(speed,callback);
$("p").slideToggle(speed,callback);

jQuery链

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

方法

text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容（包括 HTML 标记）
val()设置或返回表单字段的值
attr()获取属性值

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

AJAX
加载文件并放入元素

$("#div1").load("demo_test.txt");

GET

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

POST

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

jedi-knight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery学习笔记

jQuery学习笔记
复制链接

扫一扫

专栏目录