<!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>
.myclass {
width: 200px;
height: 50px;
background: red;
}
.radius {
border-radius: 20px;
}
</style>
</head>
<body>
<!--<div id="div1" style="background:red; width:100%; height:50px;"></div>-->
<p class="p1" style="background:green; width:100%; height:50px;"></p>
<p>second</p>
<img id='img1' width="180" src="http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg">
<br />
<input id="input_chk" type="checkbox" flag="true" /><button onclick="chk()">选中</button>
<button onclick="ischk()">是否选中</button>
<br />
<button onclick="remove_attr()">移除attr属性</button>
<button onclick="chk_prop()">prop增加图片高度</button>
<button onclick="remove_prop()">移除prop属性</button>
<br />
<br />
<div class="myclass"><span style="color:green;">PHP中文网</span></div>
<div class="myclass1"><span style="color:green;">wwwphpcn</span><span>PHP中文网</span></div>
<button onclick="add()">addClass</button>
<button onclick="removes()">removeClass</button>
<button onclick="toggleClass()">toggleClass</button>
<br />
<br />
<button id="btn" onclick="chickme()">点击获取验证码</button>
<br />
<br />
<button onclick="get_html()">获取html</button>
<br />
<br />
<input type="text" id='username' placeholder="请输入用户名">
<button onclick="get_username()">获取用户名</button>
<br />
<br />
<button onclick="get_size()">获取div的宽度高度</button>
<br />
<br />
<button onclick="get_input_div()">获取input和div</button>
<div class="radius"></div>
</body>
</html>
<script type="text/javascript">
// var res = $('button');
// $.each(res, function(i, v)) {
// console.log(v);
// }
// 统计元素多少个
var res1 = $('div').length;
console.log(res1);
$('img').prop('width', 280);
//获取图片css.width属性
console.log($('img').css('width'));
//给元素加属性
$('p').attr('flag', '123');
var res = $('p').attr('flag');
console.log(res);
//checked问题，checked、true（attr）
/*
function chk() {
$('#input_chk').attr('checked', true);
}
function ischk() {
alert($('#input_chk').attr('checked'));
}
*/
//attr返回结果是属性值/undefined
//prop返回结果是布尔值
function chk() {
$('#input_chk').prop('checked', true);
}
function ischk() {
alert($('#input_chk').prop('checked'));
}
function remove_attr() {
$('#input_chk').removeAttr('flag');
}
//removeProp不能移除固有元素
function chk_prop() {
$('#img1').prop('heigh', 120);
var lll = $('#img1').prop('heigh');
alert(lll);
}
function remove_prop() {
$('#img1').removeProp('heigh');
var lll = $('#img1').prop('heigh');
alert(lll);
}
//增加class
function add() {
$('div').addClass('radius');
}
//移除class
function removes() {
$('div').removeClass('radius');
}
//判断是否有此class，增加删除
function toggleClass() {
$('div').toggleClass('radius');
}
//倒计时执行任务
/*
setTimeout(function() {
chickme();
}, 5000);
*/
//验证码倒计时
//定时器
function set_timer() {
$('#btn').attr('disabled', true);
var i = 10;
var timer = setInterval(function() {
$('#btn').text(i);
if (i == 0) {
$('#btn').text('点击获取验证码');
//清除定时器
clearInterval(timer);
//$('#btn').removeAttr('disabled');
$('#btn').attr('disabled', false);
}
i--;
}, 1000);
}
function chickme() {
var res = $('#btn').text();
if (res == '点击获取验证码') {
//启动倒计时
set_timer();
}
}
//获取HTML
//html会识别样式内容
//text会把所有内容当做字符
function get_html() {
var res = $('.myclass').html('<span style="color:yellow;">asdasdsd</span>');
console.log(res);
}
//获取用户名 val
function get_username() {
//获取
var res = $('#username').val();
alert(res);
//设置
//$('#username').val('administrator');
}
//获取div高度宽度
function get_size() {
var width = $('.myclass').width();
var height = $('.myclass').height();
alert('宽度：' + width + ' ；高度：' + height);
//设置高度
$('.myclass').height(100);
}
//类选择器
function get_input_div() {
//类选择器
var res = $('div.radius,input');
$.each(res, function(i, v) {
console.log(v);
})
}
//层级选择器
var result = $('.myclass span').text();
console.log(result);
var result1 = $('.myclass1 span')
$.each(result1, function(i, v) {
console.log($(v).text());
})
</script>
总结：
今天主要学习了Jquery属性、css、定时器、类选择器、层级选择器
1、attr、prop、removeAttr、removeProp
attr：给元素添加属性（可显示结果）
prop：给元素添加属性（隐藏结果不可见）
removeAttr：移除属性
removeProp：移除属性（不能移除固有属性：如width、height等）
2、addClass、removeClass、toggleClass
addClass：增加class样式
removeClass：移除class样式
toggleClass：自判断增加移除class样式，如果结果有就移除，否则增加
3、获取HTML内容
html：会一别样式内容
text：会把所有内容当作字符串
如：var res = $('.myclass').html('<span style="color:yellow;">asdasdsd</span>'); 结果显示 黄色的asdasdsd
如：var res = $('.myclass').text('<span style="color:yellow;">asdasdsd</span>'); 结果显示整个字符 <span style="color:yellow;">asdasdsd</span>
4、val、width、height
val：读取内容值； // $('#username').val(); 读取id为username的value，如果val('admin')，括号里面添加内容，就是设置值；
width：获取宽度
height：获取高度
5、类选择器、层级选择器
类选择期：div.radius , input //选择 div.radius 和 input
var res = $('div.radius,input');
$.each(res, function(i, v) {
console.log(v);
})层级选择器：.myclass span //选择 .myclass 下的 span
<div class="myclass1"><span style="color:green;">wwwphpcn</span><span>PHP中文网</span></div>
var result1 = $('.myclass1 span')
$.each(result1, function(i, v) {
console.log($(v).text());
})6、定时器
<button id="btn" onclick="chickme()">点击获取验证码</button>
//Jquery
//定时器开启 ②
function set_timer() {
//设置id为btn的disabled值为true，不能再点击
$('#btn').attr('disabled', true);
//设置倒计时秒数
var i = 10;
//定时器： setInterval ( function() { 代码内容 }, 秒数 )；
var timer = setInterval(function() {
//设置id为btn文本的值为i
$('#btn').text(i);
//当 i==0
if (i == 0) {
//重新赋值为 点击获取验证码
$('#btn').text('点击获取验证码');
//清除定时器
clearInterval(timer);
//开启可以点击
$('#btn').attr('disabled', false);
}
//每次减1
i--;
}, 1000);
}
//点击开启定时器 ①
function chickme() {
//获取id为btn的text值
var res = $('#btn').text();
如果等于xxx，开始定时器
if (res == '点击获取验证码') {
//启动倒计时
//调用set_timer方法
set_timer();
}
}