jQuery

语法

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏所有

    元素

  • $("p.test").hide() - 隐藏所有 class="test" 的

    元素

  • $("#test").hide() - 隐藏所有 id="test" 的元素
  • $(".test").hide()隐藏所有的class规定的元素
  • $("[href]")选取带有href属性的元素
  • 文档就绪事件
$(document).ready(function(){});

$(function(){});
  • 点击就会失踪
$(document).ready(function(){

  $("p").click(function(){

    $(this).hide();

  });

});

事件

  • click点击

  • dblclick双击

  • mouseenter鼠标移入

  • keypress

    统计按键的次数并显示在span元素中
    
i=0;
    
$(document).ready(function(){
    
  $("input").keypress(function(){
    
    $("span").text(i+=1);
    
  });
    
});

  • submit 提交 只适用于form元素

  • focus 选中input元素时

  • $("input").keydown(function (event) {
    
                $("div").html('Key: '+event.which);
    
            });
    
判断具体是哪个键，回车的数字键是13
    

//demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

    <title>Title</title>

    <script>

        $(function () {

            $("p").click(function () {

                $(this).hide();

            });

            $("h1").mouseenter(function () {

               //alert('fuck');

            });

            $("input").keydown(function (event) {

                $("div").html('Key: '+event.which);

            });

        })

    </script>

</head>

<body>

    <p>竹林的故事</p>

    <p id="mark">5.0</p>

    <p class="123">123类</p>

    <h1>移过来</h1>

    <input type="text">

    <div></div>

</body>

</html>

效果

  • hide

  • show

  • $(selector).hide(speed,callback);
    
$(selector).show(speed,callback);
    
speed可以取值slow或者fast，也可以是数字比如1000

  • toggle 先隐藏，再点击再显示

  • fadeIn 淡入

  • fadeOut 淡出

  • fadeToggle

  • fadeTo 颜色变淡

  • slideDown

  • slideUp

  • slideToggle

动画

  • 默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。

    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

  • div.animate({left:'100px'},"slow");//修改位置
    
div.animate({fontSize:'3em'},"slow");//修改字体
    
div.animate({width:'100px',opacity:'0.8'},"slow");//修改高度和颜色深浅

  • stop 停止动画

  • 下滑面板https://www.runoob.com/try/try.php?filename=tryjquery_slide_down

DOM

  • text() html() var()

  • $("#runoob").attr("href") 获取属性

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

  • 回调函数举例

    $("#btn2").click(function(){
    
    $("#test2").html(function(i,origText){
    
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
    
    });
    
});
    
$("button").click(function(){
    
  $("#runoob").attr("href", function(i,origValue){
    
    return origValue + "/jquery";
    
  });
    
});

  • input里面不是text，而是val()

  • 添加文本和列表项

      $("#btn1").click(function(){
    
    $("p").append(" <b>追加文本</b>。");
    
  });

  $("#btn2").click(function(){
    
    $("ol").append("<li>追加列表项</li>");
    
  });

  • prepend()在开头处追加内容

  • 三种追加文本的方法

    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);        // 追加新元素

  • before() after() 在之前之后插入文本

  • remove()删除元素

  • empty()清空元素的内容而不是删除之

  • $("p").remove(".italic"); 删除class="italic"的元素

  • $("p").css("background-color","yellow"); 改变颜色

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

  • 往div里面输入文本https://www.runoob.com/try/try.php?filename=tryjquery_dim_width_height

jQuery遍历

  • parent()返回父亲元素，parents()返回所有祖先

  • $("span").parentsUntil("div") 返回span与div之间所有的祖先元素

  • children() 返回下一级DOM树的所有儿子

  • $("div").find("span"); 选择div后代的所有span后代,可以是孙子

  • $("div").find("*"); 返回所有后代

  • siblings() 选择所有同胞

  • siblings("p") 所有同胞中的p元素

  • next() 下一个同胞

  • nextAll() 之后所有的同胞

  • $("h2").nextUntil("h6"); h2与h6之间所有的同胞元素,不包含h2与h6

  • prev(),prevAll(),prevUntill()

  • $("div p").first() 选择div中第一个p元素

  • last()

  • eq(),返回被选元素中带指定索引号的元素,首元素的下标为0 $("p").eq(1);取第二个

  • $("p").filter(".url"); 返回带有类名 "url" 的所有

    元素

  • $("p").not(".url"); 返回不带有类名 "url" 的所有

    元素

jQuery-Ajax

AJAX=异步的JavaScript和XML,通过后台加载数据,在网页上显示

  • $("#div1").load("demo_test.txt");可以把URL中的文件直接加载到页面上来

  • $("#div1").load("demo_test.txt #p1"); 从txt中选择id="p1"的内容加载进来

  • get方法

$("button").click(function(){

		$.get("/try/ajax/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);

		});

	});

JQuery入门学习笔记(全)的更多相关文章

  1. Java入门学习笔记(全)

    JAVA https://zhuanlan.zhihu.com/p/21454718 引用部分实验楼代码,侵删 先通读文档 再亲自试标程 复习时自己再批注 1.a = b += c = -~d a = ...

  2. jquery入门学习笔记

    还是先来个例子: <div id="div1" class="box">div</div> <ul> <li>& ...

  3. OpenCV入门学习笔记

    OpenCV入门学习笔记 参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...

  4. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  5. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  6. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  7. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  8. Hadoop入门学习笔记---part2

    在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...

  9. Hadoop入门学习笔记---part1

    随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...

随机推荐

  1. 业务代码的救星——Java 对象转换框架 MapStruct 妙用

    简介 在业务项目的开发中,我们经常需要将 Java 对象进行转换,比如从将外部微服务得到的对象转换为本域的业务对象 domain object,将 domain object 转为数据持久层的 dat ...

  2. 第10章 文档对象模型DOM 10.2 Document类型

    Document 类型 JavaScript 通过 Document 类型表示文档.在浏览器中, document 对象是 HTMLDocument (继承自 Document 类型)的一个实例,表示 ...

  3. ios APP上的自动化测试

    1. 下载 http://blog.manbolo.com/2012/04/08/TestAutomation.zip%20 2. 开发工具安装:http://jingyan.baidu.com/ar ...

  4. gym/101873/GCPC2017

    题目链接:https://codeforces.com/gym/101873 C. Joyride 记忆化搜索形式的dp #include <algorithm> #include < ...

  5. CodeForces 1107 F Vasya and Endless Credits

    题目传送门 题解: 需要注意到的是 每个offer都获益都是会随着时间的增加而渐少(或不变). 所以我们可以知道,最多在第n个月的时候这个人会买车离开. solve1:最优2分图匹配 我们可以把每个月 ...

  6. CH4301 Can you answer on these queries III 题解

    给定长度为N的数列A,以及M条指令 (N≤500000, M≤100000),每条指令可能是以下两种之一: "2 x y",把 A[x] 改成 y. "1 x y&quo ...

  7. 简单粗暴详细讲解javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第 ...

  8. spark与mapreduce的区别

    spark是通过借鉴Hadoop mapreduce发展而来,继承了其分布式并行计算的优点,并改进了mapreduce明显的缺陷,具体表现在以下几方面: 1.spark把中间计算结果存放在内存中,减少 ...

  9. H5 的 sessionStorage和localStorage

    1) H5 新增的 sessionStorage 和 localStorage 的区别 sessionStorage 和 java 的 session 差不多,可以短时间存储信息,电脑浏览器常用ses ...

  10. 【Offer】[19] 【字符串匹配】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请实现一个函数用来匹配包括'.'和'*'的正则表达式. 模式中的字符'.'表示任意一个字符,而'*'表示它前面的字符可以出现任意次(包含 ...