1.实现内容的隐藏或者显示

1.知识点: JQuery 选择器 JQuery 事件 JQuery 效果 JQuery 属性操作 JQuery
文档操作 JQuery CSS操作———-
**************************************************************************************
jQuery选择器: 1.实现内容的隐藏或者显示:。css(‘display’,’none’)
2.变换图片:。attr(’src’,”); 3.单击标题后内容可以伸缩:
检测当前内容的显示或者隐藏状态:。is(’:visible‘)。该值返回一个布尔值。
4.获取元素内容的函数:。text(); 5.将元素隐藏的函数:。hide();
6.增加样式:。addClass(选择器);~~该选择器在样式中定义  
**********************************************************************
jQuery操作DOM
~~~~~name为元素属性的名称,用时用单引号括起来。
1.Document:文档 2.访问元素:元素的属性、内容、值、css的操作。    
a。属性操作:获取、设置、操作         获取:attr(’属性名‘);        
设置元素的属性:attr(属性名,属性值);或者attr({属性名:属性值,。。。。})或则attr(属性名,function(index))
        删除元素的属性;removeAttr(属性名);    
b。内容操作:获取、设置        
 html(【val】):获取和设置元素的html内容          
text(【val】):获取和设置元素的文本内容        c。值操作:获取和操作  
          获取元素的值:val();             设置元素的值:val(val);
       d。样式操作:             直接设置样式:css(样式名称,样式值);
           
增加css类别:addClass(定义的类别class1,class2。。。。。);          
 
类别切换:toggleClass(类别名称)
当元素中含有该类别是,删除该类别,否则增加该类别。
            删除类别:removeClass(类别名称class1,
class2.。。。。)
~若无参数,则删除所有类别。   3、创建节点元素        
·  
 $(‘<p>sd</p>’)即$(html);~~只完成DOM元素的创建,出入到页面中还需要通过元素节点
                                                                       
                                                                 
 的插入或者追加操作。 4.插入节点            
 内部插入节点:append(content)、append(function(index,html))、  
                                                                       
  appendTo(content);                                        
prepared(content)、prepared(function(index,html))、              
                                                           
  prepared(content);             外部插入节点:
                                before(content)、before(function)  
                             
insertAfter(content)、insetBefore(content);  
5.复制节点:
~~~将某个元素节点复制到另外一个节点后。          
  复制元素本身,不具有任何元素行为:clone()            
 复制元素时将元素的行为也进行复制:clone(true);   6.替换节点:      
     
replaceWith(content):将所有选择的元素替换成html或者dom元素,。参数为被选择元素替换的
                            
                              内容。            
 replaceAll(selector):将所有选择的元素替换成指定selector的元素,参数为需要被替换的元素。
  7.包裹节点;             wrap(html)、wrap(element)、wrap(function)
             unwrap();               wrapAll(html)、wrapAll(element)  
        wrapInner(html)、wrapInner(element)、wrapInner(function)    
        eg:包裹所有的段落标记加粗:$(‘p’).wrap(‘<b></b>’)  
                 
包裹段落中的span为斜体:$(‘span’).wrapInner(<i></i>’)  
8.遍历元素            
each(callback)~参数是一个function函数,该函数接受一个参数index。同时还可实现元素属
                                          ~~性的获取和设置。        
                    eg:。each(function(index){});   9.删除元素    
        remove()            empty(); 案例 :删除数据和图片预览    
        隔行变色:$(‘table
tr:nth-child(odd)’).css(‘background-color’,’#eee’)            
小图片鼠标移动事件:初始化图片位置-〉设置提示图片的src属性-〉  
设置提示图片的位置-〉      显示图片:$(‘#imgTip’).show(3000)        
    小图片鼠标移出事件;.mouseout(function(){$(‘img’).hide()});    
******************************************************************************
jQuery中的事件 1.事件机制             a.页面加载时,执行load事件。      
      b。事件触发后,分为两个阶段:捕获(capture)、冒泡(bubbing)。  
                  大多数浏览器不支持捕获。                    
冒泡:时间执行中的顺序。            
C.阻止冒泡过程:event.stopPropagation(); 2.页面载入事件            
$(function(){             ………             });             或者    
        $(document).ready(function(){
            });             或者将$换成jQuery。   3.绑定事件            
三种方法:a。                              
b。bind(type,【data】,function(){});~~为每个选择元素的事件绑定处理函数 
                              c。映射方式绑定不同的事件                 
          A.为一个选择器添加多个动作:就是讲两个动作合在一起            
        eg:$(‘a’).bind({                                    
click:function(){},                                     
mouseover:function(){}                             }) 4.切换事件        
    hover(over
out):使元素在鼠标悬停与鼠标移出的事件中进行切换。解释:当鼠标移动到所选的元素上面时,执行第一个函数,当鼠标移出这个元素时,执行第二个函数。
            toggle(函数集合):每次单击后依次调用函数。   5.移除事件  
           
unbind(【事件类型】,【事件的处理函数】)。如无参,移除所有的绑定事件。
////可绑定不同的事件,包括自定义事件   6.其他事件              
 one(事件类型,【data】,事件处理函数):为所选的元素绑定一个仅触发依次的事件。
             
 trigger(事件类型,【data】):在选择的元素上触发指定类型的事件。  
7.表单应用                 a.文本框中的事件应用:eg:邮箱验证输入      
          b.下拉列表框的事件应用   8.列表应用
9.网页选项卡的应用:门户网站  10.事件:        
下拉列表框改变事件:change(function(){})  
**************************************************************************************
  1.显示和隐藏(基本)               show()和hide()        
    动画效果的显示和隐藏:                        
a。show(speed,[callback])                                        
   
speed为执行动画时的速度。有三个默认字符值:slow=0.6秒。normal=0.4秒,  
                  fast=0.2秒。还可以直接写入数值,单位是毫秒。          
              b。hide(speed,[callback])                        
c。检测当前元素的显示状态,在根据该状态进行元素时隐藏还是显示。。      
                      (1)。无参调用格式                              
               toggle()                              
 (2)。逻辑参数调用格式                                            
toggle(true或则false)。true显示元素,false隐藏元素                    
          (3)。动画效果调用模式                                      
      toggle(speed ,[callback])等价于show(speed,[callback])  
2.滑动             效果像拉窗帘。              改变元素高度 。          
 a。 slideDown(speed,[callback])                            
以动画效果将所选择元素的高度向下增大,使其呈现一种“滑动效果,”而元素的其他属性没有发生变化。
                            speed:动画显示的速度。                    
         callback:动画显示完成后,执行的回调函数。        
 b。slideUp(speed,[callback])                            
以动画的效果将选择的元素的高度
向上减少,同样也仅仅是改变其高度属性。参数与上一个一样。        
 c。slideToggle(speed,[callback])                            
以动画的效果切换选择元素的高度,即:如果高,则减少。如果低,则增大。  
3.淡入淡出              
通过元素渐渐改变背景色的动画效果显示或者隐藏元素。              
 改变元素透明度,不改变其他属性。            
a。fadeIn(speed,[callback])淡入。透明度从1.0到0.0淡入            
b。fadeOut(Speed,[callback])淡出。透明度从0.0到1.0淡出            
c。fadeTo(speed,opacity,[callback])将透明度指定到某一个值。  
4.自定义动画         a。简单的动画             animate(param,  
 [duration],    [easing],     [callback])                        
        param:制作动画效果的属性和值得集合。                            
    duration:三种默认的速度字符:slow、normal、fast或者自定的数字      
                          easing:动画插件的使用,用于
控制动画的显示效果,通常有linclear和swing字符值。                      
          callback            d。动画停止和 延时                
stop():停止某个动画的执行                
delay():延时某个动画的执行。      
*************************************************************************************
打开页面 window.open(url):新的窗口打开链接,跳转后无后退功能
window.location=url:跳转后有后退功能 window.location.href;
window.location.replace(url):跳转后无后退功能    

window.location.reload()刷新当前页面.

parent.location.reload()刷新父亲对象(用于框架)

opener.location.reload()刷新父窗口对象(用于单开窗口)

top.location.reload()刷新最顶端对象(用于多开窗口)

都是重定向 

 

**********************************************************************************

jQuery事件之鼠标事件

鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
(5)和(6)这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件。
 (7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。
*************************************************************************************
deferred:延缓。

JQuery 选择器 JQuery 事件 JQuery 效果
JQuery 属性操作 JQuery 文档操作 JQuery CSS操作———-
*****************************************************…

相关文章