jQuery http://jquery.cuishifeng.cn/ 模块 《=》类库 DOM/BOM/JavaScript的类库 版本: 1.x 1.12 2.x 3.x 转换: jquery对象[0] => Dom对象 Dom对象 => $(Dom对象) 一、查找元素 DOM 10左右 jQuery: 选择器,直接找到某个或者某类标签 1. id $('#id') 2. class <div class='c1'></div> $(".c1") 3. 标签 <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') 4. 组合a <div id='i10' class='c1'> <a>f</a> <a>f</a> </div> <div class='c1'> <a>f</a> </div> <div class='c1'> <div class='c2'> </div> </div> $('a') // 找到所有的a标签 $('.c2') //找到所有含有c2的标签 $('a,.c2,#i10') //找到所有的a,c2,i10标签 5. 层级 $('#i10 a') 子子孙孙 找到i10下的所有a标签 $('#i10>a') 儿子 找到i10下的儿子,不找孙子 6. 基本 :first $('#i10 a:first') 找到i10下的所有a标签的第一个a标签 :last :eq() $('#i10 a:eq(1)') 找到i10下的所有a标签的第二个a标签 7. 属性 $('[tom]') 具有tom属性的所有标签 $('[tom ="123"]') tom属性等于123的标签 <input type='text'/> <input type='text'/> <input type='file'/> <input type='password'/> //找到所有text的标签 1. $(" input[type='text']") 2. $(':text') //这是表单选择器方法,可以不会,因为通过上面方法就能实现 实例: 多选,反选,全选 - 选择权 - $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked', true); 设置值 - jQuery方法内置循环: $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){ // k当前索引 // this,DOM,当前循环的元素 $(this) }) - var v = 条件 ? 真值 : 假值 筛选 $('#i1').next() //找到下一个标签 $('#i1').nextAll() //找到下面所有的(同一层内) $('#i1').nextUntil('#ii1') //一直找到ii1标签,不包过ii1 <div> <a>asdf</a> <a>asdf</a> <a id='i1'>asdf</a> <a>asdf</a> <a id='ii1'>asdf</a> <a>asdf</a> </div> $('#i1').prev() $('#i1').prevAll() $('#i1').prevUntil('#ii1') $('#i1').parent() $('#i1').parents() //以列表形式找出所有的父亲 [第一层父亲,第二层父亲,第三层父亲...] $('#i1').parentsUntil() $('#i1').children() // $().children('[class="edit"]') 仅儿子辈 // 或者配合索引$().children().eq(index) $('#i1').siblings() // 获取所有同一个div下的兄弟标签 $('#i1').find() //$(...).find('input[type="text"],input[type="password"]') 子子孙孙辈 $('li:eq(1)') $('li').eq(1) first() last() hasClass(class) 文本操作: $(..).text() # 获取文本内容 $(..).text(“<a>1</a>”) # 设置文本内容 $(..).html() $(..).html("<a>1</a>") $(..).val() $(..).val(..) 样式操作: addClass removeClass toggleClass // $('$i1').toggleClass('hide') 判断 i1 div是否有hide样式, // 如果有,那么去除;没有,则添加 属性操作: # 专门用于做自定义属性 $(..).attr('n') //获取n属性 $(..).attr('n','v') //设置n属性为v,有n属性则覆盖;没有,则添加 $(..).removeAttr('n') # 专门用于chekbox,radio //因为再jQuery2版本及以下,如果用attr设置checked属性有问题,所以用prop <input type='checkbox' id='i1' /> $('#ii').attr('checked','true') //添加checked属性,并选中 $('#ii').removeAttr('checked') //不选中 $('#ii').attr('checked','true') //不能再继续选中了 $(..).prop('checked') $(..).prop('checked', true) PS: index 获取索引位置 文档处理: <ul id="u1"> <li>1</li> <li>2</li> </ul> append //$('u1').append(<li>3</li>) 添加到2的后面,添加到u1的孩子里 prepend //$('u1').append(<li>0</li>) 添加到1的前面 after //$('u1').append(<li>0</li>) 添加到u1的后面,变成u1的兄弟标签 before remove //清空内容,及<li>标签在页面上显示的点 $('#u1 li').eq(1).remove() empty //只清空内容 clone //var v = $('#u1 li').eq(index).clone()//复制对应索引的内容 ; // $('#u1').append(v);//然后添加 css处理 $('t1').css('样式名称', '样式值') //就等同于DOM的$('t1')[0].style.color = 点赞: - $('t1').append() - $('t1').remove() - setInterval - 透明度 1 》 0 - position - 字体大小,位置 位置: $(window).scrollTop() 获取值 $(window).scrollTop(0) 设置 scrollLeft([val]) offset() 指定标签在html中的左上坐标 offset().left 指定标签在html中的左坐标 offset().top 指定标签在html中的上 坐标 position() 指定标签相对父标签(relative)标签的坐标 <div style='relative'> <div> <div id='i1' style='position:absolute;height:80px;border:1px'></div> </div> </div> $('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取 纯高度 + padding的(内边距)? $('i1').outerHeight() # 获取边框 + 纯高度 + padding的(内边距) $('i1').outerHeight(true) # 获取边框 + 纯高度 + padding + 相对父标签(relative的高度)? # 纯高度,边框,外边距,内边距 事件 DOM: 三种绑定方式 jQuery: $('.c1').click() $('.c1')..... $('.c1').bind('click',function(){ }) $('.c1').unbind('click',function(){ }) ******************* $('.c').delegate('a', 'click', function(){ }) $('.c').undelegate('a', 'click', function(){ }) $('.c1').on('click', function(){ }) $('.c1').off('click', function(){ }) 阻止事件发生 return false # 当页面框架加载完成之后,自动执行 $(function(){ $(...) }) jQuery扩展: - $.extend $.方法 - $.fn.extend $(..).方法 (function(){ var status = 1; // 封装变量 })(jQuery) (function(args){ var status = 2; args.extend({ 'p2':function(){ return 'p2: ' + status; } }) })(jQuery) 二、操作元素 ===》实例: 作业: 一: $('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取边框 + 纯高度 + ? $('i1').outerHeight() # 获取边框 + 纯高度 + ? $('i1').outerHeight(true) # 获取边框 + 纯高度 + ? # 纯高度,边框,外边距,内边距 二、所有实例敲一遍 三、编辑框
jQuery学习笔记---视频笔记及补充
最新推荐文章于 2024-03-29 10:44:47 发布