jquery教程笔记

作者: 寥子 | 来源:发表于2018-08-29 14:06 被阅读0次

基础语法

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

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实现文档就绪后执行 jQuery 方法

$(document).ready(function(){
//代码
});

或者

$(function(){
//代码
});

jquery选择器

jquery选择器基于元素的ID、类、类型、属性、属性值选择HTML元素（和css的选择器类似）
所有选择器以$()开头

元素选择器
$("p")选择所有<p>元素
id选择器
$("#test")选择所有id为test的元素
class选择器
$(".test")选择所有class为test的元素

jquery事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

$("p").click(function(){
    $(this).hide();
});

其中，$("p")选定p元素，.click()指定点击事件，function()定义事件触发后执行的代码。

jquery效果

<p>2333</p>
<button id="hide">hide</button>
<button id="show">show</button>

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

或者直接用toggle实现

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

显示/隐藏 show() hide() toggle()
淡入/淡出 fadeIn() fadeOut() fadeToggle()
渐变成给定的透明度 fadeTo("slow",0.7)
往下/上滑出来 slideDown() slideUp slideToggle()

动画 animate()
$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

$("button").click(function(){
    $("div").animate({
        left:'250px',
        opacity:'0.5',
        height:'150px',
        width:'200px'
    });
});

也可以使用相对值来定义
left:'+=150px'
甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
height:'toggle'
队列功能，多个animate()调用下，根据队列顺序来执行

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

停止动画 stop()

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

在段落隐藏后，调用回调函数，弹出提示框
如果不用回调函数，直接写在下面的话，就是弹出框和隐藏一起

链

链接（chaining）允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动

DOM操作

获取内容

<p>这是段落中的 <b>粗体</b> 文本。</p>

$("p").text()
//这是段落中的 粗体 文本。
$("p").html()
//这是段落中的 <b>粗体</b> 文本。

获取输入内容 val()

<input type="text" id="test">

$("#test").val()

获取属性的值 attr()

<a href="http://www.baidu.com" id="baidu">baidu</a>

$("#baidu").attr("href") 
//http://www.baidu.com

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

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

设置属性

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

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

$("p").append(" <b>追加文本</b>。");
$("p").prepend("在开头追加文本");

删除元素
remove()删除被选元素及其子元素，可以对北山元素进行过滤
$("p").remove(".italic");
empty()删除被选元素的子元素

设置CSS
添加class样式
$("body div:first").addClass("important blue");
删除class样式
$("h1,h2,p").removeClass("blue");
添加/删除轮流来
$("h1,h2,p").toggleClass("blue");
css方法
返回CSS属性值

$("p").css("background-color");
将返回**首个**匹配元素的background-color的值

设置CSS属性：

$("p").css("background-color","yellow");
将为**所有**匹配的元素设置background-color的值为yellow

设置多个CSS属性：
$("p").css({"background-color":"yellow","font-size":"200%"});

jquery尺寸

width()--content
height()--content
innerWidth()--content+padding
innerHeight()--content+padding
outerWidth()--content+padding+border
outerHeight()--content+padding+border

遍历

parent()
返回被选元素的直接父元素。
$("span").parent();
返回每个<span>元素的直接父元素
parents()
返回备选元素的所有祖先元素
也可以使用参数来过滤对祖先元素的搜索
$("span").parents("ul");
只返回<span>元素的ul祖先
parentsUntil()
返回介于两个元素之间的所有元素
$("span").parentsUntil("div");
children()
返回被选元素的所有直接子元素
find()
返回被选元素的所有后代元素
siblings()
返回被选元素的所有同胞元素
同胞元素：拥有相同的父元素的元素们
next(), prev()
返回被选元素的下一个/上一个同胞元素
nextAll(), prevAll()
返回被选元素的所有的后面的/前面的同胞元素
nextUntil(), prevUntil()
返回介于两个元素之间的所有同胞元素

-过滤

first()
返回首个
last()
返回最后一个
eq()
返回被选元素的中带有指定索引号（从0开始）
$("p").eq(1);取第2个p元素
filter()
匹配某标准的元素会被返回
$("p").filter(".url");返回带有类名url的所有p元素
not()
返回不匹配标准的元素

jquery AJAX

load()
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称
把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：
$("#div1").load("demo_test.txt");
把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

$.get()
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名

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

从demo_test.php中取回数据，函数然后触发回调

$.post()
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名

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

网友评论

本文标题：jquery教程笔记

本文链接：https://www.haomeiwen.com/subject/dwwhwftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！