Jquery 基础



Jquery基础

1. jquery 优点: a)写法同CSS

                            b)兼容浏览器

                            c)易于学习

                            d)容错机制强

2. 基本选择器

  a)#id :选择ID的元素 $('p1').css('color','red');

 b).class: 类名选择器$('.cssClass').css('color','red');

  c)element:标签选择器:$('div').css('color','red');

  d)*:选择所有的元素 $('*').css('color','red'));   $('body *').css('color','red');  $('#divID *').css('color','red');

  e)","多重选择器$('p,div').css('color','red');

3. 层次选择器

  a)E F 选择E元素所有的后代F元素

 b)E>F 选择E元素的子元素,子选择器

 c)E+next 选则E元素后的紧邻的兄弟元素等价于.next()

  $('div+p').css('color','red')  ===$('div').next().css('color','red') 表示<DIV>紧邻的兄弟元素<p>的颜色变红

  d)E~siblings 选择E元素后的所有的兄弟元素,等价于 .nextAll()

  $('div~p').css('color','red') === $('div').nextAll().css('color','red') 表示<div>以下的所有的<p>的颜色都变红

 

JQuery选择过滤器

  <div>

         <p>1</p>

         <p>2</p>

         <p>3</p>

         <p>4</p>

         <pclass='clsA'>6</p>

         <p>内容是<strong>很强</strong></p>

 </div>

1. 基本选择过滤器

  a):first $("p:fisrt").css('background','red') 注意:P后面不能加空格,否则表示P的子元素

 b):last  $('p:last').css('background','red')

 c):not()  calss='lasA'的不变色  $('p:not("clsA")').css('background','red')

 d):even  偶数过滤器,0开始计数$('p:even').css('background','red');

 f):odd   奇数过滤器, 同上

 g):eq()  选择指定索引的过滤器,0开始计数$('p:eq(2)').css('background','red');

 h):gt()  大于指定索引的过滤器,0开始计数$('p:gt(2)').css('background','red');

 i):lt()   小于.....

  j):header选取<h1></h1> <h2></h2>

2. 内容过滤器

  a):contains() 选取含有文本内容的元素,实现简单搜索 $('p:contains("1")').css('color','red');

 b):has() 选取包含指定 元素的元素,参数可以使标签名,class,id  $('p:has("strong")').css('color','red');

 c):empty 选取不包含指定子元素,并且文本为空的元素  $('p:empty').css('color','red')

3. 可见性选择器

 a):hidden 选取所有不可见元素.必须满足两个条件不可见;不占网页空间(display:none).  如设置为opacity:0,或者visibility:hidden则不行

 b):visible 选取所有可见元素

4. 属性选择器

  a)<p title='js' uName='abcdd'>asdf</p>  $('p[title=js]').css('background','red');

5. 多属性选择器 $('p[title=js][uName=abcde]').css('background','red');

6. 子元素过滤选择器

   a)1个子元素 $('div p:first-child').css('background','red')

   b) $('div p:last-child')

   c)N个子元素 $('divp:nth-child(2)').css('color','red')

   d)偶数选择 $('div p:nth-child(2n)').css('color','red')

   f)奇数选择 $('div p:nth-child(2n-1)').css('color','red')

7. 表单选择器

  a)$(':input').length 所有表单元素 包括 textarea file select image

 b)$(':text').val()   <inputtype='text'>

 c)$(':password').val()

 d)$(':radio').val()

 e)$(':checkbox').val()   ===$('input[type=checkbox]').val()

 f)$(':file')

 g)$(':hidden')

.........................

8.表单属性选择器

 <input type='text' id='txtName' name='txtName' value='abcded'disabled='true' />

 a):enabled  $('input:disabled').val()

 b):disabled  $('input:enabled').val()

  c):checked   $('input:checked').val()  <input type='checkbox'checked='checked'>

 d):selected <select></select> $(':selected').val() == $('selectoption[selected=selected]').val()

 e):focus  

 

JQuery选择器实例

<div id='outer'>

         <divid="wrap">

                   <pclass='clsName'>1</p>

                   <p>2</p>

                   <pid='p3'></p>

                   <pid='p5'><span>span sanp </span></p>

                   <div>innser</div>

         </div>

</div>

. Dom 筛选,遍历查找

1. 筛选

  a).eq() 选择指定索引的元素$("p").eq(0).css('background','red') ==$('p:eq(0)').css('background','red')

 b).filter(表达式) 筛选指定表达式的元素

    $('p').filter(':even')

    $('p').filter(':odd')

          $('p').filter('.clsName')

    $('p').filter('#outer')

 c).first()

 d).last()

 e).is() 返回bool:如果class='clsName',则变色

    $('p').click(function(){ if($(this).is('.clsName')){ $(this).css('background','red')} });

 f).has() 保留包含特定后代的元素

 g).not()

                   $('p').not(':first').css('background','red')

                   $('p').not('#p3').css('color','red')

 h).slice() 根据指定下标范围,选取匹配的元素集合

   $('p').slice(1,5).css('color','red'); //选择 [1,5) 区间的元素

   $('p').slice(-2,-1).css('color','red')

2. DOM遍历查找

  a).children() 选取查找子元素,参数为过滤器

   $('#wrap p').css('color','red')

  =$('#wrap>p').css('color','red')

  =$('#wrap').children().not('div').css('color','red')

  =$('#wrap').children('p').css('color','red')

  b).parent() 选取父元素,参数为过滤器

   $('#p3').parent().css('color','red')

 c.)parents() 选取所有的祖元素,参数为过滤器

   $('#p3').parents('#wrap').css('color','red')

 d).parentUntil() 选取所有的父元素,直到遇到匹配过滤器,参数为过滤器

 e).offsetParent() 选择父元素中第一个position=relative或者position=absolute的元素,仅对可见元素有效

  f).next() 选择后面紧邻的一个兄弟元素$('#p3').next().css()

 g).nextAll() 选择后面紧邻的所有兄弟元素

   $('#p3').nextAll().not('div').css('color','red')  ==$('#p3').nextAll(':not(div)').css('color','red')

 h).nextUntil()

 i).prev()

 j).prevAll()

  k).siblings()选择前后所有的兄弟元素

  $('#p3').siblings('div').css('color','red')

 l).closest()

 m).contents()

 n).end() 终止在当前链的最新过滤操作,并返回匹配元素的以前状态

   $('span').parent().css('color','red').end().css('background','#red')

 o).each() 遍历

   $('p').each(function(){ $(this).css('color','red') });

 p).find() 查找

3. 特殊字符处理

  加转移符"\"

4. 实现表格隔行换色

  a)$("#tblID tr:even").css('background','yellow');

   $('#tblID tr:odd').css('background','red');

  b)$('#tblIDtr').filter(':even').css('background','yellow').end().filter(':odd').css('background','red');

5. 实现Tab标签页

 $('ul li').click(function(){

             $(this).addClass('current').siblings().removeClass('current');

                   $('#content>div').eq($(this).index()).show().siblings().hide();

   });

 

 

JQuery选择器的优化

1. 优先选择ID选择器

2. class名前加标签名. 例如使用$('p.clsName')  而不使用$('.clsName')

3. 采用find(),而不使用上下文查找

4. 使用链式操作比缓存更快

 

JQuery 中的DOM操作

1. 查找节点(省略)

2. 创建节点

 a)var newEle = $('<div></div>');

  b)var newEle = "<div></div>";

3. 插入节点

       3.1 内部插入节点

            a) .append() 尾部插入节点 $('p').append(newEle);

            b).appendTo newEle.appendTo($('p'));//append()的逆向操作

            c).prepend() 前端插入

            d).prependTo()

       3.2 外部插入节点

                   a).after()在匹配元素之后插入DOM. $('p').after(newEle);

                   b).insertAfter().newEle.insertAfter($('p'))

                   c).before()

                   d).insertBefore()

         3.3包裹节点

                   <p>p1</p>

                   <p>p2</p>

                   a).wrap()将所有的匹配元素单独包裹

                            $('p').wrap("<div></div>");包裹后变为 <div>  <p>p1</p>  </div> <div> <p>p2</p> </div>

                   b).wrapAll()将所有的匹配元素一起包裹

                            $('p').wrapAll('<div></div>');包裹后变为 <div><p>p1</p><p>p2</p> </div>

         3.4删除节点

             a).remove() 删除节点 $('p').remove(); 删除p节点

          b).empty()清空节点  $('p').empty(); 清空P节点的内容或子元素

                   c).unwrap()删除元素父节点 $('p').unwrap(); //仅仅删除父节点标签,父节点包含的内容不会被删除

                   d).detach()删除节点,但保留Jquery对象

         3.5复制节点

                   a).clone(bool)参数如果为TRUE,则连事件一起克隆,全克隆

                            varnewA=$('a').clone(true)

         3.6替换节点

                   a).replaceWith()$('p').repalceWith($('<div>..</div>'));

                   b).repaceAll()//replaceWith()的反向操作

         3.7操作DOM节点属性

                   a).attr(key,value)改变节点属性 $('#p').attr('title','NewTitle');

                   b).removeAttr(key)删除节点属性 $('#p').attr('title')

         3.8操作样式

                   a).addClass()添加样式 $('p').addClass('a'); $('p').addClass('ab');

                   b).removeClass删除样式 $('p').removeClass('a').removeClass('b');

                   c).toggleClass()切换样式 $('p').toggleClass('a b');

                   d).hasClass()是否包含样式 $('p').hasClass('a');

                   e).css(key,value)$('p').css('height','10').css('background','red'); $('p').css({'background':'red','color':'blue'});

                   f).height()获取高度

                   g).innerHeight()获取padding的高度,不含border,但包含padding,不含margin

                   h).outerHeight(bool)获取全部的高度,包含边框和padding.当参数为True,则包含margin

       i) .width,innerWidth,outerWidth

                   j).offset()返回元素的位置

                   k).offsetParent()

                   l).position()相对于 offsetParent()的位置

                   m)scrollTop

                   n)scrollLeft

         3.9设置和获取节点内的html和文本

                   a).text()   不加参数为获取,加参数为设置$('p').text();  $('p').text('222222');

                   b).html()

 

JQuery事件处理

         1.加载文档事件 $(document).ready();

         2.鼠标事件

                   a).click(e)

                   b).dbclick()

                   c).focusin()

                   d).focusout()

                   e).mousedown()

                   f).mouseup()

                   g).mousemove()

                   h).mouseup()

                   i).mouseover()

                   j).mousemove()

                   k).mouseout()

                   l).mouseenter()鼠标进入 阻止冒泡事件

                   m).mouseleave()鼠标离开  阻止冒泡事件

         3.键盘事件

                   a).keydown(e)

                   b).keyup()

                   c).keypress()可以连续触发

         4.表单事件

                   a).focus()

                   b).blur()

                   c).change()

                   d).select()

                   e).submit()$('#form1').submit()

         5.浏览器事件

                   a).resize()

                   b).scroll()

         6.事件对象

                   a)event.pageX 相对document位置,已经把 scrollTop scrollLeft加上了

                  b) event.pageY

                   c)event.preventDefault() 阻止浏览器默认行为

                   d)event.stopPropagation() 阻止冒泡

                   e)event.witch()监听键盘和鼠标事件

         7.绑定和移除事件的方法

                   a).bind()事件绑定 $('p').bind('click',function(){});

                   b).unbind()解除绑定

                   c).one()执行一次事件,然后销毁该事件

                   d).on(),.off() bind,unbind

         8.事件命名空间,使用bind的时候,在事件后加命名空间

                   a)   $('p').bind('click.namespace1',function(){});

                            $('p').bind('click.namespace2',function(){});

                            $('p').unbind('click.namespace1');

 

JQuery动画

1. 基础动画

         a).show(1000)1000毫秒渐现. 参数也可以为 fast ,slow,normal

         b).hide(600)

         c).toggle(1000)切换 show,hide

2. 渐变动画

         a).fadeIn()默认300毫秒使得opacity0变为1

         b).fadeOut()

         c).fadeToggle()

         d).fadeTo(ms,opacity,function)ms毫秒使得opacity变为设定值,完成后调用回调函数

3. 滑动动画

         a).slideDown()从上到下渐现

         b).slideUp()

         c).slideToggle()

4. 自定义动画

         animate()

5. 动画队列

         a).stop()停止动画

         b).dequeue()

         c).finish()

         d).delay()

 

JQuery 表单实例

1. checkBox实例

         a)选中 $('chk').attr('checked',true);

         b)取消选中 $('chk').attr('checked',false);

         c)反选: $('chk').each(function(){

                            $(this).attr('checked',!$(this).attr('checked'));

                   });

2. 本地搜索 tabletr(not include header)包含"王三"的显示出来

         $('tabletr:not("#header")').hide().filter(':contains("王三")').show();

        

JQueryAJAX

         1.数据格式约定

         2.处理不同数据类型的关系

         3.AJAX执行时的细节. ajax执行时,给用户提示. www.ajaxload.info 下载合适的资源图片

                   $(document).ajaxStart(function(){})

                   $(document).ajaxStop(function(){})

         4.AJAX编码不一致的问题.建议统一使用UTF-8编码

         5.Form内容自动拼接

                   $('#from').serialize();自动拼接为JSON对象

         6.AJAX防止get()方法被缓存而不去调用服务器: 需要设置 $.ajaxSetup({cache:false});

 

JQuery 插件开发

         1.类级别的插件

                   a)直接给jQuery添加全局函数

                            jquer.myAlert= function(){};    调用: $.myAlert();

                   b)使用extend

                            jQuery.extend({

                                     myAlert:function(str){};

                            });

                            调用: $.myAlert();

         2.对象级别的JQUERY插件开发

                   参考官方模板

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值