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入门学习笔记(全)的更多相关文章

Java入门学习笔记(全)
JAVA https://zhuanlan.zhihu.com/p/21454718 引用部分实验楼代码,侵删先通读文档再亲自试标程复习时自己再批注 1.a = b += c = -~d a = ...
jquery入门学习笔记
还是先来个例子: <div id="div1" class="box">div</div> <ul> <li>& ...
OpenCV入门学习笔记
OpenCV入门学习笔记参照OpenCV中文论坛相关文档(http://www.opencv.org.cn/) 一.简介 OpenCV(Open Source Computer Vision),开源 ...
Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
PyQt4入门学习笔记（三）
# PyQt4入门学习笔记(三) PyQt4内的布局布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类绝对位置这种方式要 ...
PyQt4入门学习笔记（一）
PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...
Hadoop入门学习笔记---part2
在<Hadoop入门学习笔记---part1>中感觉自己虽然总结的比较详细,但是始终感觉有点凌乱.不够系统化,不够简洁.经过自己的推敲和总结,现在在此处概括性的总结一下,认为在准备搭建ha ...
Hadoop入门学习笔记---part1
随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...

随机推荐

json-server的安装及使用
首先介绍一下什么是json-server,用处是什么,其实很简单:JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源. ...
Java-手动搭建SSM（Maven）
一.环境部署操作系统:windows10专业版 jdk:1.8.0_144 IDE:eclipse-oxygen 服务器:tomcat 9.0 数据库:mysql 5.7.18 Maven:3.54 ...
洛谷 P2055 【假期的宿舍】
题库 :洛谷题号 :2055 题目 :假期的宿舍 link :https://www.luogu.org/problem/P2055 首先明确一下:校内的每个学生都有一张床(只是校内的有) 思路 : ...
odoo12从零开始：一、安装odoo运行环境(mac)
写在前面: 接触odoo已经两年多了,在大学做课程设计的时候,无意间了解到odoo这个erp框架,当时的odoo在国内还默默无闻,我也不曾想过自己毕业后会从事到odoo框架的相关开发工作中来.两年多的 ...
KVC&KVO&运行时
运行时:要先了解程序运行的三个阶段 1.编译阶段:clang将OC代码转换成C++,查看运行机制调用的方法 2.链接阶段:与我们使用到得库文件进行链接 3.运行阶段:我们要谈的运行时主要针对这个阶段, ...
CodeForces - 1150 D Three Religions
题目传送门题解: id[ i ][ j ] 代表的是在第j个位置之后的第i个字符的位置在哪里. dp[ i ][ j ][ k ] 代表的是第一个串匹配到第i个位置, 第二个串匹配到第j个位置, ...
计蒜客 ACM训练联盟周赛第一场从零开始的神棍之路暴力dfs
题目描述 ggwdwsbs最近被Zeratul和Kyurem拉入了日本麻将的坑.现在,ggwdwsbs有13张牌,Kyurem又打了一张,加起来有14张牌.ggwdwsbs想拜托你帮他判断一下,这14 ...
2017 计蒜之道初赛第五场 UCloud 的安全秘钥（中等）
每个 UCloud 用户会构造一个由数字序列组成的秘钥,用于对服务器进行各种操作.作为一家安全可信的云计算平台,秘钥的安全性至关重要.因此,UCloud 每年会对用户的秘钥进行安全性评估,具体的评估方 ...
git连接远程分支
今天在再用git连接到远程的dev分支的时候出现了下面的情况 $ git checkout -b dev origin/dev fatal: 'origin/dev' is not a commit ...
Go语言基础之单元测试
不写测试的开发不是好程序员.我个人非常崇尚TDD(Test Driven Development)的,然而可惜的是国内的程序员都不太关注测试这一部分. 这篇文章主要介绍下在Go语言中如何做单元测试和基 ...

JQuery入门学习笔记(全)

jQuery

语法

事件

效果

动画

DOM

jQuery遍历

jQuery-Ajax

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

随机推荐

热门专题