python自动化编程-第十七天 web开发基础
jQuery
模块 《==》 类库
DOM/BOM/JavaScript的类库
ps：
1.x 建议使用1.12 有很好的兼容性
2.x
3.x
jQuery对象[0] == DOM对象
DOM对象 ==== $(DOM对象)
查找元素
- DOM
- 10个左右
- jQuery
- 选择器
- 筛选器
安装:
从官网上下载；然后保存在js目录下；
首先引入jQuery，$ == jQuery关键字
<script src="js/jQuery-3.3.1.js"></script>
<script>
</script>
选择器
直接找到某个或某类标签
-
id
$('#id') -
class
$('.class') -
标签选择器
$('div') -
*代表所有 -
组合，一次选择多个标签
$("div,span,p.myClass") -
层级
$("form input")表示找到子标签或者孙标签
$("form > input")这个是找子标签$("label + input")匹配所有紧接在 prev 元素后的 next 元素
$("form ~ input")匹配 prev 元素之后的所有 siblings 元素 -
基本筛选器
$('li:first')获取第一个元素
:first
:last
:eq(index) -
属性选择器
$('[alex]')具有alex属性的所有标签
$('[alex="123"]')alex属性等于123的标签
实例：多选，反选，取消
-
选择权
$(this).prop('checked') 选择值 $(this).prop('checked',false) 设置值 -
jQuery方法内置循环
$(this).xxxxx$(this).each(function(k){ // k当前索引 // this,dom,当前循环的元素$(this) }) -
var v = 条件 ? 真值 : 假值；
文本操作
$(this).text() 获取文本内容
$(this).text(‘<a>sfsfs</a>’) 设置文本内容
$(this).html() 获取标签及内容
$(this).html(‘<a>sfsfs</a>’) 设置标签
$(this).val() 获取input系列的dom中的value的内容
$(this).val(‘aaa’) 设置input系统的dom中的value的内容
样式操作
addClass
removeClass
toggleClass =》 if hasClass;removeClass else addClass
属性操作
专门用于做自定义属性
$().attr('key') 获取key属性的值
$().attr('key','value') 设置key属性的值
$().removeattr('key') 删除key属性
专门用于checkbox，radio做操作
$().prop('checked') 获取值
$().prop('checked',false) 设置值
ps:
index 获取索引位置
文档处理
append
prepend
after
before
remove
empty ==>只删除内容
clone 克隆
css处理
$('t1').css('样式名称'，‘样式值’)
点赞：
- $('t1').append()
- setInterval
- 透明度 1 ~ 0
- position
- 字体大小，位置
位置
scrollTop([val])
scrollLeft([val])
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
要知道是谁的轮动条
offset 指定标签在HTML中的坐标
offset().top
offset().left
position() 指定标签相对父标签(relative)标签的坐标
height([val|fn]) #获取高度 纯高度
innerHeight() # 获取边框 + 纯高度 + ？
outerHeight() # 获取边框 + 纯高度 + ？
outerHerght(true) # 获取边框 + 纯高度 + ？
纯高度，边框，外边距，内边距
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])
事件
标签自身有事件时，我们在绑定一个事件，那么我们绑定的标签就会先执行；
jQuery：
$('.c1').click()
$('.c1')....
$('.c1').bind('click',function(){})
$('.c1').delegate('a','click',function(){})
.c1标签下面的所有a标签
$('.c1').undelegate('a','click',function(){})
例如, 下面的.delegate()代码:
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
等效于使用的下面编写的代码.on():
$( "table" ).on( "click", "td", function() {
$( this ).toggleClass( "chosen" );
});
delegate可以将动态创建的标签页绑定上相应的函数，委托
$('.c1').on('click',function(){})
$('.c1').off('click',function(){})
阻止事件发生
使用dom方式绑定的事件，要在标签的事件函数前面加上return
<a onclick="return func();"></a>
<script>
function func(){
return false;
}
</script>
jQuery
$('l1').click(function(){
return false;
})
示例，如果有循环，在循环里 return false；则表示跳出循环；最好使用下面的示例方式
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
if(v.length <= 0){
var tag = document.createElement('span');
tag.className = 'error';
tag.innerHTML='必填';
$(this).after(tag);
flag = false;
// return false
}
});
return flag;
})
当页面框架加载完成之后，自动执行 主要防止图片没有加载完成；
$(function(){
函数体
})
如果有img标签，而img标签下载较慢的话，就使用这样的方式；最好全部使用这种方式；
筛选
$(this).next() 下一个
$(this).nextAll() 下面所有的
$(this).nextUntil(‘#id’) 下面的直到until位置
$(this).prev() 上一个
$(this).prevAll() 上面所有的
$(this).prevUntil(‘#id’) 上面的直到until位置
$(this).parent() 父标签
$(this).parents()
$(this).parentUntil(‘#id’)
$(this).children() 子标签
$(this).siblings() 兄弟标签
$(this).find() 子子孙孙中查找
$(this).eq()
$(this).first()
$(this).last()
$(this).hasClass()
jQuery扩展
- $.extend $.方法
- $.fn.extend $().方法
扩展- plugin的写法
(function(arg){
var status=1;
//封装变量
})(jQuery)
浙公网安备 33010602011771号