Django(3)Jquery
jQuery
1 将复杂的js操作封装的很简单
2 支持链式操作 $('.c1').addClass('c2').text('xxx').addClass('xxx').css({'color':'white'});
3 在各大浏览器里面都兼容，不需要考虑兼容性问题
jquery引入
外部网址引入
本地文件引入
//jquery.js本地文件路径
jQuery初识
var d1 = $('#d1'); -- jquery对象 -- jQuery.fn.init [div#d1]
var d = document.getElementById('d1'); -- 原生dom对象 --
jquery对象和dom对象之前不能调用互相的方法
jquery对象和dom对象可以互相转换
d1[0] -- dom对象
$(d) -- jquery对象
选择器
id选择器
$('#d1') -- 同css
类选择器
$('.c1')
元素选择器
$('标签名称') -- $('span')
组合选择器
$('#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对象
层级选择器
$("form input") 就是后代选择器 同css
属性选择器
html代码:
这是啥!
css代码:
[xx]{
color:red;
}
input标签: type='xx' [type='xx']--对应的input标签
$('[xx]').css('color','green');
$('[xx="oo"]').css('color','pink');
jquery找到的所有标签对象，不需要循环就能设置相同的样式效果。
表单对象属性选择器
:checked 找到被选中的input标签或者option标签
:selected 找被选中的select标签中的option标签
示例：
女
男
没准
爱好：
喝酒
抽烟
约
城市：
jquery写法
$(':checked');
$(':selected');
:disabled 找到被废弃的标签
:enabled 找到可用标签
示例：
用户名：
女
男
没准
jquery写法
$(':disabled');
$(':enabled');
表单选择器
$(":text") // 找到所有input标签
// $(":input") 找到所有input标签
// $(":password") 找到所有input且type=password的标签
// $(":radio") 找到所有input且type=radio的标签
// $(":checkbox") 找到所有input且type=checkbox的标签
html代码:
jquery代码:找到所有的type=text的input标签
$(':text');
筛选器方法
html代码
- 谢一峰
- 王子宇
- 孙波
- 石淦
白雪冰
- 方伯仁
parent()
var c = $('.c1');
c.parent();
c.parents(); 直系的祖先辈
c.parentsUntil('body'); 往上找,直到找到body标签为止,不包含body标签
children()
var u = $('ul');
u.children(); 找到所有儿子标签
u.children('.c1'); 找到符合.c1选择器的儿子标签
next()
var c = $('.c1');
c.next();
nextAll(); 下面所有兄弟
c.nextUntil('.c2'); 下面到某个兄弟为止,不包含那个兄弟
prev()
var c = $('.c1');
c.prev();
c.prevAll(); 上面所有兄弟,注意顺序都是反的
c.prevUntil('.c1'); 上面到某个兄弟为止,不包含那个兄弟,注意顺序都是反的
siblings()
c.siblings(); 找到不包含自己的所有兄弟
c.siblings('.c1'); 筛选兄弟中有class类值为c1的标签
find() 找后代
$('li').find('span'); 等同于css的 li span选择器
first()和last() 和eq(索引值)
$('li').first(); 找所有li标签中的第一个
$('li').last(); 找所有li标签中的最后一个
$('li').eq(0); 按照索引取对应的那个标签,索引从0开始
$('li').eq(-1); 最后一个
text() 和 html()
同js的innerText和innerHTML
取文本:
c.text(); 不带标签
c.html(); 带标签
设置文本:
c.text('文本');
c.html('文本'); -- 文本--"皇家赌场"
class类值操作
html代码
css代码:
.c1{
background-color: red;
height: 100px;
width: 100px;
}
.c2{
background-color: green;
}
jquery
$('div').addClass('c2');
$('div').removeClass('c2');
$('div').toggleClass('c2');
示例:
var t = setInterval("$('div').toggleClass('c2');",500);
val值操作
示例:
html代码:
男
女
抽烟
喝酒
烫头
获取值：
文本输人框：$('#username').val();
单选radio框：$('.a1:checked').val(); #在.a1选择器的基础上在进行筛选
多选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'])
点击事件绑定
$('.c1').click(function () {
//$(this)表示的就是它自己
$(this).css('background-color','green');
// $('.c1').css('background-color','green');
})
代码演示左侧菜单
浙公网安备 33010602011771号