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. [SNOI2019]字符串

    名称:字符串 来源:2019年陕西省选 题目内容 传送门 洛谷(P5392) 题目描述 给出一个长度为$n$的由小写字母组成的字符串$a$,设其中第$i$个字符为$a_i(1≤i≤n)$. 设删掉第$ ...

  2. TypeScript语法基础

    什么是TypeScript? TypeScript是微软开发的一门编程语言,它是JavaScript的超集,即它基于JavaScript,拓展了JavaScript的语法,遵循ECMAScript规范 ...

  3. CodeForces 1084D The Fair Nut and the Best Path

    The Fair Nut and the Best Path 题意:求路径上的 点权和 - 边权和 最大, 然后不能存在某个点为负数. 题解: dfs一遍, 求所有儿子走到这个点的最大值和次大值. 我 ...

  4. Python字符串中删除特定字符

    分析 在Python中,字符串是不可变的.所以无法直接删除字符串之间的特定字符. 所以想对字符串中字符进行操作的时候,需要将字符串转变为列表,列表是可变的,这样就可以实现对字符串中特定字符的操作. 1 ...

  5. Docker Swarm从部署到基本操作

    关于Docker Swarm Docker Swarm由两部分组成: Docker集群:将一个或多个Docker节点组织起来,用户就能以集群的方式进行管理: 应用编排:有一套API用来部署和管理容器: ...

  6. Go依赖管理及Go module使用

    Go语言的依赖管理随着版本的更迭正逐渐完善起来. 依赖管理 为什么需要依赖管理 最早的时候,Go所依赖的所有的第三方库都放在GOPATH这个目录下面.这就导致了同一个库只能保存一个版本的代码.如果不同 ...

  7. Redis的最常被问到知识点总结

    1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库 ...

  8. 第一次作业:学习C++指针

    1 内存空间的访问方式 计算机的内存存储器被划分为一个个存储单元.储存单元按一定的规则编号,这个编号就是存储单元的地址.地址编码的基本单位是字节,每个字节由8个二进制位组成,也就是说每个字节是一个基本 ...

  9. NLP(十七)利用tensorflow-serving部署kashgari模型

      在文章NLP(十五)让模型来告诉你文本中的时间中,我们已经学会了如何利用kashgari模块来完成序列标注模型的训练与预测,在本文中,我们将会了解如何tensorflow-serving来部署模型 ...

  10. .netcore 使用阿里云短信

    准备工作 阿里云上申请短信服务 创建短信应用.签名.短信模板并申请审核,如果审核不通过,接口是调不通的. 配置专门用来发短信的accessKeyId和 accessKeySecret 开始开发 下载安 ...