标签：jQuery jquery 前端 元素 var div id
前端（六）
事件
// 用的地方非常多，需要掌握，但是不需要全部掌握。事件就是达到某个触发条件，自动触发的动作
常用事件：
1. onclick 当用户点击某个对象时调用的事件句柄。
2. onfocus 元素获得焦点。
3. onblur 元素失去焦点。
4. onchange 域的内容被改变。
5. onl oad 一张页面或一幅图像完成加载。
6. onm ouseout 鼠标从某元素移开。
7. onm ouseover 鼠标移到某元素之上。
事件绑定
<button onclick="fun()">点击</button>
<script>
function fun(){ // 第一种绑定方式
alert(123);
}
</script>
////////////////////////////////////////////////////////////////////
btn.onclick = function (){ // 用的最多的绑定方式
alert(123)
}
////////////////////////////////////////////////////////////////////
eg：
<head>
<script>
window.onload = function (){ // 等待浏览器全部加载完毕才执行
btn.onclick = function (){
alert(123)
}
}
</script>
</head>
///////////////////////////////////////////////////////////////////
eg2：
<style>
.c1 {
width: 100px;
height: 100px;
border-radius: 50%;
}
.bg_red {
background: red;
}
.br_blue{
background: blue;
}
</style>
<body>
<p class="c1 bg_red br_blue"></p>
<button id="btn">点击</button>
<script>
var btn = document.getElementById('btn')
var p = document.getElementsByClassName('c1')[0]
btn.onclick = function (){ // 每次点击时生效
p.classList.toggle('br_blue') // 存在则删除，不在则添加
}
</script>
</body>
///////////////////////////////////////////////////////////////////
eg3：
<body>
<input type="text" id="inp1" value="什么勾八">
<script>
var inp = document.getElementById('inp1');
inp.onfocus = function (){ // 获得焦点
this.value = '小鸡仔';
}
inp.onblur = function (){ // 失去焦点
this.value = '什么勾八';
}
</script>
</body>
///////////////////////////////////////////////////////////////////
eg4:
<body>
<select name="" id="pro">
</select>
<select name="" id="city">
</select>
<script>
var pro = document.getElementById('pro');
var city = document.getElementById('city');
var date = {
"安徽": ['宣城', '合肥', '芜湖'],
'江苏': ['南京', '常州', '徐州'],
'浙江': ['杭州', '湖州', '台州'],
}
for (var i in date) {
var op = document.createElement('option');
op.innerText = i;
op.value = i;
pro.appendChild(op) // 添加option
}
pro.onclick = function () {
city.innerText = ''; // 将下拉框清空
var current_pro = pro.value;
var current_city_list = date[current_pro];
for (var i=0; i<current_city_list.length;i++){
var op = document.createElement('option');
op.innerText = current_city_list[i];
op.value = current_city_list[i];
city.appendChild(op); // 添加option
}
}
</script>
</body>
jQuery
# js的类库，封装了很多js代码，并且增加了很多功能，相当于python中的模块
# 使用jQuery可以更少写js代码，jQuery是对js的一个封装
jQuery的介绍
"""
1. 轻量级，兼容多浏览器的js库，使用时不需要担心兼容性
2. 宗旨write less，do more
3. 要用jQuery必须下载使用，然后引入html文档
4. 下载的jQuery文件大小只有几十kb，几乎不影响加载速度
"""
jQuery的内容
"""
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax(放在Django中学---》重要)
"""
jQuery版本
"""
1.x
2.x
3.x # 直接学习最新版本
"""
jQuery文件去哪里下载？
"""
1. 去官网：https://jquery.com/
2. 第三方：https://jquery.cuishifeng.cn/index.html
3. bootcdn网站下载：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js
4. 使用jquery文件有两种方式：
1、 把文件下载下来，离线使用
2、 不下载，直接通过cdn链接使用(你的电脑必须有网)
5. 下载。
"""
jquery基本使用
"""
jQuery("selector").action()
jQuery("#d1").css('color', 'red');
# jQuery === $
jQuery("#d1").css('color', 'red');=============>$("#d1").css('color', 'red')
"""
重要：要想使用jQuery文件，必须确保已经导入到文档了
基本选择器
1. id $("#id")
2. class $(".className")
3. 标签选择器 $("tagName")
标签对象和jQuery对象
var h1 = $("#h1"); // S.fn.init(1) =================> 它是jquery对象，标签对象
# 两个对象之间可以进行互相转换
query对象转为标签对象: # 直接通过下标取值
标签对象如何转为jquery对象：document.getElementById('id')================>$(document.getElementById('id'));
'''jquery对象，可以使用jquery封装的很多方法'''
其他选择器
$(".c1")-------------->具有class=c1的所有标签
$("div.c1")-------------->具有class=c1的div标签
基本筛选器
:first # 第一个
:last # 最后一个
:eq(index)# 索引等于index的那个元素
:even # 匹配所有索引值为偶数的元素，从 0 开始计数
:odd # 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)# 匹配所有大于给定索引值的元素
:lt(index)# 匹配所有小于给定索引值的元素
:not(元素选择器)# 移除所有满足not条件的标签
:has(元素选择器)# 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
[attribute]
[attribute=value] # 属性等于
[attribute!=value] # 属性不等于
表单筛选器
:text # 文本
:password # 密码
:file # 文件
:radio # 单选框
:checkbox # 复选框
:submit # 提交按钮
:reset # 重置按钮
:button # 按钮
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") # 找到所有被选中的option
$(':checked') # 它会将checked和selected都拿到
$(':selected') # 它不会 只拿selected
$('input:checked') # 自己加一个限制条件
筛选器方法
# 下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
# 上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 父亲元素：
$("#id").parent()
# 儿子元素
$("#id").children();// 儿子们
var div = $('#d1').children()[0];
console.log(div);
# 查找
$("div").find("p")----------------->等价于$("div p")
$(".c1").find("a")----------------->等价于$(".c1 a")
# 补充：
.first() // 获取匹配的第一个元素
$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素
$('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
$('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
样式操作
classList.add()------------------>addClass();// 添加指定的CSS类名。
classList.reomve()----------------->removeClass();// 移除指定的CSS类名。
classList.containes()------------------>hasClass();// 判断样式存不存在
classList.toggle()--------------->toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS操作
$("p").css("color", "red"); # 添加一个样式
$("p").css("color", "red").css('','').css('',''); # 添加多个样式
文本操作(掌握)
innerHTML--------------->html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
标签：jQuery,
jquery,
前端,
元素,
var,
div,
id
From： https://www.cnblogs.com/juzixiong/p/17331154.html