目录
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},我是个好人`;
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!
© 版权声明
THE END
暂无评论内容