jquery操作dom 元素属性和jquery 基本选择器练习
jquery操作dom 元素属性和jquery 基本选择器练习 jquery操作dom 元素属性和jquery 基本选择器练习
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 面向对象</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background-color: red;width: 100%;height: 50px;"></div>
<p class="p1" style="background-color: green;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变div颜色</button>
<button onclick="change_size_p()">改变P的大小</button>
<input id="input_chk" type="checkbox" flag="true"/><button onclick="chk()">选中</button>
<button onclick="ischk()">是否选中</button>
</body>
</html>
<script type="text/javascript">
function chk(){
$('#input_chk').attr('checked',true);
}
function ischk(){
var res = $('#input_chk').attr('checked');
alert(res);
}
// 方法一，改变div颜色 .css({'background':'#0000ff'});
// function change_color_div() {
// $('#div1').css({'background':'#0000ff'});
// }
// 方法二，改变div颜色 .css('background','#0000ff');
// function change_color_div() {
// $('#div1').css('background','#00ff00');
// }
//
// function change_size_p() {
// $('.p1').css('width','200px');
// }
//
// var res = $('button').length;
// console.log(res);
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 面向对象</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background-color: red;width: 100%;height: 50px;"></div>
<p class="p1" style="background-color: green;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变div颜色</button>
<button onclick="change_size_p()">改变P的大小</button>
<input id="input_chk" type="checkbox" flag="true"/><button onclick="chk()">选中</button>
<button onclick="ischk()">是否选中</button>
<button onclick="remove_attr()">移除attr属性</button>
</body>
</html>
<script type="text/javascript">
function chk(){
$('#input_chk').attr('checked',true);
}
function ischk(){
var res = $('#input_chk').attr('checked');
alert(res);
}
function remove_attr() {
$('#input_chk').removeAttr('flag');
}
// 方法一，改变div颜色 .css({'background':'#0000ff'});
// function change_color_div() {
// $('#div1').css({'background':'#0000ff'});
// }
// 方法二，改变div颜色 .css('background','#0000ff');
// function change_color_div() {
// $('#div1').css('background','#00ff00');
// }
//
// function change_size_p() {
// $('.p1').css('width','200px');
// }
//
// var res = $('button').length;
// console.log(res);
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 面向对象</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<style>
.myClass{width: 140px;height: 50px;background-color: red;}
.radius{border-radius: 8px}
</style>
</head>
<body>
<div class="myClass"><span style="color: red;">sss</span></div>
<button onclick="add()">addClass</button>
<button onclick="removes()">removeClass</button>
<button onclick="toggle()">toggleClass</button>
<button onclick="clickme()" id="btn">点击获取验证码</button>
<button onclick="get_html()">获取html</button>
<input type="text" id="username" />
<button onclick="get_username()">获取用户名</button>
</body>
</html>
<script type="text/javascript">
function get_username(){
$('#username').val('administrator');
// var username =$('#username').val('administrator');
// alert(username);
}
function get_html(){
var res = $('.myClass').html();
console.log(res);
}
setTimeout(function () {
clickme();
},5000);
function clickme() {
var res = $('#btn').text();
if (res=='点击获取验证码'){
// 启动倒计时
set_timer();// 不写参数获取，传参数设置值
}
}
// javascript 定时器setInterval()
function set_timer() {
$('#btn').attr('disabled',true);
var i = 10;
var timer = setInterval(function () {
$('#btn').text(i);
if (i<=0){
$('#btn').text('点击获取验证码');
$('#btn').attr('disabled',false);
// 清除定时器 clearInterval()
clearInterval(timer);
}
i--;
},1000);
}
function add(){
$('div').addClass('radius');
// $('div').css('border-radius','8px');
}
function removes(){
$('div').removeClass('radius');
}
function toggle(){
$('div').toggleClass('radius');
}
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
