<!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 type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.red-rect {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<!-- <input type="checkbox" id="chk" /> -->
<form>
<label>Name:</label>
<input type="text" name="username" placeholder="姓名" />
<div style="border:1px solid #cdcdcd; margin:10px; padding:5px;">
<label>email：</label>
<input type="text" name="email" placeholder="email" />
</div>
</form>
<p>none</p>
<input type="text" name="none" />
<div class="main">
<div class="header">
<div class="nav">
<a>首页</a>
<a>视频教程</a>
</div>
</div>
<div class="imgs">
<img />
</div>
<div class="article_list">
<p>文章列表1</p>
<p>文章列表2</p>
<p>文章列表3</p>
<p>文章列表4</p>
</div>
</div>
<input type="hidden" name="name" id="article_id" />
<div class="red-rect"></div>
<button onclick="move()">动起来</button>
<div flag="aaa">aaa</div>
<div flag="ccc">ccc</div>
<span class="icon aaa">span aaa</span>
<br />
<span name="myspan" class="icon layui-icon-face-smile">span icon</span>
</body>
</html>
<script type="text/javascript">
// $('#chk').prop('kkkkkkkkk', true);
// $('#pwd').removeProp('kkkkkkkkk');
//层级关系
// 有>号，表示main下一级有多少个div
// 没有>号，表示main下一共有多少个div
var res = $('.main>div');
console.log('一共有' + res.length + '个元素');
$.each(res, function(i, v) {
console.log(v);
})
// 加号，表示紧接着P的input有多少个
var res1 = $('p + input');
console.log('一共有' + res1.length + '个元素');
$.each(res1, function(i, v) {
console.log(v);
})
//选择.article_list下第一个P
//$('.article_list p:first').css('color', 'red')
//选择.article_list下第N个P，下标从0开始
//$('.article_list p:eq(1)').css('color','red')
//从第几个下标开始
//$('.article_list p:gt(1)').css('color','red')
//索引值少于N的开始
//$('.article_list p:lt(3)').css('color','red')
//选择最后一个
//$('.article_list p:last').css('color', 'red')
//动画移动
//animate({'方向':'数值'},时间)
function move() {
/*
$('.red-rect').animate({
'margin-left': '+=200px'
}, 1000).animate({
'margin-top': '+=100px'
}, 1000).animate({
'margin-left': '-=200px'
}, 1000).animate({
'margin-top': '-=100px'
}, 1000)
*/
var left = 1;
var timer = setInterval(function() {
$('.red-rect').css('margin-left', left);
left++;
if (left > 200) {
clearInterval(timer);
}
}, 1);
}
//：hidden(匹配不可见元素)
//var res2 = $(':hidden');
//:visible(匹配可见元素)
//var res2 = $(':visible');
//查找div下flag元素
//$('div[flag]');
//$("div[flag='aaa']").css('color', 'red');
//不等于aaa
//$("div[flag!='aaa']").css('color', 'green');
//赋值
//$("input[name='username']").val('admin');
//$('input[name="username"]').css('border','1px solid red');
//所有以a开头的class都设置为红色
//$('[class^="a"]').css('color','red');
//所有以e结尾的name：
//$('[name$="e"]').animate({'margin-left':'+=100px'},100);
//包含
//$('span[class*="layui-icon-face-smile"]').css('color','red');
//span包含 并且 name等于
//$('span[class*="layui-icon-face-smile"][name="myspan"]').css('color','red');
//:input匹配所有input、textarea、select、button元素
//:enabled 匹配剔除disabled元素
//var res = $('input:enabled');
//$.each(res, function(i, v) {
// console.log(v);
//})
// :disabled 匹配disabled元素
// :checked 选择选中的属性
//$('input[name="sex"]:checked').val()
// :selected
//$('select option:selected').val();
//$('select[name="province"]').val();
</script>
总结：
今天内容学习了选择器内容
1、层级关系：
$('.main>div') ： 有>号，表示main下一级有多少个div ；如过没有>号，表示main下一共有多少个div；
$('p + input') ：加号，表示紧接着P的input有多少个
2、基本选择器
:first ：表示选择某个某个样式下的第一个元素。 选择article_list下第一个P，修改color样式为红色
$('.article_list p:first').css('color', 'red'):eq ：表示选择某个样式下的第N个元素。 选择article_list下的第2个P，修改color样式为红色，索引值从0开始
$('.article_list p:eq(1)').css('color','red'):gt ：表示选择从第几个元素开始。 选择article_list，从第2个P开始，修改color样式为红色，索引值从0开始
$('.article_list p:gt(1)').css('color','red'):lt ：选择索引值少于N，开始执行。 选择article_list，索引值少于4的，修改color样式为红色，索引值从0开始。
$('.article_list p:lt(3)').css('color','red'):last ：选择某个样式下的最后一个元素。 选择article_list下最后一个P，修改color样式为红色。
$('.article_list p:last').css('color', 'red')3、动画移动 animate( { '方向' : '数值' } , 时间 )
$('.red-rect').animate({ 'margin-left': '+=200px' }, 1000)
.animate({ 'margin-top': '+=100px' }, 1000)
.animate({ 'margin-left': '-=200px' }, 1000)
.animate({ 'margin-top': '-=100px' }, 1000)可以使用链式方法，直接连下去。
4、可见性选择器
:hidden ：匹配不可见元素
<input type="hidden" name="name" id="article_id" />
$(':hidden');
//可把此input查找出来:visible ：匹配可见元素
<input type="hidden" name="name" id="article_id" />
$(':visible');
//可把除了此input之外元素查找出来5、属性选择器
查找元素
$('div[flag]'); //查找div下flag元素
$("div[flag='aaa']").css('color', 'red'); //查找div下flag=aaa的元素，并修改color属性为red
$("div[flag!='aaa']").css('color', 'green'); //查找div下flag不等于aaa的元素，并修改color属性为green赋值
$("input[name='username']").val('admin'); //查找input下name=username，赋值为admin
$('input[name="username"]').css('border','1px solid red'); //查找Input下name=username，给css样式加边框选择指定字母开头的class class^ = '开头字母'
$('[class^="a"]').css('color','red'); //选择class样式名以a开头的样式，添加color为红色选择指定字母结尾的元素 name$ = '结尾字母'
$('[name$="e"]').animate({'margin-left':'+=100px'},100); //选择name以e结尾的，添加移动方法
$("input[name$='e']")).animate({'margin-left':'+=100px'},100); //选择input下name以e结尾的，添加移动方法包含
//1
$('span[class*="layui-icon-face-smile"]').css('color','red'); //选择span下class包含layui-icon-face-smile的样式，添加color为red
//2
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
$("input[name*='man']") //此选择以上4个input，因为name都包含了man
//3 包含，并且
$('span[class*="face-smile"][name="myspan"]').css('color','red'); //span下样式包含face-smile，并且name=myspan，添加样式color为red