JQuery
1显示隐藏功能
但凡有两个函数完成的功能是相反的，比如一个显示一个隐藏，那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词，那么肯定会有第三个单词，而且都和toggle有关。
hide()隐藏内容
show() 显示
toggle() 一下显示一下隐藏
括号中如果有参数，填数字（单位是毫秒），那么会有动画效果，如果不填，没有动画效果。
对比js和jq：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: green;
display: none;
}
</style>
<!-- <script>
window.onload = function(){
var oBtn = document.getElementById('btn')
var oBox = document.getElementById('box');
oBtn.onclick = function(){
oBox.style.display = 'none'
}
}
</script> -->
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// $(document).ready(function(){})
$(function(){
// 找到按钮，绑定单击 找到div 隐藏
$('#btn').click(function(){
// $('div').hide(500)
// $('div').show(500)
$('div').toggle(500)
})
})
</script>
</head>
<body>
<!-- 需求：按钮 div，按钮单击控制div隐藏 display:none style -->
<button id="btn">按钮</button>
<div id="box"></div>
</body>
</html>
2.jq控制HTML内容
html():传参数表示修改内容，不传参数表示访问内容
html()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// html(): 传参数表示修改内容，不传参数表示访问内容
// alert($('div').html())
// $('div').html('jq')
// $('div').html('<p>jq</p>');
$('div').html('')
})
</script>
</head>
<body>
<div>div</div>
</body>
</html>
3.控制HTML属性
控制标签属性 k = "v" src value link中的href
3.1prop()
prop()用法：分为单属性和多属性两种写法
多属性就是字典的语法{k:v,k:v}：只支持修改，不支持访问。
单属性分为访问和修改两种。
访问（传一个参数是控制的key）
修改（参数一是key，参数二是这个key对应的值）参数之间用逗号隔开
3.2val（）
val()只用来修改访问value属性值，用法和html()完全相同
传参表示修改，不传参表示访问
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// prop() : 单属性 和 多属性 -- 字典{k:v,} -- 只支持修改
// 单属性： 访问（传一个参数是控制的key） 和 修改: 参数1是key，参数2是这个key对应的值
// alert($('img').prop('src'))
// $('img').prop('src', 'img3.jpg')
// $('img').prop({'src':'img3.jpg', 'alt':'赵四'})
// alert($('input').prop('value'))
// $('input').prop('value', 'aaa')
// val() -- 只用来修改访问value属性值 -- 用法和html（）完全相同
// alert($('input').val())
$('input').val('aaa')
})
</script>
</head>
<body>
<img src="img2.jpg" alt="">
<input type="text" value="请输入用户名">
</body>
</html>
4.jq控制css
css()----和prop()完全相同
rgb颜色：三个0为黑色
小驼峰fontSize和font-size都对
在字典中，如果是有字符和数字混合的形式，那么必须写引号。
字典中如果属性key只是单纯的width，可以不写引号。
在前端中100px可以写成100，字典中属性key的value值100可以不加引号，但是100px必须写引号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// alert($('div').css('color'))
$('div').css('color', 'red')
$('div').css({width:500, 'height':'300px', 'background':'green', 'font-size':'60px'})
})
</script>
</head>
<body>
<div>div</div>
</body>
</html>
5.选择器
查找标签从而去控制它。
js的选择器都可以用，而且还有更多的选择器
eq equal 选中下标等于某个数字的标签（两种写法，可以看下面的代码块）
选择器转移（选择集转移）：.next() .prev() .nextAll() .prevAll()
选中某个属性 = 某个值的标签，只要键值对存在
$('img[alt=aa]').css('background','green')
下面的环境都是父子集
has选中了谁的子级是xx，父级执行了命令
find选中子集执行了命令
下面的选择器很重要
.parent()选择元素的父元素
可以先用一个this，然后找到这个元素的父级。
.children()选择元素的所有子元素
括号里面放具体的哪一个子集。
.siblings()选择元素的同级别元素 -----排他思想：只许州官放火不许百姓点灯
先将自己控制一遍，然后调用siblings再把除了自己的其他同级元素控制一遍
这个 this
jq中使用this---$(this)
会自动检索事件发生的目标
链式编程（链式调用）的好处：简化代码量，执行的时候提高效率，
导航标签都用ul套li
jq中使用onclick、onmouseover等都取消on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// $('li').css('background', 'green')
// $('li:first').css('background', 'green')
// $('li:last').css('background', 'green')
// eq equal 选中下标等于某个数字的标签
// $('li:eq(0)').css('background', 'green')
// $('li').eq(1).css('background', 'green')
// 选择器转移 选择集转移
// $('.box').next().css('background', 'green')
// $('.box').prev().css('background', 'green')
// $('.box').prevAll().css('background', 'green')
// $('.box').nextAll().css('background', 'green')
// 选中某个属性=某个值的标签，只要键值对真实存在
// $('img[alt=aa]').css('background', 'green')
$('.box1').has('p').css('background', 'green') // 父
$('.box2').find('p').css('background', 'green') // 子 -- 层级
})
</script>
</head>
<body>
<ul>
<li>文字1</li>
<li>文字2</li>
<li class="box">文字3</li>
<li>文字4</li>
<li>文字5</li>
<li>文字6</li>
<li>文字7</li>
<li>文字8</li>
</ul>
<img src="aa.jpg" alt="aa">
<img src="bb.jpg" alt="bb">
<div class="box1">
<p>box1里面的p has</p>
</div>
<div class="box2">
<p>box2里面的p find</p>
</div>
</body>
</html>
siblings():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// 点了哪个按钮 这个按钮的背景色是绿色 ; 别人 其他的button不能是绿色
// 这个this -- 会自动检索事件发生的目标 -- jq $(this)
$(this).css('background', 'green').siblings().css('background', '')
})
})
</script>
</head>
<body>
<!-- 同级 排他思想：只许州官放火不许百姓点灯 -->
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</body>
</html>
6.***获取指定元素下标 -----index()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('li').click(function(){
alert( $(this).index() )
})
})
</script>
</head>
<body>
<!-- 单击li，单击谁就弹出这个li的下标 -->
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
<li>文字6</li>
<li>文字7</li>
<li>文字8</li>
</ul>
</body>
</html>
7.***添加类删除类
.addClass()添加类
.removeClass()删除类
删除了class=“xx”中的类名xx，而不会删除class。删除完之后是class。
class中可以添加多个类。
class=“aa bb cc”如果括号里面不填类名，会删除所有类名，如果填了类名，就删除指定的类名。
toggleClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// $('div').addClass('aa')
// $('div').removeClass('aa')
// $('div').removeClass()
$('div').toggleClass('daqiu')
})
})
</script>
</head>
<body>
<button>按钮</button>
<div class="aa bb cc">div</div>
</body>
</html>
8.animate
jQuery提供的一个程序员可以根据自己的需求封装动画效果或功能的函数。
自定义封装动画的函数。
animate(字典形式的动画过程，动画时间，运动曲线，回调函数)
4个参数，只有参数1是必填项{}
动画时间 毫秒为单位，默认值是600；
运动曲线：字符串的形式 linear（默认值） 和swing----工作不常用
运动曲线就是加速减速
回调函数：前面动画过程执行完成之后，要执行的命令 --- 就是匿名函数而已。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: green;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// $('div').animate(字典形式的动画过程, 动画时间, 运动曲线, 回调函数)
// animate4个参数只有参数1是必填项 {}
// 动画时间 毫秒为单位 默认值是600
// 运动曲线：字符串的形式 linear（默认值） swing -- 工作不常用
// 回调函数 前面动画过程执行完成之后要执行的命令 -- 就是匿名函数而已
$('div').eq(0).animate({width:1000}, 2000, 'linear', function(){
alert('动画完成了的命令')
})
// $('div').eq(1).animate({width:1000}, 2000, 'swing')
})
</script>
</head>
<body>
<div></div>
<!-- <div></div> -->
</body>
</html>
9.***常用动画函数
slideUp()隐藏
slideDown()显示
slideToggle() 一会显示一会隐藏
清除动画排队机制，在形成动画函数之前加stop()
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 一会淡入一会淡出
括号里面可以写动画时间，运动曲线，回调函数三个参数，但这三个参数可以可以不写
fadeTo() 设置透明度，参数一是时间，参数2是透明度0-1的数值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background: green;
/* display: none; */
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// 1、滑动动画
// $('div').slideUp() // 隐藏
// $('div').slideDown() // 显示
// 清除动画排队机制：在形成动画函数之前加stop()
// $('div').stop().slideToggle()
// 2、透明度动画
// $('div').fadeIn(1000) // 淡入
// $('div').fadeOut() // 淡出
// $('div').fadeToggle()
$('div').fadeTo(600, 0.5) // 设置透明度参数是时间，参数2 是透明度0-1的数值
})
})
</script>
</head>
<body>
<button>按钮</button>
<div></div>
</body>
</html>
10.***事件属性
click() 鼠标单击
ready() DOM加载完成
blur() 元素失去焦点
focus()元素获得焦点
submit()用户提交表单
hover()同时为mouseenter和mouseleave事件指定处理函数
mouseover()鼠标进入（进入子元素也触发）
mouseout()鼠标离开（离开子元素也触发）
mouseenter()鼠标进入（进入子元素不触发）
mouseleave()鼠标离开（离开子元素不触发）
上面的这些鼠标移入和离开，触发和不触发指的是不再次触发父级。验证两组不一样的时候，鼠标先进入父级，再进入子级，然后没有再次触发，验证成功。如果是直接进入子级的话，因为子级和父级是一体的，会触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
background: green;
}
.son{
width: 200px;
height: 200px;
background: pink;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 鼠标移入标签向下运动150px， 鼠标离开回到默认状态0 margin-top
// $('.father').mouseover(function(){
// $(this).animate({'margin-top':150})
// })
// $('.father').mouseout(function(){
// $(this).animate({'margin-top':0})
// })
// $('.father').mouseenter(function(){
// $(this).animate({'margin-top':150})
// })
// $('.father').mouseleave(function(){
// $(this).animate({'margin-top':0})
// })
$('.father').hover(function(){
// 鼠标移入
$(this).animate({'margin-top':150})
}, function(){
// 鼠标离开
$(this).animate({'margin-top':0})
})
})
</script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
表单验证：用户输入，然后利用正则判断，如果正确，那么让其登录。
XHTML1.0 $('form').submit(function(){}) ----- 一个页面只能有一个form标签
HTML5.0 表单域标签的id名.submit(function(){}) --- 一个页面可以有多个form
表单提交submit 组织默认提交行文 return false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 表单域.submit(function(){})
// xhtml1.0 $('form').submit(function(){}) -- 一个页面只能有一个form标签
// html5.0 表单域标签的id名.submit(function(){}) -- 一个页面可以有多个form标签
$('#login').submit(function(event){
// return false //某些浏览器里面表单有默认提交行为 -- return false 不需要event
// event.defaultPrevent()
alert('ok')
})
})
</script>
</head>
<body>
<form action="" method="get" id="login">
<input type="text">
<input type="submit">
</form>
</body>
</html>
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录