Python全栈之学习JQuery
目录
- 1. lable标签补充
- 2. jquery引入和简单使用
- 3. 选择器
- 3.1 基础选择器
- 3.2 组合选择
- 3.3 层级选择器
- 3.4 属性选择器
- 3.5 表单对象属性选择器
- 3.6 表单选择器
- 3.7 筛选器方法
- 4. 文本操作
- 4.1 选择器优先级和类值操作
- 4.2 值操作
- 4.3 创建标签
- 4.4 文档操作
- 4.5 删除和清空标签
- 4.6 字符串占位符
- 总结
1. lable标签补充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label>
用户名: <input type="text">
</label>
<label for="password">密码:</label>
<input type="text" id="password">
</body>
</html>
2. jquery引入和简单使用
jquery引入：
jquery对原生js封装bootcdn官网：https://www.bootcdn.cn/外部网址引入（一般不用）<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->本地文件引入（bootcnd：提供了很多插件网站的地址，加速过的，直接在搜索框中搜索jquery，然后把连接放在地址栏，把返回的结果复制到jquery.js(在pycharm中与html同级的目录)里面，然后html进行引用即可）<script src="jquery.js"></script> //jquery.js本地文件路径jquery对原生js封装 bootcdn官网：https://www.bootcdn.cn/ 外部网址引入（一般不用） <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>--> 本地文件引入（bootcnd：提供了很多插件网站的地址，加速过的，直接在搜索框中搜索jquery，然后把连接放在地址栏，把返回的结果复制到jquery.js(在pycharm中与html同级的目录)里面，然后html进行引用即可） <script src="jquery.js"></script> //jquery.js本地文件路径
juery初始
var d1 = $('#d1'); -- jquery对象 -- jQuery.fn.init [div#d1]
var d = document.getElementById('d1'); -- 原生dom对象 -- <div id='d1'></div>
jquery对象和dom对象之前不能调用互相的方法
jquery对象和dom对象可以互相转换
d1[0] -- dom对象 # 通过索引取值的方式
$(d) -- jquery对象 # $(原生DOM对象)
再次解释：
$("#d1")[0].innerHTML但凡从中括号索引取出来的值，都是原生dom对象
原生dom对象转为jquery对象，使用text方法获取文本
a：原生dom对象
$(a) 这就转成juery对象，在调用text方法$(a).text();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>皇家赌场</h1>
</div>
</body>
<!--<script src="jquery.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!--<script>-->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!--</script>-->
</html>
3. 选择器
3.1 基础选择器
知识点：
// id选择器
$('#d1') -- 同css
// 类选择器
$('.c1')
$(".c1").css({'color':'green'});
// 元素选择器
$('标签名称') -- $('span')
// 查看jquery对象找到的元素个数
$("li").length;
基础选择器使用：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul> <li class="c1">葛龙</li> <li>高学峰</li> <li class="c1">何旭彤</li> <li>宋健</li> <li id="weige">刘利伟</li> <li>王同佩</li></ul></body><script src="jquery.js"></script><script> // $("#weige"); id选择器 // $(".c1");类值选择器 示例:$(".c1").css({'color':'green'}); 设置字体颜色 // $("li");标签选择器,写标签名称</script></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1">葛龙</li>
<li>高学峰</li>
<li class="c1">何旭彤</li>
<li>宋健</li>
<li id="weige">刘利伟</li>
<li>王同佩</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
// $("#weige"); id选择器
// $(".c1");类值选择器 示例:$(".c1").css({'color':'green'}); 设置字体颜色
// $("li");标签选择器,写标签名称
</script>
</html>
3.2 组合选择
因为每次都要引入jquery.js比较麻烦，所以可以直接在模板里添加默认引入：
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
xxxx
</div>
<div id="d1">
oooo
</div>
</body>
// 引入js文件或者写js代码的时候,最好写到html文件的最下方,但是要在html标签内部
<script src="jquery.js"></script>
<script>
// 示例 组合选择器
$("#d1,.c1");
$("#d1,.c1").css({'color':'red'});
</script>
</html>
示例2：
$('#d1,.c2')
示例:
html代码
<div id="d1"></div>
<div class="c2">
这是c2
</div>
css代码:
#d1,.c2{
background-color: red;
height: 100px;
width: 100px;
border-bottom: 1px solid black;
}
jquery代码:
$('#d1,.c2').css('background-color','green');
$('#d1,.c2')[1]; -- 索引为1的dom对象
$('#d1,.c2').eq(1); -- 索引为1 的jquery对象
$('#d1,.c2')
示例:
html代码
<div id="d1"></div>
<div class="c2">
这是c2
</div>
css代码:
#d1,.c2{
background-color: red;
height: 100px;
width: 100px;
border-bottom: 1px solid black;
}
jquery代码:
$('#d1,.c2').css('background-color','green');
$('#d1,.c2')[1]; -- 索引为1的dom对象
$('#d1,.c2').eq(1); -- 索引为1 的jquery对象
3.3 层级选择器
找标签下的儿子、孙子，比如 $(“form input”)
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<h1>只要python学的好,媳妇年年在高考</h1>
</div>
<h1>
主要你有钱,对象刚进幼儿园
</h1>
</body>
<script src="jquery.js"></script>
<script>
// 示例
$(".c1 h1").css({"color":'green'});
</script>
</html>
3.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1" xx="lnh">
书山有路勤为径，学海无涯苦作舟！
</div>
</body>
<script src="jquery.js"></script>
<script>
// 通过属性名查找标签
$("[class]");
$("[xx]"); // 自定义属性
// 通过属性名对应属性值来查找标签
$("[class='c1']");
$("[xx='lnh']"); //自定义属性
</script>
</html>
3.5 表单对象属性选择器
知识点：
:checked 找到被选中的input标签
:selected 找被选中的select标签中的option标签
:disabled 不可操作的标签
:enabled 可操作的标签
示例:
html代码:
用户名:<input type="text" id="username" disabled>
密码: <input type="text" id="password">
jquery代码:
$(':enabled');
$(':disabled');
示例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="3">未知
<select name="city" id="city">
<option value="1">上海</option>
<option value="2">深圳</option>
<option value="3">北京</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
// $(':checked'); 能够找到input选择框和select下拉选择框中被选中的option标签
// $(':selected'); 找到的是select下拉框中被选中的option标签
</script>
</html>
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
// 标签里属性和值相等的时候，直接写属性就ok(disabled="disabled")
<input type="text" id="s1" disabled>
<input type="text">
<input type="password">
</body>
<script src="jquery.js"></script>
<script>
$(":enabled"); // 找到可操作的标签
$(":disabled"); // 找到不可操作的标签
</script>
</html>
3.6 表单选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
用户名: <input type="text">
<br>
密码 <input type="password">
<br>
性别选择:
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="3">未知
</body>
<script src="jquery.js"></script>
<script>
$(':text') // type='text' 的input标签
$(':password') // type='password' 的input标签
$(':radio') // type='radio' 的input标签
</script>
</html>
3.7 筛选器方法
原生js中的间接查找选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="c1">刘义沨</li>
<li >李亚锋</li>
<li id="singer">
<span class="s1">张磊1</span>
<span>张磊2</span>
</li>
<li>高华新</li>
<li class="superman">赵世超</li>
<li>杨元涛</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
var res = $("#singer").parent(); // 找该标签的父辈
var res = $("#singer").parents(); // 找到所有的直系祖先辈
$("#singer").parentsUntil('body'); // 直到找到符合某个选择器的标签为止,不包含该选择器对应的那个标签
$("#singer").children(); // 找儿子辈的标签
$("#singer").children('.s1'); // 对找到的儿子标签进行过滤 $("#singer").children('选择器');
$("#singer").next(); // 找到下一个兄弟标签
$("#singer").nextAll(); // 找到它下面的所有兄弟标签
$("#singer").nextUntil('.superman'); // 找它下面的兄弟标签,直到找到符合某个选择器的标签为止,并且不包含该标签
$("#singer").prev(); // 找到上一个兄弟标签
$("#singer").prevAll(); // 找到它上面所有的兄弟标签
$("#singer").prevUntil('.c1'); // 找它上面的兄弟标签,直到找到符合某个选择器的标签为止,并且不包含该标签
$("#singer").siblings() // 找到所有兄弟标签,不包含自己
$("#singer").siblings('.c1') // 找到兄弟标签中符合选择器的兄弟标签
$('ul').find('span'); // 找到后代中所有符合条件的标签
$('li').first(); // 找到所有找到的标签中的第一个标签,获得的是jq对象
$('li').last(); // 找到最后一个标签
$('li').eq(0); // 通过索引取值找到标签,拿到的是jq对象
$('li')[0] // 通过索引取值找到标签,拿到的是原生DOM对象
console.log(res)
</script>
</html>
4. 文本操作
4.1 选择器优先级和类值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
color: tan;
}
.c4{
color:yellow!important;
}
span{
color:blue;
}
/*
优先级:
继承 0
div 1
id 100
内联样式优先级 1000
!important 最牛逼
相同优先级的,后面的覆盖前面的
*/
.c1{ /* 10 */
height:100px;
width:100px;
background-color:red;
}
.c2{
height:100px;
width:100px;
background-color:green;
}
.c3{
color:red;
}
</style>
</head>
<body>
<div class="c1">
康玉康和张保张
秀!!!
</div>
<div class="c3">
div1
<span class="c4" id="d1" style="color:purple;">xxx</span>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('.c1').addClass('c2'); // 动态添加类值
$('.c1').removeClass('c2'); // 删除类值
$('.c1').toggleClass('c2'); // 有就删除,没有就添加
// 某些网站的闪烁效果
setInterval(function(){$('.c1').toggleClass('c2');},100);
</script>
</html>
4.2 值操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username">
<input type="radio" class="a1" name="sex" value="1">男
<input type="radio" class="a1" name="sex" value="2">女
<input type="checkbox" class="a2" name="hobby" value="1">抽烟
<input type="checkbox" class="a2" name="hobby" value="2">喝酒
<input type="checkbox" class="a2" name="hobby" value="3">烫头
<select name="city" id="s1">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
</select>
<select name="lover" id="s2" multiple>
<option value="1">波多</option>
<option value="2">苍井</option>
<option value="3">小泽</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
//示例: 简单验证用户输入内容长度的判断,blur是鼠标离开光标就出发事件
<!-- $('#username').blur(function(){-->
<!-- var uname = $('#username').val();-->
<!-- if (uname.length < 4){-->
<!-- alert('太短了,不舒服');-->
<!-- }-->
<!-- })-->
// 获取值
// $('#username').val(); //input type=text的普通文本输入框获取值
// $('input:checked').val(); // input type=radio
// $(':checkbox:checked').val(); // input type=checkbox 通过val方法不能直接获取所有的被勾选的标签的value属性对应的值,只能获取一个
// 所以,我们需要通过循环的方式来获取
/*
方式1:
for (var i of checkbox_list ){
console.log(i.value);
}
each循环
$.each(a,function(k,v){
console.log(k,v);
})
循环jq对象写法
var checkbox_list = $(':checkbox:checked');
checkbox_list.each(function(k,v){
console.log(k,v.value);
})
*/
$('#s1').val(); // 单选下拉框获取值
$('#s1').val(['1']); // 单选下拉框设置值
$('#s2').val(); // 多选下拉框获取值
$('#s2').val(['2','3']); // 多选下拉框设置值
// 设置值
// $('#username').val('xxxxx'); // /input type=text的普通文本输入框设置值
// $(':radio').val(['1']); //input type=radio设置值
// $(':checkbox').val(['1','3']); // input type=checkbox设置值
</script>
</html>
总结：
获取值：
文本输人框：$('#username').val();
单选radio框：$('.a1:checked').val();
多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下：
var d = $(':checkbox:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选select框：$('#city').val()；
多选select框：$('#lover').val();
设置值：
文本输入框：$('#username').val('you are my love');
单选radio框：$('.a1').val([2]); #注意内容必须是列表，写的是value属性对应的值
多选checkout框：$('.a2').val(['2','3'])
单选select框：$('#city').val('1')；
多选select框：$('#lover').val(['2','3'])
点击事件绑定：（.blur是鼠标离开光标就出发事件,还有.change也是出发事件）
$('.c1').click(function () {
//$(this)表示的就是它自己
$(this).css('background-color','green');
// $('.c1').css('background-color','green');
})
4.3 创建标签
添加标签: $(’.c1’).html(‘百度’); 但是这个属于替换内容,将标签内原来的内容全部替换掉，下面的示例是往标签内添加内容，而不是替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="zouni">走你</button>
<div id="d1">
<h1>xxxx</h1>
</div>
</body>
<script src="jquery.js"></script>
<script>
// 示例: 点击按钮插入a标签的示例
// 1 绑定事件
$('#zouni').click(function(){
// 2创建a标签
var a = $('<a>',{
text:'这还是个链接',
href:'http://www.baidu.com',
class:'link',
id:'baidu',
name:'baidu'
})
// 3 找到要插入a标签的外层标签
// 4 插入a标签
// $("#d1")[0].appendChild(a[0]); //原生js的方法,往标签内部的最后面插入元素
$("#d1").append(a);
})
</script>
</html>
4.4 文档操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>亚洲</h1>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('#d1').before('<a href="http://www.baidu.com">你的最爱</a>'); // 标签的外部的前面添加元素
$('#d1').after('<a href="http://www.baidu.com">你的最爱</a>');// 标签的外部的后面添加元素
$('#d1').append('<a href="http://www.baidu.com">你的最爱</a>');// 标签的内部的后面添加元素
$('#d1').prepend('<a href="http://www.baidu.com">你的最爱</a>');// 标签的内部的前面添加元素
</script>
</html>
4.5 删除和清空标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<h1>xxxx</h1>
</div>
<div id="d2">
<h2>ssss</h2>
</div>
</body>
<script src="jquery.js"></script>
<script>
$('#d1').remove(); // 删除
$('#d1').empty(); // 清空 类似:$('#d1').text('');
</script>
</html>
4.6 字符串占位符
// 字符占位符${变量名}
// js中全局变量不要用name，因为windos这个对象也有name(windows.name)
var username = '胜平';
var s = `我叫${username},我是个好人`;
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!
赞 (0)
相关推荐
-
Python全栈之学习CSS(1)
目录 1. 表单框类型 文件上传: 2. 表单属性 3. css引入 my.css 4. 选择器 4.1 常用选择器 4.2 选择器的优先级 4.3 关系选择器 4.4 属性选择器 4.5 伪类选择器_颜色设置 4.6 伪对象选择器 5. 字体属性设置 cursor属性: 6. 文本属性 7. 盒子模型 order-style: 8. 学习工具 总结 1. 表单框类型 <!DOCTYPE html> <html lang="en"> <head> &
-
Python全栈之学习MySQL(2)
目录 1. mysql_where子句_聚合函数 2. mysql_其他子句语法 3. mysql_子查询 4. exists关键字 5. 练习所需表数据 6. 小练习 (1)表结构: (2)黏贴如下sql,直接建表 (3)练习题目 总结 1. mysql_where子句_聚合函数 # ### part 单表查询 """ select ... from ... where ... group by ... having ... order by ... limit ... &
-
Python全栈之学习HTML
目录 1. vscode相关配置 2. html认识 2.1 html认识 2.2 html结构 2.3 html语法特征 3. 标签种类_列表 3.1 常见标签 3.2 标签种类 3.3 列表 3.4 超链接标签 3.5 a链接跳锚点 3.6 img图片标签 3.7 table表格标签 3.8 iframe子窗口 4. 音视频_表单 4.1 音视频标签 4.2 form标签 5. 小练习 总结 1. vscode相关配置 w3c school 手册: https://www.w3school.
-
Python全栈之学习JS(3)
目录 1. dom节点 1.1 dom节点获取 1.2 节点元素层级关系 1.3 修改_清空内容 1.4 隐藏显示密码效果 2. 全选_反选_不选 2.1 全选_反选_不选 2.2 js控制css的相关属性 2.3 js事件 3. 模态框 1. dom节点 1.1 dom节点获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <met
-
Python全栈之学习MySQL(1)
目录 1. mysql约束 2. 外键_联合主键_唯一索引 3. 存储引擎_表关系 总结 1. mysql约束 # ### char varchar (补充) char 字符长度 255个 varchar 字符长度 21845个 # ### part1 时间类型 date YYYY-MM-DD 年月日 (节假日,纪念日) time HH:MM:SS 时分秒 (体育竞赛,记录时间) year YYYY 年份 (历史,酒的年份) datetime YYYY-MM-DD HH:MM:SS 年月日 时分
-
Python全栈之学习JS(1)
目录 1. js的数据类型 1.1 js引入方式 1.2 注释变量 1.3 数据类型 2. js类型转换_运算符 2.1 强制转换_Number 2.2 强制转换_String 2.3 强制转换_Boolean 2.4 自动类型转换_Number_Boolean_String三者之间转换 2.5 js运算符 3. js流程控制 3.1 分支结构 3.2 分支结构_switch_case 3.3 循环结构 4. js函数 4.1 函数 4.2 函数的调用 总结 1. js的数据类型 1.1 js引
-
Python全栈之学习MySQL(3)
目录 1. pymysql的基本操作 2. sql注入攻击 3. sql增删改查 4. mysql的数据恢复 5. sql语句优化 总结 1. pymysql的基本操作 # ### python 操作mysql import pymysql # ### 1.基本语法 """ # (1) 创建连接对象 host user password database 这四个参数必写 conn = pymysql.connect( host="127.0.0.1" ,
-
Python全栈之学习JQuery
目录 1. lable标签补充 2. jquery引入和简单使用 3. 选择器 3.1 基础选择器 3.2 组合选择 3.3 层级选择器 3.4 属性选择器 3.5 表单对象属性选择器 3.6 表单选择器 3.7 筛选器方法 4. 文本操作 4.1 选择器优先级和类值操作 4.2 值操作 4.3 创建标签 4.4 文档操作 4.5 删除和清空标签 4.6 字符串占位符 总结 1. lable标签补充 <!DOCTYPE html> <html lang="en">
-
Python全栈之学习JS(2)
目录 1. js对象 1.1 object对象 1.2 json对象 2. js字符串函数 3. js数组相关方法 4. js数学对象相关方法 5. BOM对象 5.1 定时器 5.2 获取年月日时分秒 5.3 Navigator 5.4 历史对象 6. BOM对象location 7. 小提示 ceshi.html: 总结 1. js对象 1.1 object对象 <!DOCTYPE html> <html lang="en"> <head> &l
-
Python全栈之学习CSS(2)
目录 1. css背景图 1.1 背景属性 1.2 背景图片引入 2. 相对_绝对_固定 2.1 相对定位 2.2 绝对定位 2.3 固定定位 3. float浮动 3.1 display转换元素 3.2 float浮动 4. html里面的bug 4.1 float内容塌陷问题 4.2 margin-top失效问题 4.3 overflow 总结 1. css背景图 1.1 背景属性 <!DOCTYPE html> <html lang="en"> <h