囫囵吞枣——Jquery 笔记

隐藏和显示

语法：$(selector).hide/show(speed,callback);

1.hide() 和show()  隐藏和显示 

语法：$(selector).toggle(speed,callback);

2.toggle()  隐藏变显示，显示变隐藏

            注：关于拥有callback的例子：

                     $("p").hide(1000,function(){
                       alert("我就是callback");
                        });

淡入淡出

         语法：$(selector).fadeIn(speed,callback（回调函数）);

1. fadeln()  淡入淡出的效果。
2. fadeIn() 和fadeIn("show")的效果是一致的。(可能有误)
3. 用法是在fadeIn(秒数)    毫秒为单位 

• 淡出

         语法：$(selector).fadeOut(speed,callback（回调函数）);

1. fadeOut()  淡出可见元素    用法如入淡入淡出

• 淡出淡入切换

         语法：$(selector).fadeToggle(speed,callback（回调函数）);

• 设置不透明度

       语法：$(selector).fadeTo(speed,opacity,callback);

       方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

       例子：$(selector).fadeTo("show",0.5);

滑动

• 向下滑动：   $(selector).slideDown(speed,callback);
• 向上滑动：   $(selector).slideUp(speed,callback);
• 滑动的切换 ：  $(selector).slideToggle(speed,callback);

动画

      $(selector).animate({params},speed,callback);

       params ：

1. 必需的 params 参数定义形成动画的 CSS 属性。
2. 可设置多个参数
3.  也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：    （例二）   原是一放大2倍得2   在执行一次，是二放大2倍得4，以此类推
4. 可是使用预定属性 （ show   /  hide  /  toggle ） ；

      例子：

                            例二

     使用小诀窍：

          写多个animate，会按照先后顺序挨个执行。

        

停止动画

          stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

      $(selector).stop(stopAll,goToEnd);

1. stopAll参数：规定是否应该清除动画列队。默认是false。停止动画
2. goToEnd参数：规定是否立即完成当前动画。默认是 false。

          例子有动画效果A和B正在依次执行（注意2和3点的区别）

1. $(selector).stop();    停止当前激活的动画A，但之后能再动画队列中再次激活(点击开始)。
2. $(selector).stop(true);   停止当前动画，并清除动画队列，所以元素的所有动画都会停止 
3. $(selector).stop(true，true);   停止动画，但完成动作" 快速完成动作，并停止它。

关于callback

     例子一：                                                                      例子二：

                                                    

             注：区别在于，alert  是否包含在callback（回调函数中），

                     例子一 ，包含在函数中 ，效果将会显示，在隐藏效果加载后，弹出提示框

                     例子二，不包含在函数中，将会在动画未加载隐藏效果前，显示提示框

 链链接：Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

获取值

 text()  设置或返回所选元素的文本内容

 html() 设置或返回所选元素内容（包括HTML标记）

 val()  设置返回变淡字段的值

  attr()  获取属性值

添加元素

•  append()  在被选元素的结尾插入内容
•  prepend() 在被选元数的开头插入内容
•  after() 在被选元素之后插入内容
•  before()  在被选元素之前插入内容

删除元素

• remove() 删除被选元素（及其子元素）
• empty()  从被选元素中删除子元素     

jquery操作CSS

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

Jquery尺寸方法

• width()  方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
• height()  方法设置或返回元素的高度（不包括内边距、边框或外边距）。
• innerWidth()  方法返回元素的宽度（包括内边距）。
• innerHeight()  方法返回元素的高度（包括内边距）。
• outerWidth()  方法返回元素的宽度（包括内边距和边框）。
• outerHeight()  方法返回元素的高度（包括内边距和边框）。

遍历

父辈

• parent()  方法返回被选元素的直接父元素
• parets()  方法返回被选元素的所有祖先元素
• parentsUntil()  返回两个元素之间的元素

         例子：$("span").parentsUntil("div")    获取span到div的元素信息

子辈

• children()     遍历直接的子元素
• find()            方法返回被选元素的后代元素，

同辈   注：均不包含被选定元素

• siblings()      方法返回被选元素的所有同胞元素。 
• next()           方法返回被选元素的后一个同胞元素 。(前)
• nextAll()        方法返回被选元素的所有跟随的同胞元素。 （前）
• nextUntil()     方法返回介于两个给定参数之间的所有跟随的同胞元素。（前）
• prev()            方法返回被选元素的前一个同胞元素。（后）
• prevAll()         方法返回被选元素的前所有的同胞元素。（后）
• prevUntil()       方法返回被选元素之间的同胞元素。 （后）

过滤筛选

• first() 方法   返回被选元素的首个元素
• last() 方法    返回被选元素的最后一个元素。
• eq() 方法     返回被选元素中带有指定索引号的元素  （方法内填写索引号）
• filter() 不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回      ————这个不是很能理解，不匹配的会被删除
• not()  方法返回不匹配标准的所有元素      not() 方法与 filter() 相反。

AJAX

语法： $(selector).load(URL（地址）,data（请求值）,callback（回调函数）);

get：$.get(URL,callback);

 post：$.post(URL,data,callback);

JOSN  

    1.对象    例：{"name":"runoob", "alexa":10000, "site":null}

    2. 数组   例：["Google", "Runoob", "Taobao"]

3.json转换为JavaScript 语法：JSON.parse(text[, reviver]) 值必须是一个合格的对象和数组

4.将JavaScript转字符串 语法：JSON.stringify(value[, replacer[, space]]) 值必须是一个合格的字符串

关于选择器：

$("div,p") div 和p元素。

$("p:first") 第一个元素

$("p:last") 最后一个<p>元素

$("tr:even") tr所有偶元素 索引值第一个0 第二个为1 以此类推

$("tr:odd") tr的所有奇数

$("p:first-child") 父元素的第一个子元素的p标签

$("p:first-of-child")

......

$("ul li:eq(3)") 列表index第四个值(索引从0开始)

$("ul li:gt(3)") 列表大于3的元素

$("ul li:lt(3)") 列表小于3的元素

$("input:not(:empty)") 所有不为空的输入元素

$(":header") 所有的标签元素

$(":animated") 所有的动画元素

$(":focus") 当前的焦点元素

$(":contains('hello')") 包含文本'hello'的元素

$("p:hidden") 被隐藏的p元素

$("p:lang(de)") 所有带有"de"开头的lang属性值的<p>元素

$("empty")所有的空元素

... http://www.runoob.com/jquery/jquery-ref-selectors.html

事件方法

bind() 向元素添加事件处理程序

blur() 添加/触发失去焦点事件

change() 添加/触发click事件

click() 添加/触发double click 事件

trigger() 触发绑定到备选元素的指定时间上的所有函数

...实例有很多，我只记录几个..

..具体 请浏览 http://www.runoob.com/jquery/jquery-ref-events.html

 

      

 

         

prevAll