javascript基础
事件
###事件：触发-响应机制
事件三要素
- 事件源:触发(被)事件的元素
- 事件名称: click 点击事件
- 事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用
var box = documen.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
}
属性操作
非表单属性
href、title、id、src、className
美女相册
<style>
* {
margin: 0;
padding: 0;
}
.mar20 {
margin-left: 20px;
}
html,
body {
width: 100%;
height: auto;
text-align: center;
background-color: #CCCCCC;
}
.span {
display: block;
height: 20px;
width: 300px;
}
</style>
</head>
<body>
<div id = "box">
<h1>宝贝BOSS</h1>
<span class = "span"></span>
<div id = "boss">
<a href="img/dearboss1.jpg" title = "宝贝1">
<img src = "img/dearboss1.jpg" width = "74" height = "46" alt = "宝贝1">
</a>
<a href="img/dearboss2.jpg" class ="mar20" title = "宝贝1">
<img src = "img/dearboss2.jpg" width = "74" height = "46" alt = "宝贝2">
</a>
<a href="img/dearboss3.jpg" class ="mar20" title = "宝贝1">
<img src = "img/dearboss3.jpg" width = "74" height = "46" alt = "宝贝3">
</a>
<a href="img/dearboss1.jpg" class ="mar20" title = "宝贝1">
<img src = "img/dearboss1.jpg" width = "74" height = "46" alt = "宝贝4">
</a>
</div>
<span class = "span"></span>
<div>
<img src = "img/boss.png" id = "bigimage" width = "298" height = "186" alt = "宝贝老板">
<p id = "remind">请点击需要查看的图片</p>
</div>
</div>
<script>
var boss = document.getElementById('boss');
var as = boss.getElementsByTagName('a');
for(i = 0; i < as.length; ++i ) {
var A = as[i];
A.onclick = function () {
var remind = document.getElementById('remind');
var bigimage = document.getElementById('bigimage');
remind.innerText = this.title;
bigimage.src = this.href;
return false; //取消后续内容的执行
}
}
</script>
</body>
总结
-
this. 表示当前被调用的函数
-
div标签的class在javascript中用classname表示; div标签的描述值用value
-
P标签的文本描述在javascript中用 innerText;
-
判断字符串是否为空,一般判断他的长度是否为0;
-
innerHTML和innerText
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);
- HTML转义符
" "
' '
& &
< < // less than 小于
> > // greater than 大于
空格
© ©
-
innerHTML和innerText的区别,都是双标签的属性
innerHTML返回的结果: 如果内容中有标签,会把标签也获取到
innnerText 返回的结果: 如果内容中有标签,会把标签过滤到,前后的换行和空白都去掉.
-
innerText的兼容性处理
<body> <div id = "box"> hello </div> <script> var box = document.getElementById('box'); console.log(getInnerText(box); function getInnerText(element) { if(typeof element.innerText == 'string') { return element.innerText; } else { return element.textContent; } } </script> </body>
注意:
设置内容的时候,下面两个都可以拿来设置,但是当设置不含标签内容的时候,应该使用innerText
innerText(textContent)
innerHTML
表单元素属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性 只有一个值,属于布尔类型
- checked 复选框选中属性 只有一个值,属于布尔类型
- selected 下拉菜单选中属性 只有一个值,属于布尔类型
案例
-
点击按钮禁用文本框
<body> <button id = "button1">开启</button> <button id = "button2">禁用</button> <input type = "password" id = "INPUT"> <script> var INPUT = document.getElementById('INPUT'); var button1 = document.getElementById('button1'); var button2 = document.getElementById('button2'); button1.onclick = function() { INPUT.disabled = false; } button2.onclick = function() { INPUT.disabled = true; } </script> </body> -
给文本框赋值，获取文本框的值
<body> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input id="btn" type="button" value="获取文本框的值"> </body> <script> var inputs = document.getElementsByTagName('input'); var btn = document.getElementById('btn'); btn.onclick = function () { var array = []; for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type == 'text') { array.push(input.value); } } console.log(array.join('|')); } </script> -
检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
<style> .bg { background-color: yellow; } </style> </head> <body> <p>账户</p> <input type="text" id = "butt1"><br> <p>密码</p> <input type="password" id = "butt2"><br> <p></p> <input type="button" id = "butt3" value = "登录"> <script> var butt1 = document.getElementById('butt1'); var butt2 = document.getElementById('butt2'); var butt3 = document.getElementById('butt3'); butt3.onclick = function() { if((butt1.value).length >= 3 || (butt1.value).length <= 6) { butt1.className = "bg"; } if((butt2.value).length >= 6 || (butt2.value).length <= 8) { butt2.className = "bg"; } } </script> -
设置下拉框中的选中项
<input type="button" value="设置" id='btnSet'> <select id="selCities"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">杭州</option> <option value="4">郑州</option> <option value="5">武汉</option> </select> <script> var btnSet = document.getElementById('btnSet'); btnSet.onclick = function () { var selCities = document.getElementById('selCities'); var options = selCities.getElementsByTagName('option'); // Math.random() -> [0, 1) // Math.random() * 5 -> [0, 5) var randomIndex = parseInt(Math.random() * options.length); // 4 根据索引获取option，并让option选中 var option = options[randomIndex]; option.selected = true; } </script> -
搜索文本框
<style> .red { color: red; } .black { color: green; } </style> </head> <body> <input type = "text" id = "textinput" value = "请输入搜索关键字"> <input type = "button" id = "buttoninput" value = "搜索"> <script> var textinput = document.getElementById('textinput'); var buttoninput = document.getElementById('buttoninput'); textinput.onfocus = function () { if (this.value === '请输入搜索关键字') { this.value = ''; this.className = 'red'; } } textinput.onblur = function () { if (this.value.length === 0 || this.value === '请输入搜索关键字') { this.value = '请输入搜索关键字'; this.className = 'gray'; } } </script> -
全选反选
<style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll" /> </th> <th>商品</th> <th>价钱</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox" /> </td> <td>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> <input type="button" value=" 反 选 " id="btn"> </div> <script> var j_tb = document.getElementById('j_tb'); var inputs = j_tb.getElementsByTagName('input'); var j_cbAll = document.getElementById('j_cbAll'); j_cbAll.onclick = function () { for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.checked = this.checked; } } for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.onclick = function () { checkAllCheckBox(); } } function checkAllCheckBox() { var isAllChecked = true; for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (!input.checked) { isAllChecked = false; } } j_cbAll.checked = isAllChecked; } var btn = document.getElementById('btn'); btn.onclick = function () { for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.checked = !input.checked; checkAllCheckBox(); } } </script> <!-- 1.设置全选按钮与子按钮的状态一致 2.判断子按钮是否全部被选中,如果未被全部选中,全选按钮必须为不选中 3.设置反选按钮的状态与自按钮的状态相反. --> </body>
总结知识点:
| . 当判断字符串是否为空时,一般都是判断字符串的长度 |
|---|
| 变量名.onclick = function () { } 表示点击变量时,执行函数 |
| 变量名.onfocus = function () { } 表示 聚焦变量时,执行函数 |
| 变量名.onblur = function () { } 表示变量失去焦点时,执行函数 |
| if (!input.checked) {} 判断一个复选框是否被选中,如果未被选中,执行函数 |
自定义属性操作
-
getAttribute() 获取标签行内属性
-
setAttribute() 设置标签行内属性
-
removeAttribute() 移除标签行内属性
-
与element.属性的区别: 上述三个方法用于获取任意的行内属性。
<div id = "box" age = "18" personId = "1">张三</div <script> var box = document.getElementById('box'); console.log(box.getAttribute('age')); box.setAttribute('sex','male'); box.removeAttribute('age'); </script>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
