JQuery入门学习笔记(全)
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
随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...
随机推荐
- 🕸捕获与改写HTTPS请求
前言 本文站在 macOS 用户的角度下,分享一下对 HTTPS 进行请求拦截.对响应进行修改的经验. 要注意的是,本文介绍的工具虽然一定程度上对 Windows 用户也适用 ,但并非所有工具都是免费 ...
- JPA多条件复杂SQL动态分页查询
概述 ORM映射为我们带来便利的同时,也失去了较大灵活性,如果SQL较复杂,要进行动态查询,那必定是一件头疼的事情(也可能是lz还没发现好的方法),记录下自己用的三种复杂查询方式. 环境 spring ...
- Codeforces Round #511 (Div. 2)-C - Enlarge GCD （素数筛）
传送门:http://codeforces.com/contest/1047/problem/C 题意: 给定n个数,问最少要去掉几个数,使得剩下的数gcd 大于原来n个数的gcd值. 思路: 自己一 ...
- URAL-1982-Electrification Plan最小生成树或并查集
Electrification Plan 题意:在一个无向图中,给你几个源点,找出把所有点连接到源点后最小的消费: 可以利用并查集: 先用结构体把每个边存起来,再按照消费大小排序.之后从消费小的到大的 ...
- codeforce#483div2D-XOR-pyramid+DP
题意:求给定区间中最大的连续异或和: 思路:DP的思想,先dp求出每个区间的异或和,再dp更新成当前这个dp[i][j]和dp[i-1][j].dp[i-1][j+1]中的最大值: 这样可以保证是同一 ...
- 杭电多校第十场 hdu6432 Cyclic 打表找规律
Cyclic Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others)Total Su ...
- 牛课练习赛34 Flittle w and Discretization 主席树维护Mex
ittle w and Discretization 主席树维护Mex. 每个右端点 r 维护出一棵 在[1, r ] 区间中 其他所有的 值离这个 r 最近的的位置是多少. 然后询问区间[L,R]的 ...
- codeforces 264 B. Good Sequences（dp+数学的一点思想）
题目链接:http://codeforces.com/problemset/problem/264/B 题意:给出一个严格递增的一串数字,求最长的相邻两个数的gcd不为1的序列长度 其实这题可以考虑一 ...
- 【Offer】[7] 【重建二叉树】
题目描述 思路分析 Java代码 代码链接 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4, ...
- SpringBoot+SpringMVC+MyBatis快速整合搭建
作为开发人员,大家都知道,SpringBoot是基于Spring4.0设计的,不仅继承了Spring框架原有的优秀特性,而且还通过简化配置来进一步简化了Spring应用的整个搭建和开发过程.另外Spr ...