jQuery学习----简单介绍，基本使用，操作样式，动画
jQuery简单介绍
jq是js的插件库，说白了，jq就是一个js文件
凡事能用jq实现的，js都能实现。但是js能实现的，jq不一定能够实现
jq的引入
http://www.bootcdn.cn 引入jq//https://www.bootcdn.cn/jquery/
http://jquery.cuishifeng.cn 中文
http://api.jquery.com 官网
CDN引入:
本地保存（路径）
alert能够成功弹出表示jq引入成功
<body>
<div id="box">999</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>-->
<script src="jquery.js"></script>
<script>
/*
http://www.bootcdn.cn 引入jq
http://jquery.cuishifeng.cn 中文
http://api.jquery.com 官网 jQuery
是什么：
jQuery是一种新的JavaScript库。
jq是用js写 能用jq实现的 用js都能实现
js能实现的 jq有些不能实现 jQuery $
传字符串/选择器/尖括号标签的形式/函数/object
jq的API只对自己开放 jq不能用js的API js也不能用jq的API
*/
/*$(function () {
alert(1);
});*/ // var oBox = docment.getElementById("box"); // var oBox = document.querySelector("#box");
// oBox.innerHTML = "666"; var $box = $("#box");
// $box.innerHTML = "888";
$box.html("<b>888</b>"); var $p = $("p");
console.log($p.length); $p.html("<b>88</b>"); </script>
</body>
jq的选择器
jq的基本使用
jq的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
li{
list-style: none;
width: 150px;
height: 50px;
background: yellowgreen;
margin: 5px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.js"></script>
<script>
$("ul li").each(function (i) {//第一个参数默认是序号/小标
//this.innerHTML = "我是第"+i+"个";
$(this).html("我是第"+i+"个");
})
</script>
</body>
</html>
append prepend
<body>
<div id="box">
<p>我是本来就在的</p>
</div>
<b>我是在外面的</b>
<script src="jquery.js"></script>
<script>
/*
添加子元素 可以是标签、文本、js对象、jq对象
append
prepend appendTo
prependTo
*/
// $("#box").append("<em>我是新增的append</em>");
// $("#box").prepend("<em>我是新增的prepend1</em>");
// $("#box").append($("b")[0]); $("<em>我是新增的</em>").appendTo($("#box"));
</script>
</body>
before after
<body>
<div id="box">666</div>
<script src="jquery.js"></script>
<script>
/*
添加兄弟元素
after
before insertAfter
insertBefore
*/
$("#box").after("<b>我是after</b>");
$("#box").before("<b>我是before</b>");
</script>
</body>
empty
<body>
<div id="box">
<ul>
<li>1</li>
<li class="show">2</li>
<li>3</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
/*
empty 清空子节点
remove 移除自己
*/
// $("#box").empty();
// $("#box").remove();
$("#box ul li").remove(".show");
</script>
</body>
jq操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="box" class="wrap">
<p class="show">show</p>
<p>kong</p>
<p class="on">on</p>
</div>
<script src="jquery.js"></script>
<script>
/*
attr 设置/获取 标签属性
prop 设置/获取 标签属性 废除 removeAttr() 移除标签属性
removeProp() 废除 addClass
removeClass
传class 移除你传的那个
没有 移除全部
toggleClass 有就删没有则加
操作class类名 jq js
html() innerHTML
text() innerText
val() value 在jq里面，设置某个值的时候，一般自带遍历
获取某个值的时候，一般获取第一个
*/ var $box = $("#box");
//alert($box.attr("class")); //读操作
//$box.attr("class","xiaopo")//写操作
// $box.removeAttr("class");
// $box.attr("tz","xiaopo");
// $box.attr("class","py") $box.addClass("qq ww");
$box.removeClass("ww");
$box.removeClass();
$("#box p").toggleClass("on"); // $("#box p").html("999");
alert($("#box p").html());
</script>
</body>
</html>
jq和js的相互转换
<body>
<div id="box">666</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script src="jquery.js"></script>
<script>
var oBox = document.querySelector("#box"); //js ===> jq
$(oBox).html("999");
// $(oBox).innerHTML = "333"; //jq === > js jq[]/get()
var $p = $("p");
$p[1].innerHTML = "999";
$p.get(2).innerHTML = "888"; //jq ===> 特定jq eq()
$p.eq(3).html("555");
</script>
</body>
筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body> <div id="box" class="show">
<p>1</p>
<p class="box">box1</p>
<div class="wrap">
<p>3</p>
<p class="box">box2</p>
</div>
</div> <script src="jquery.js"></script>
<script>
/*
eq 把jq转换成特定的jq
hasClass 检查当前的元素是否含有某个特定的类，如果有，则返回true。否则返回false
children 找儿子 可以不传参数
find 不传参，默认不找 传参的话就找符合参数的后代
parent 不需要参数
parents(".show")找到名字叫做show的祖先
siblings 不传参 所有兄弟 传参 所有兄弟按照参数筛选出合格的
*/ //alert($("#box").hasClass("show1"));//false
//alert($("#box").hasClass("show"));//true //console.log($("#box").children());
//console.log($("#box").find("p")); // console.log($(".box").parents());
//console.log($(".box").parents(".show"));
// console.log($(".box").parent()); $("p").siblings(".box").css("color","red");
// $("p").siblings().css("color","red");
</script>
</body>
</html>
操作样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: yellowgreen;
padding: 50px;
border: 10px solid red;
margin: auto;
position: relative;
}
#wrap{
width: 50px;
height: 50px;
background: yellow;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div id="wrap"></div>
</div>
<script src="jquery.js"></script>
<script>
/*
.css()
.width()
.height() innerWidth() / innerHeight 算了padding
outerWidth() / outerHeight 算了 padding+border offset()
该对象有top /left 属性
代表到浏览器窗口的 top/left的值 position()
该对象有top /left 属性
代表到定位父级的 top/left的值
*/ var $box = $("#box");
//alert($box.width());//100
//alert($box.innerWidth());//200
//alert($box.outerWidth());//220 //oBox.style.width = "200px";
// $box.css("height","200px"); /*$box.css({
"width": "200px",
"height": "200px",
"background": "blue"
});*/ // alert($box.offset().left);
alert($("#wrap").position().left)
</script>
</body>
</html>
jq事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
width: 200px;
background: #aaaaaa;
}
li{
list-style: none;
width: 50px;
height: 50px;
background: skyblue;
margin: 10px;
}
</style>
</head>
<body>
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.js"></script>
<script>
/*
jquery里面的事件
都是函数形式的，去掉on的那种
原理上事件都是事件绑定的形式而不是赋值的形式
jquery事件绑定、解绑
所有事件的添加都是绑定的形式
可以通过on来添加事件
*/
//var oUl = document.getElementById("box");
/*oUl.onclick = function () {
alert(1);
};
oUl.onclick = function () {
alert(2);
}*/ /*$("#box").click(function () {
alert(1);
});
$("#box").click(function () {
alert(2);
})*/ //on绑定单个事件
/*$("#box li").on("click",function () {
alert($(this).index());//index()在jq里面是方法 对应的是你的下标
})*/ //on绑定多个事件
/*$("#box").on({
"click": function () {
console.log("click");
},
"mouseenter": function () {
console.log("mouseenter");
},
"mouseleave": function () {
console.log("mouseleave");
}
});*/ // $("#box").off("click");//移除满足条件的
//$("#box").off();//移除事件 /*$("#box").hover(function () {
//一个函数，移入移出执行同一个函数
console.log("mouseenter");
})*/ $("#box").hover(function () {
console.log("mouseenter");//移入函数
},function () {
console.log("mouseleave");//移出函数
}) </script>
</body>
</html>
scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body style="height: 1500px;width: 1000px">
<script src="jquery.js"></script>
<script>
/*$(document).click(function () {
console.log("滚动高度"+$(this).scrollTop());
console.log("滚动宽度"+$(this).scrollLeft());
});*/ $(document).click(function () {
$(this).scrollTop(750);
$(this).scrollLeft(500);
})
</script>
</body>
</html>
动画
动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="jquery.js"></script>
<script>
/*
不传参 瞬间显示隐藏 传一个数字参数，代表毫秒，改变宽、高、透明度
show
hide
toggle 默认时间300毫秒 改变透明度
fadeIn
fadeOut
fadeTo(1000,0.1) 可以把透明度设置一个值，时间参数不能省略 默认时间300毫秒 改变高度
slideDown
slideUp
slideToggle 改变高度 这三组，不仅仅可以接受一个数字参数，能接受的参数有：
* number / string 代表动画时间（可缺省） 毫秒数 / （"fast" "normal" "slow"）
* string 代表运动曲线（可缺省）
* function 代表回调函数（可缺省）
*/ var $box = $("#box");
$(document).click(function () {
// $box.toggle(2000);
// $box.fadeTo(1000,0.2);
//$box.slideToggle(1000);
}); var off = true;
$(document).click(function () {
if(off){
// $box.hide(1000);
// $box.fadeOut(1000);
$box.slideUp(1000);
}else{
// $box.show(1000);
// $box.fadeIn(1000);
$box.slideDown(1000);
}
off = !off;
})
</script>
</body>
</html>
animate（只动一次）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="jquery.js"></script>
<script>
/*
animate
传参：
* obj 必传 { }格式代表的变化的属性和目标值 数值变化
* number/string 可缺省 代表毫秒数 或者 三个预设好的值 默认300
* string 可缺省，代表运动曲线，默认jQuery提供"linear" 和 "swing"
* function 可缺省，代表动画结束后的回调函数
*/
$("#box").animate({
"width": "200px",
"height": "200px",
"marginLeft": "100px"
},1000)
</script>
</body>
</html>
stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
li{
list-style: none;
padding: 10px 30px;
background: pink;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<ul id="box">
<li>xiaopo</li>
<li>shiwei</li>
<li>wuming</li>
<li>budong</li>
</ul>
<script src="jquery.js"></script>
<script>
/*
stop
清空动画队列，可以接受两个布尔值参数
第一个不用管
第二个决定是否瞬间到达队列终点，true 到 false(默认) 不到
*/
$("#box li").hover(function () {
$(this).stop(true,true).animate({"height":"300px"});
},function () {
$(this).stop(true,true).animate({"height":"21px"});
})
</script>
</body>
</html>
delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="jquery.js"></script>
<script>
/*
delay 只对动画有用
*/
$(document).click(function () {
// $("#box").delay(2000).fadeOut(1000);
// $("#box").delay(2000).css("background","red");
}); $("#box").delay(2000).queue(function () {
$(this).css("background","red"); })
</script>
</body>
</html>
jQuery学习----简单介绍，基本使用，操作样式，动画的更多相关文章
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...
- jQuery学习笔记2——表单操作
一.获取和设置表单的值:val()和text() 1. 获取表单的值: $("#username").val(); 2. 设置表单的值: $("#username&quo ...
- Jquery学习之路(二) 实现table样式的设定
上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...
- JQuery学习：事件绑定&入口函数&样式控制
1.基础语法学习: 1.事件绑定 2.入口函数 3.样式控制 <!DOCTYPE html> <html lang="en"> <head> & ...
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...
- 【转载】salesforce 零基础开发入门学习（三）sObject简单介绍以及简单DML操作（SOQL）
salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL) salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesfo ...
随机推荐
- JSP-Runoob：JSP 状态码
ylbtech-JSP-Runoob:JSP 状态码 1.返回顶部 1. SP HTTP 状态码 HTTP请求与HTTP响应的格式相近,都有着如下结构: 以状态行+CRLF(回车换行)开始 零行或多行 ...
- Appium + python - weixin公众号操作
from appium import webdriverfrom time import sleep desired_caps = { "platformName":"A ...
- ACM_小游戏（棋盘博弈）
Problem Description: 最近kiki无事可做,于是他想玩棋盘游戏.棋盘的大小是n * m.首先,棋子放置在右上角(1,m). 每次可以将棋子向左方,下方或左下方移动一个位置.当移动到 ...
- Android -----listView的重要属性
android:transcriptMode="alwaysScroll" android:cacheColorHint="#00000000" android ...
- Spark 概念学习系列之Spark基本概念和模型（十八）
打好基础,别小瞧它! spark的运行模式多种多样,在单机上既可以本地模式运行,也可以伪分布模式运行.而当以分布式的方式在集群中运行时.底层的资源调度可以使用Mesos或者Yarn,也可使用spark ...
- JAVA中list,set,map与数组之间的转换详解
package test; import java.util.*; /** * Created by ming */ public class Test { public static void ma ...
- jQuery五屏轮播手风琴切换代码
jQuery五屏轮播手风琴切换代码 在线演示本地下载
- hdu3535题解
hdu3535:http://acm.hdu.edu.cn/showproblem.php?pid=3535 该题是非常全面的一道分组背包问题.其实理解了最多一个的分组背包问题,解题起来也是很简单的. ...
- Microsoft SQL Server学习（二）--数据库的语法
关于数据库的语法 创建数据库 样例 名词概念 编写数据库代码的注意事项 关于文件语法 实例代码 关于数据库的语法: 1.创建数据库 create database 数据库名 on primary (主 ...
- C# Task多线程
来自Eleven老师示例 private void btnTask_Click(object sender, EventArgs e) { Console.WriteLine(); Console.W ...