jQuery知识点总结

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM、遍历和修改、AJAX…

• 注意
• jquery 可以有多个并且不会被覆盖
• 只需要文档加载成功立即执行入口函数
• 有很好的兼容性

以上几点用一下函数表示：

一：奇数和偶数行的操作

下面是一个表示奇数和偶数行的进行的操作：

    
第一行
    
第二行
    
第三行
    
第四行
    
第五行

二：对象互相转换

jQuery 语法是通过选取 HTML 元素，对所选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery

• DOM对象：：用javascript方法获取的对象，无法使用jQuery的属性及方法。
• jQuery对象：通过jQuery方法返回的对象，无法直接使用DOM对象的属性以及方法。

DOM对象和jQuery对象相互转换

• jQuery对象转DOM对象：

$('#box')[0]或$('#box').get(0)    等价于  document.getElementById(‘box’);

简化表示：jquery->js  box --->box[0]

• DOM对象转jQuery对象

$(document.getElementById(‘box’));等价于$(‘#box’);
简化表示：js--->jquery 花钱  box ---> $(box)

用下面的函数的来表示

四：操作属性

js 1:默认 对象.属性名img.src     a.href 
   2:自定义  setAttribute('属性名','属性值')


jQuery不管自定义还是默认 都叫属性 
获取:  attr('属性名') 
设置 : attr('属性名','属性值')

五：操作样式

js 样式操作  行内样式  对象.style.属性名
            行外样式  对象.className 
jquery  样式操作 
        行内操作  对象.css({
     width:'200px',height:'300px',background-color:'red'})
# 如若属性不带引号  驼峰命名 borderRadius
              要是带引号 用css命名法： border-radius

  行外样式    对象.addClass('类名')-  向被选元素添加一个或多个类
             对象.removeClass('类名')-从被选元素中删除一个或多个类
             对象.toggleClass('类名')- 对被选元素进行添加/删除类的切换操作
             对象.hasClass('类名')-判断当前元素是否包含隐藏样式       

下面程序是行外样式操作：

    
    
    


隐藏

六：创建元素

使用 $ 函数来创建新元素

var  $newElment=$('
')//创建元素，返回jQUERY对象

七：元素操作

1:节点的创建 $(’

’)
2)添加和删除元素
添加新的 HTML 内容
通过 jQuery，可以很容易地添加新元素/内容。
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容

$("p").append("Some appended text.");

prepend() - 在被选元素的开头插入内容

$("p").prepend("Some prepended text.");

after() - 在被选元素之后插入内容

$("img").after("Some text after");

before() - 在被选元素之前插入内容

$("img").before("Some text before");

这四个方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

    
    


创建一个标签
删除元素

八：选择器

1: * id class tagName
2:层级
  后代   div p 
  子代   div>p 
  毗邻   prev + next  选择 #紧挨# 着prev元素的next 元素  （一组或一个）
        prev ~ sibilings 选择prev元素的所有叫sibilings的#兄弟节点 (一组或多个)
        
3：基本
:first :last  :not 

.eq(i)   :eq(i)
 索引选择器:
$('div').eq(3) //第四个div
$('div:eq(3)') //第四个div


# 对象.children(选择器)

  对象.parent() 找爸爸
  对象.next() 紧挨着的下一个
  对象.prev() 紧挨着的上一个
  对象.find()  找对象中的某一个
  $('div').find('.a')  找的是div里类名为a的孩子
  对象.sibilings()  找所有的兄弟元素
  

九:动画

1:显示与隐藏 
显示 : show() 无参  display:block 
       
      show(2000,function(){
     }) //回调  time,callback
隐藏: hide()
     hide(2000,function(){
     }) //回调  time,callback
     
2.展开收起
	slideDown(speed,callback)向下滑动
	slideUp(speed,callback)向上滑动
	slideToggle(speed,callback)上下切换
$("#flip").click(function(){
      $("#panel").slideDown(); });
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

3.淡入淡出
	fadeIn(speed,callback) 淡入
	fadeOut(speed,callback) 淡出
fadeToggle(speed,callback)淡入淡出切换
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

4.停止
stop()停止所有在指定元素上正在运行的动画，停止在当前状态，动画可能未完成。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$("#stop").click(function(){
      $("#panel").stop(); });

5.延迟
delay()设置一个延时来推迟执行队列中之后的项目。
jQuery 1.4新增。用于将队列中的函数延时执行。它既可以推迟动画队列的执行，也可以用于自定义队列。
$('#foo').slideUp(300).delay(800).fadeIn(400);

6.完成
finish()停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。所有动画的CSS属性跳转到他们的最终值。

    
    
    





动起来
不许动