<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="id" class='aaa'>
js
<div class="a"></div>
</div>
<ul>
<li class=" oo">第一</li>
<li>第二</li>
<li>第三</li>
</ul>
<img id='img' src="./logo_03.jpg" alt="">
<div class="c" onclick="ab()">点击</div>
<input type="text" id="input" value="zhangsna">
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script>
//通过id获取对应元素
// var id=document.getElementById('id');
// console.log(id);
//通过标签名获取元素
// var ta=document.getElementsByTagName('div');
// console.log(ta[1]);
//通过class获取元素因为页面中有多个class所以获取的是集合
// var cl=document.getElementsByClassName('c')
// console.log(cl[0]);
// jQuery获取元素
// var a =$('#id');
// console.log(a);
// var d= $('div');
// console.log(d[0]);
// var c=$('.c');
// console.log(c[0])
// js修改内容
// document.getElementById('id').innerText = 'jq'
// jQuery修改内容
// $('#id').text('jq');
//***js写在外部文档时实现点击事件***
// document.getElementById('id').onclick=(function(){
// alert('hello')
// })
//*** jQuery写在外部文档时实现点击事件***
// $('#id').click(function(){
// alert('hello')
// })
// **用jq给每个li标签加点击事件**
// $('li').click(function(){
//只是点击后弹出窗口
// alert('hello');
//这是实现点击谁弹出谁,$(this)就是指的被点击的对象
// alert($(this).text());
// })
//用js给每个li标签加点击事件
// var j =document.getElementsByName('li').length;
// for(i=0;i<j;i++){
// document.getElementsByName('li')[i].onclick = function(){
// alert('hello');
// }
// }
//onclick点击事件修改内容
function ab(){
// js点击后修改内容,innerText属性不会解析HTML标签,innerHTML可以
// document.getElementById('id').innerText='<b>jquery</b>'
// js点击后修改内容,innerHTML可以解析HTMl标签
// document.getElementById('id').innerHTML='<b>jquery</b>'
//jq点击后修改内容,不会解析HTML代码
// $('#id').text('jq');
//jq点击后修改内容, .html是可以解析html代码
// $('#id').html('<b>jquery</b>');
// 修改属性,改变后的属性可以设置到CSS中这样点击后就可以改变样式
// document.getElementById('id').className='bbb';
// 第二种修改属性的方法
// document.getElementById('img').setAttribute('src','nrt_03.jpg');
//通过修改属性来实现图片的切换
// document.getElementById('img').src='nrt_03.jpg';
// jQuery修改属性
// $('#id').attr('class','bbb');
// jQuery添加class属性
// $('#id').addClass('cccc');
// jQuery删除class属性
// $('#id').removeClass('cccc');
//js修改CSS样式
// document.getElementById('id').style.height='200px';
// jQuery修改CSS样式
// $('#id').css('height','200px');
// jQuery修改多个CSS样式,如果修改单个就把,后面删掉就可以了
// $('#id').css({'height':'200px','width':'200px'});
//js修改input的value值
// document.getElementById('input').value='lisi';
// jQuery修改input的value值,注意是val
$('#input').val('lisi')
}
// jQuery点击事件给 添加class名
// $('ul li').click(function(){
// $(this).addClass('cccc')
// })
// jQuery点击事件 删除class名
// $('ul li').click(function(){
// $(this).removeClass('cccc')
// })
</script>
<style>
/* #id.bbb{
color: aqua;
}
ul li{
color: red;
}
ul li.cccc{
color: royalblue;
} */
</style>
</html>