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 字符串占位符 5. 样式操作
1. lable标签补充
Title
2. jquery引入和简单使用
jquery引入:
jquery对原生js封装 bootcdn官网:https://www.bootcdn.cn/ 外部网址引入(一般不用) 本地文件引入(bootcnd:提供了很多插件网站的地址,加速过的,直接在搜索框中搜索jquery,然后把连接放在地址栏,把返回的结果复制到jquery.js(在pycharm中与html同级的目录)里面,然后html进行引用即可) //jquery.js本地文件路径
juery初始
var d1 = $('#d1'); -- jquery对象 -- jQuery.fn.init [div#d1]
var d = document.getElementById('d1'); -- 原生dom对象 --
jquery对象和dom对象之前不能调用互相的方法
jquery对象和dom对象可以互相转换
d1[0] -- dom对象 # 通过索引取值的方式
$(d) -- jquery对象 # $(原生DOM对象)
再次解释:
$("#d1")[0].innerHTML但凡从中括号索引取出来的值,都是原生dom对象
原生dom对象转为jquery对象,使用text方法获取文本
a:原生dom对象
$(a) 这就转成juery对象,在调用text方法$(a).text();
Title
皇家赌场
3. 选择器
3.1 基础选择器
知识点:
// id选择器
$('#d1') -- 同css
// 类选择器
$('.c1')
$(".c1").css({'color':'green'});
// 元素选择器
$('标签名称') -- $('span')
// 查看jquery对象找到的元素个数
$("li").length;
基础选择器使用:
Title
- 葛龙
- 高学峰
- 何旭彤
- 宋健
- 刘利伟
- 王同佩
因为每次都要引入jquery.js比较麻烦,所以可以直接在模板里添加默认引入:
示例1:
Title
xxxx
oooo
// 引入js文件或者写js代码的时候,最好写到html文件的最下方,但是要在html标签内部
示例2:
$('#d1,.c2')
示例:
html代码
这是c2
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”)
示例:
Title
只要python学的好,媳妇年年在高考
主要你有钱,对象刚进幼儿园
3.4 属性选择器
Title
书山有路勤为径,学海无涯苦作舟!
3.5 表单对象属性选择器
知识点:
:checked 找到被选中的input标签
:selected 找被选中的select标签中的option标签
:disabled 不可操作的标签
:enabled 可操作的标签
示例:
html代码:
用户名:
密码:
jquery代码:
$(':enabled');
$(':disabled');
示例1:
Title
男
女
未知
示例2:
Title
// 标签里属性和值相等的时候,直接写属性就ok(disabled="disabled")
3.6 表单选择器
Title
用户名:
密码
性别选择:
男
女
未知
3.7 筛选器方法
原生js中的间接查找选择器:
Title
- 刘义沨
- 李亚锋
- 张磊1 张磊2
- 高华新
- 赵世超
- 杨元涛
Title
康玉康和张保张
秀!!!
div1
xxx
4.2 值操作
Title
男
女
抽烟
喝酒
烫头
总结:
获取值:
文本输人框:$('#username').val();
单选radio框:$('.a1:checked').val();
多选checkout框:$('.a2:checked').val()是不行的;需要循环取值,如下:
var d = $(':checkbox:checked');
for (var i=0;i
设置值:
文本输入框:$('#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(‘百度’); 但是这个属于替换内容,将标签内原来的内容全部替换掉,下面的示例是往标签内添加内容,而不是替换
Title
xxxx
4.4 文档操作
Title
亚洲
4.5 删除和清空标签
Title
xxxx
ssss
4.6 字符串占位符
// 字符占位符${变量名}
// js中全局变量不要用name,因为windos这个对象也有name(windows.name)
var username = '胜平';
var s = `我叫${username},我是个好人`;
5. 样式操作 


