web前端入门 JavaScript与jQuery
一.选择器
1.1JavaScript选择器
根据ID获取
document.getElementById(id)
根据标签名获取元素
语法：document.getElementByTagName('标签名')
H5新增获取元素方式
document.getElementByClassName('类名') //根据类名返回元素对象集合
document.querySeleotor('选择器') //根据指定选择器返回第一个元素对象
document.querySeleotorALL('选择器') //根据指定选择器返回
1.2 jquery选择器
1.2.1基础选择器
$("div") $("#box") $(".box")
1.2.2层级选择器
$("ul li") $("ul>li")
1.2.3筛选选择器
$("ul li:first").css("color","red"); 选择第一个
$("ul li:last").css("color","red"); 选择最后一个
$("ul li:eq(2)").css("color","red"); 选择指定的 eq里面的是索引号 从0开始
$("ul li:odd").css("color","red"); 索引号为奇数的元素
$("ul li:even").css("color","red"); 索引号为偶数的元素
二.CSS样式
2.1JavaScript样式
设置属性的值：元素对象.属性名 = 值
<body>
<button id="ldh">刘德华</button>
<button id="zxy">张学友</button> <br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
// 修改元素属性 src
// 1. 获取元素
var ldh = document.getElementById('ldh');
var zxy = document.getElementById('zxy');
var img = document.querySelector('img');
// 2. 注册事件 处理程序
zxy.onclick = function() {
img.src = 'images/zxy.jpg';
img.title = '张学友思密达';
}
ldh.onclick = function() {
img.src = 'images/ldh.jpg';
img.title = '刘德华';
}
</script>
2.2 jQuery样式
选择器.css("属性名","属性值") 单个属性设置
选择器.css({
"属性名"：”属性值“,
"属性名"：“属性值”
})
示例代码
$("div").css("border","1px solid #000");
$("#box").css({
"width":"100px",
"height":"100px",
"background-color":"red"
})
三、对于内容的操作
3.1JavaScript对于内容的操作
JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素 里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）
3.1.1改变元素内容（获取或设置）
element.innerText
从起始的位置到终止位置的内容，但它去掉html标签 同时空格和换行也会去掉
elenment.innerHTML
起始位置到终止为止的全部内容，包括HTML标签 同时保留空格和换行
innerText改变元素内容
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<p>1123</p>
<script>
// 当我们点击了按钮， div里面的文字会发生变化
// 1. 获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2.注册事件
btn.onclick = function() {
// div.innerText = '2019-6-6';
div.innerHTML = getDate();
}
function getDate() {
var date = new Date();
// 我们写一个 2020年 10月 1日 星期四
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星 期六'];
var day = date.getDay();
return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
}
</script>
</body>
innerText和innerHTML的区别
-
获取内容时的区别： innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别： innerText不会识别html，而innerHTML会识别
案例代码
<body>
<div></div>
<p>
我是文字
<span>123</span
</p>
<script>
// innerText 和 innerHTML的区别
// 1. innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText = '<strong>今天是：</strong> 2019';
// 2. innerHTML 识别html标签 W3C标准 保留空格和换行的
div.innerHTML = '<strong>今天是：</strong> 2019';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
</body>
3.1.2 常用元素的属性操作
1.innerText 、innerHTML 改变元素内容
2.src href
3.id alt tittle
3.2 jQuery对于内容的操作
3.2.1 html
比如普通标签 div li tr td等内容的设置和获取语法如下：
- 选择器.html(‘xxx’) 设置内容
- 选择器.html() 小括号中没有设置 代表获取
$("#box").html("我是内容");
设置内容var res=$("#box").html();
获取内容console.log(res);
3.2.2val()
还有一些是表单标签比如input、textarea要想设置和获取内容语法如下：
- 选择器.val(‘xxx’) 设置内容
- 选择器.val() 小括号中没有设置 代表获取
$("#txt").val('xxxx') 设置内容
$("#txt").val() 获取内容
3.3.2text()
注意
比如div等设置和获取内容还可以用text(),但是它和html()的区别是：
-
1、html是把内容当成标签解析
2、text是把内容当成文本解析
$(".box").html("<p>我是子元素</p>")
$(".box").text("<p>我是子元素</p>")
四.事件
4.1 JavaScript对于内容的操作
4.1.1事件描述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时 产生一个 事件，然后去执行某些操作。
4.1.2事件三要素
- 事件源（谁）：触发事件的元素
- 事件类型（什么事件）： 例如 click 点击事件
- 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数
案例代码
<body>
<button id="btn">唐伯虎</button>
<script>
// 点击一个按钮，弹出对话框
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1) 事件源 事件被触发的对象 谁 按钮
var btn = document.getElementById('btn');
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3) 事件处理程序 通过一个函数赋值的方式 完成
btn.onclick = function() {
alert('点秋香');
}
</script>
</body>
4.1.3执行事件的步骤
- 获取事件源
- 注册事件（绑定事件）
- 添加事件处理程序（采取函数赋值形式）
案例代码：
<body>
<div>123</div>
<script>
// 执行事件步骤
// 点击div 控制台输出 我被选中了
// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
console.log('我被选中了');
}
</script>
</body>
4.1.4 常见的鼠标事件
鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousemdown 鼠标下按触发
4.2 jQuery对于内容的操作
4.2.1事件类别
- click 单击
- mouseover 鼠标经过
- mouseout 鼠标移开
- focus 获取焦点
- blur 失去焦点
- keydown 按键按下
- keyup 按键弹起、
- keypress 长按按键不松
4.4.2事件语法
选择器.事件名(function(){
这是具体执行的代码
})
代码示例：
$("#btn").click(function () {
$("#box").css({
"width":"100px",
"height":"100px",
"background-color":"red"
})
})
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
