js常用函数-1

1.添加删除css

$("#id").addClass("NewClassName");
$("#id").removeClass("ClassNameToBeRemoved");

---

2.选择符

标签名： $('p')  选择文档中的所有段落
ID： $("#some-id")
类： $('.some-class')

选择特定id下的所有子li元素   $("#some-id > li")  
特定id下所有没有.horizontal 类的li元素    $("#some-id li:not(.horizontal)")

选择带有类horizontal的div集合中的第2个项     $('div.horizontal:eq(1)') 

过滤选择结果集中的奇数元素   $('tr:odd').addClass('odd');
过滤选择结果集中的偶数元素    $('tr:even').addClass('even');

JQuery选择函数

选择特定元素的父元素          $('#some-id').parent() 
选择特定元素最近的下一个同级元素    $('#some-id').next()
选择特定元素的所有同级元素       $('#some-id').siblings()
选择特定元素下所有包含特定类的元素$('#some-id').find('.some-class')

---

3.事件
绑定事件

$("#some-id").bind("click", function(){   })
$("#some-id").unbind("click", bindedFunctionName);  移除已绑定的事件，前提是绑定的函数有名称（不是匿名函数）
$("#some-id").click(function(){  })

复合函数绑定事件

交替执行             $("#some-id").toggle(function(){ } ,function(){ });
鼠标进入元素时执行第一个函数，离开元素时执行第二个函数     $("#some-id").hover(function(){ }, function(){ }); 

触发某一事件

触发特定元素的click事件   $("#some-id").trigger("click"); 

---

4.为元素添加效果：

设置/读取 CSS样式属性

读取样式值       $("#some-id").css("property") 
设置一个样式值     $('#some-id').css('property', 'value')
设置多个样式属性   $('#some-id').css({property1: 'value1', property2: 'value2'})

改变字体大小：

 var currentSize = $('#text-id').css('fontSize');          //获取字体大小，如30px  
 var num = parseFloat(currentSize, 10);//将值转为浮点数，.parseFloat( , )为javascript内置函数，这里是转为10进制的浮点数
 var unit = currentSize.slice(-2); //获取单位名称，如px，.slice()是javascript内置函数，获取字符串指从定位置开始的子字符串，-2表示倒数两个字符
num *= 1.5;
$('text-id').css('fontSize', num + unit); //设置字体大小样式

隐藏和显示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

 $('#some-id').show();
 $('#some-id').hide();    等效于：$('#some-id').css('display', 'none');  

大小、透明度逐渐变化的显示或隐藏

 $('#some-id').show('slow');
 $('#some-id').hide(800);

淡入淡出

$('some-id').fadeIn('slow');    //指定时间内不透明度属性值由0增加到1
$('some-id').fadeOut('slow');   //指定时间内不透明度值由1减小到0

构建具有动画效果的show：
主要调用.animate()方法，其有4个参数：包含样式属性及值的映射；可选的速度参数；可选的缓动类型；可选的回调函数；

 1.并发显示多个效果
   $('#some-id').animate({height: 'show', width: 'show', opacity: 'show'}, 'slow', function(){ alert('动画显示元素');});
   $('div .button').animate({left:600, height:44}, 'slow');  //水平位置从0移动到600，高度由0增加到44

 2.排队显示多个效果，级联多个.animate()，一个效果显示完了再显示下一个效果
 $('#some-id').animate({left:600}, 'slow').animate({height: 44}, 'slow');

---

5.DOM操作
属性操作

  $('#some-id').attr('property'); //获取属性
  $('#some-id').attr('property','value'); //设置属性
  $('#some-id').attr({'property1': 'value1', 'property2': 'value2'}); //设置多个属性

Attribute：
$(”p”).addClass(css中定义的样式类型); 给某个元素添加样式
$(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值，参数是map
$(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值
$(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值
$(”元素名称”).html(); 获得该元素内的内容（元素，文本等）
$(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容
$(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值
$(”元素名称”).removeClass(”class”) 给某元素删除指定的样式
$(”元素名称”).text(); 获得该元素的文本
$(”元素名称”).text(value); 设置该元素的文本值为value
$(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$(”input元素名称”).val(); 获取input元素的值
$(”input元素名称”).val(value); 设置input元素的值为value

Manipulation：
$(”元素名称”).after(content); 在匹配元素后面添加内容
$(”元素名称”).append(content); 将content作为元素的内容插入到该元素的后面
$(”元素名称”).appendTo(content); 在content后接元素
$(”元素名称”).before(content); 与after方法相反
$(”元素名称”).clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）
$(”元素名称”).empty() 将该元素的内容设置为空
$(”元素名称”).insertAfter(content); 将该元素插入到content之后
$(”元素名称”).insertBefore(content); 将该元素插入到content之前
$(”元素”).prepend(content); 将content作为该元素的一部分，放到该元素的最前面
$(”元素”).prependTo(content); 将该元素作为content的一部分，放content的最前面
$(”元素”).remove(); 删除所有的指定元素
$(”元素”).remove(”exp”); 删除所有含有exp的元素
$(”元素”).wrap(”html”); 用html来包围该元素
$(”元素”).wrap(element); 用element来包围该元素