jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装，因为js有一些不方便的地方。所以，jQuery才会去对js进行封装。
jQuery对于标签元素的获取
$('div')或$('li')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript"> $(function () {
var $lis = $('li');
for(var i = 0; i < $lis.length; i++){
if(i % 2 == 0){
$lis.eq(i).css('color', 'red');
}else{
$lis.eq(i).css('color', 'green');
}
}
})
</script>
</html>
隔行换色
对于这段代码，我们获取的li标签是一个数组，通过取的是奇数还是偶数，用.css函数来显示字体的颜色。
筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选器示例</title>
</head>
<body>
<ul>
<li id="l0">1</li>
<li>2</li>
<li>3</li>
<li id="l3">4</li>
<li>5</li>
</ul> <div>div-1</div>
<div>div-2</div>
<div id="fir">div-3
<a href="#">a标签</a>
<div>div-son</div>
</div> </body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 查找id="l3"
console.log($('#l3'));
// 查找id="l3"的前一个
console.log($('#l3').prev());
// 查找id="l3"的后一个
console.log($('#l3').next());
// 查找id="l3"的前面的所有标签 取得时候是倒着取
console.log($('#l3').prevAll());
// 查找后面所有的
console.log($('#l3').nextAll());
// 从某个元素开始找，直到某个元素终止 取到的是之间的元素
console.log($('#l0').nextUntil('#l3')); // 查找a标签
console.log($('a'));
// 查找a标签的父标签
console.log($('a').parent());
// 查找儿子和兄弟标签
console.log($('#fir').children());
console.log($('#fir').siblings());
</script>
</html>
通过筛选器，我们就可以选到的我们想要操作的标签。
jQuery的一些动画操作
通过jQuery，一些简单的像逐渐显示，逐渐隐藏等动画，可以通过函数来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: green;
display: none;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="change">切换</button>
<div class="box"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#show').click(function () {
// $('.box').css('display', 'block');
$('.box').show('1000');
});
});
$(function () {
$('#hide').click(function () {
$('.box').hide(1000);
});
});
var isShow = true;
$('#change').click(function () {
if(isShow){
$('.box').hide(1000);
isShow = false;
}else{
$('.box').show(1000);
isShow = true;
}
});
$('.box').toggle(1000);
</script>
</html>
渐隐渐显
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑入滑出</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: green;
display: none;
}
</style> </head>
<body>
<button id="appear">滑入</button>
<button id="dis">滑出</button>
<button id="change">切换</button>
<div class="box"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#appear').click(function () {
$('.box').slideDown(2000);
});
$('#dis').click(function () {
$('.box').slideUp(2000);
});
$('#change').mouseup(function () {
$('.box').slideToggle(2000);
});
});
</script>
</html>
滑入滑出动画
.click事件，是当点击事件发生时，才会起作用的事件，出来click事件，还有鼠标移入移出的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
</head>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
</style>
<body>
<button id="appear">淡入</button>
<button id="dis">淡出</button>
<button id="change">切换</button>
<button id="point">指定</button>
<div class="box"></div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#appear').click(function () {
$('.box').fadeIn('slow', function () { });
});
$('#dis').click(function () {
$('.box').fadeOut('slow', function () { });
});
$('#change').click(function () {
$('.box').fadeToggle('slow', function () { })
});
$('button').eq(3).click(function () {
$('.box').fadeTo(2000, 5);
});
});
</script>
</html>
淡入淡出
jQuery标签属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签属性操作</title>
<style type="text/css">
.app{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button>隐藏</button>
<div id="box" class="app"> </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 里面attr的参数是'id'，不是'#box';
// 返回值是jQuery的box类
// 获取属性
var idValue = $('div').attr('id');
console.log(idValue);
// 设置值
// $('div').attr('class','apps');
// 移除属性
$('button').click(function () {
$('div').removeAttr('class');
});
})
</script>
</html>
标签属性操作 attr函数用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prop用法</title>
</head>
<body>
<div>
<p class="item">1</p>
<p class="item2">2</p>
<p class="item3">3</p>
<p>4</p> 男<input type="radio" id="text1" name="sex" checked="add"/>
女<input type="radio" id="text2" name="sex" />
<button>提交</button>
</div> </body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// console.log($('p').prop('.item2'));
$('p:eq(3)').prop('class', 'item4'); $('input:eq(0)').attr('checked');
// prop 返回值为true
console.log($('input:eq(0)').prop('checked')); $('button').click(function () {
alert($('input:eq(0)').prop("checked")?"男":"女");
}); })
</script>
</html>
prop函数的用法
prop返回的值为Boolean值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
ul li.active{
color: yellow;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () { $('ul li').click(function () { // 修改css来修改表单的颜色
// $(this).css('color', 'green').siblings('li').css('color', 'black');
// 修改类名来修改表单颜色
$(this).addClass('active').siblings('li').removeClass('active');
}); }) </script>
</html>
制作选项卡
jQuery类属性操作
addClass函数
示例：用了两种方法，一是用之前学的.css函数来做，
二是先定义addClass函数，之后通过addClass 函数来调用函数
val函数
表单操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单value值</title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112" />男
<!-- 设置checked属性表示选中当前选项-->
<input type="radio" name="sex" value="11" checked="">女
<input type="radio" name="sex" value="11">其他 <input type="checkbox" value="a" checked="">吃饭
<input type="checkbox" value="b">睡觉
<input type="checkbox" value="c" checked="">打豆豆 <!--下拉表单 option表单 option标签内设置selected属性 表示选中当前-->
<select name="timespan" id="timespan" class="Wdate">
<option value="1">8:00-8:30</option>
<option value="2" selected="">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" /> </form>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript"> $(function () {
// 选择type是radio的默认被打钩的value值
console.log($('input[type="radio"]:checked').val()); // 复选框被选中的value，获取的是第一个被选中的值
console.log($('input[type="checkbox"]:checked').val()); // 下拉列表被选中的值
var $obj = $('#timespan option:selected');
// 获取被选中的值
var $time = $obj.val();
console.log($time);
// 获取文本
var $time_text = $obj.text();
console.log(`val:${$time},text:${$time_text}`) // 设置值 value值一定要是一个数组，用[]来括起来
$("input[type='radio']").val(['112']);
$("input[type='checkbox']").val(['a', 'b']); }); </script>
</html>
val函数
我们知道如果想获取class，需要用.class_name，获取id，用#id_name。
而对于input获取可以通过input[type="type_name"]来获取
而获去value值，更多的是为了提交表单做准备。
文档操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档操作</title>
</head>
<body>
<!--<ul></ul>-->
<ol>
<li class="li1">first</li>
<li></li>
<li></li>
<li></li>
</ol>
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
</ul>
<button>点击</button>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () { // 添加字符串
$('ul').append('<li class="item1">哈哈</li>'); var oLi = document.createElement('li');
oLi.innerHTML = 'hh';
// 添加js对象
$('ul').append(oLi);
// 添加jQuery对象 之前的元素会被移除
$('ul').append($('.li1')); // $('ul li').click(function () {
// $('ul').append($(this));
// }); // 添加到第一个
$('ul').prepend('<li>到第一个</li>'); // clone(ture)会复制$(this)的属性，而默认的false不会复制属性
$('button').click(function () {
$(this).clone().insertAfter(this);
});
// 删除操作
// $('button').remove();
// detach同样是删除操作，但可以保留之前设置的属性
var $btn = $('button').detach();
$('ul').append($btn); });
</script>
</html>
文档的增删操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改操作</title>
</head>
<body>
<h5>h5标签</h5>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript"> // 修改操作
$(function () {
$('h5').replaceWith('<a href="#">hello world</a>'); } </script>
</html>
文档的修改操作
这里需要记住几个函数
append函数：在队尾添加操作
prepend函数：添加在第一个
replaceWith函数：修改标签
remove函数：删除操作
detach函数：删除操作，但可以保留之前设置的属性
jQuery的位置信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的位置信息</title>
<style>
*{
padding: 0;
margin: 0; }
.box{
width: 200px;
height: 200px;
background-color: red;
/*这里看到是行内距离在哪些函数会计算进去*/
padding: 50px;
border: 1px solid green;
margin-left: 50px;
margin-top: 100px;
position: absolute;
}
.father{
width: 400px;
height: 400px;
background-color: yellow;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
bottom: 0;
right: 30px;
position: absolute;
}
</style>
</head>
<body>
<button>变大</button>
<div class="father">
<div class="box"> </div>
<div class="box2">
返回顶部
</div>
</div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () { // 如果width不写，表示获取.box的width的值 这里的值是数值
console.log($('.box').width());
// 这里获取的值为字符串
console.log($('.box').css('width')); // 使div变大
$('button').eq(0).click(function () {
// 通过next获取下一个同辈元素
$(this).next().width(300);
});
// 获取内部宽的函数 会获取padding值
console.log($('.box').innerWidth());
// 获取外部宽 会把边框和margin值都计算
console.log($('.box').outerWidth());
// 偏移坐标
console.log($('.box').offset().top);
console.log($('.box').offset().left); // animate是用来设置动画的
// $('.box').css({
// width: 200,
// height: 200
// }).offset({top: 100, left: 100}).animate({
// width: 0,
// height: 0
// }, 1000); // position函数
console.log($('.box').offset());
console.log($('.box').position()); // 返回的是数值类型
$(document).scroll(function () {
console.log($(document).scrollTop());
}) //
$('.box2').click(function () {
$('html').animate({
'scrollTop': 0
}, 1000);
}); });
</script>
</html>
jQuery的位置信息
通过获取位置信息，可以做一些滚动操作。
jQuery的一些基本的函数和用jQuery做一些动画操作的更多相关文章
- jQuery文档节点处理，克隆，each循环，动画效果，插件
文档节点处理 //创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$(&quo ...
- jquery的扩展之extend函数
1.$.extend()使用 作用:扩展全局的函数 $.extend({ sayHellow:function(pram){ alert(pram+"hellow"); } }) ...
- jQuery扩展插件和拓展函数的写法
<script type="text/JavaScript"> //jQuery插件的写法(需要传入操作对象) ;(function ...
- Jquery插件写法及extentd函数
JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...
- jQuery编写插件--封装全局函数的插件（一些常用的js验证表达式）
上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jQuery源码逐行分析学习02(第一部分：jQuery的一些变量和函数)
第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结 ...
- jQuery插件制作之全局函数用法实例
原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...
- JQuery中bind和unbind函数与onclick绑定事件区分
JQuery中bind和unbind函数转载: https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...
随机推荐
- e2e测试框架之Cypress
谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...
- .NET Core 图片操作在 Linux/Docker 下的坑
一.前言 .NET Core 目前更新到2.2了,但是直到现在在 .NET Core 本身依然不包括和图片有关的 Image.Bitmap 等类型.对于图片的操作在我们开发中很常见,比如:生成验证码. ...
- 记一次因为session引起的并发问题
在做一个DSP系统(不要纠结这个系统是做什么的)时,碰到了一个很奇特的bug. 事情背景: 1.媒体方要求素材必须通过API提交给他们审核后,方可投放使用. 2.上线不久,运营反馈“每当提交素材的时候 ...
- 三十七、小程序页面跳转传参参数值为url时参数丢失
当参数的值为url的时候,在options中的值没有参数“?”之后字符串被截取.例如:let url="http://baidu.com/?a=1&b=2"wx.navig ...
- [Alpha阶段]项目展示博客
目录 Alpha阶段项目展示 1.团队成员介绍 2.工程相关信息 (1)我们的用户 (2)产品表现 (3)团队分工 (4)项目管理 (5)测试 (6)文档 (7)用户调研 3.项目信息 (1)实际进展 ...
- Net包管理NuGet(2)nuget包的生成方法
1,下载NuGetPackageExplorer,可以下载运行源码,也可以直接下载安装包安装安装之后打开 设置好内容之后点击绿色的打钩保存然后操作右边空白处 然后点击File>Save;保存之后 ...
- Linux centos ansible
创建m01.backup.nfs.web01.web02 m01(172.16.1.61).backup(172.16.1.41).nfs(172.16.1.31).web01(172.16.1.7) ...
- 简单了解python使用正则表达式
正则[Regular Expression]:正则表达式通常被用来检索.替换那些符合某个模式(规则)的文本. 正则是用来干啥的:正则就是用来匹配字符串的. Python中string的几个方法: fi ...
- 用Python将一个列表分割成小列表
用Python将一个列表分割成小列表 2018年01月15日 11:09:25 幸福丶如此 阅读数:16842 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...
- magento 由于Httpd进程增多，导致CPU占用100%问题
由于Httpd进程增多,导致CPU占用100%问题 magento for version 2.2.3 前些天一直导致CPU无法控制的增多问题. 根据报错我设置了如下内容: [Mysql]mysql. ...