数组与字符串间的转换
一、数组转字符串(将数组元素用某个字符连接成字符串)
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");
二、字符串转数组(将字符串按某个字符切割成若干个字符串,并以数组形式返回)
var s = "abc,abcd,aaa";
ss = s.split(",");// 在每个逗号(,)处进行分解。
select的操作
jQuery获取Select选中的Text和Value:
1. var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text
2. var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value
3. var checkIndex=jQuery("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
4. var maxIndex=jQuery("#select_id option:last").attr("index"); //获取Select最大的索引值
jQuery添加/删除Select的Option项:
1. jQuery("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. jQuery("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. jQuery("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. jQuery("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. jQuery("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
6. jQuery("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option
内容清空:
jQuery("#select_id").empty();
////////////////////////////////////////////////////////////设置样式
单个样式:
$(this).css("color","red");
多个样式:
$(this).css({color:"red",background:"black"});
获取样式值:
$(this).css("color")
对数组数据的遍历(筛选)
arr = $.grep(da, function (n, i) {///da数组 if(){//判断条件是否成立,成立筛选出这组数据放到arr里面一直遍历出所有符合的 return n} })
$("span").parent();该方法只会向上一级对 DOM 树进行遍历。
$("span").parents();该方法对所有上级进行遍历
$("div").children().css({"color":"red","border":"2px solid red"});该方法对下一级 也就是他儿子进行遍历$("div").find("span");返回属于 <div> 后代的所有 <span> 元素:
$("h2").siblings().css({"color":"red","border":"2px solid red"});siblings() 方法返回被选元素的所有同胞元素。$("p").filter(".intro");返回带有类名 "intro" 的所有 <p> 元素:
$("p").eq(1);索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
$("div p").first(); 第一个$("div p").last();最后一个
$.each()
$.each([52, 97], function(index, value) {
alert(index + ‘: ‘ + value);
});
追加元素的方法如append、prepend、before
被选元素内
jQuery append() 方法在被选元素的结尾插入内容。 $("p").append("Some appended text.");
jQuery prepend() 方法在被选元素的开头插入内容。$("p").prepend("Some prepended text.");
被选元素外
jQuery after() 方法在被选元素之后插入内容。 $("img").after("Some text after");jQuery before() 方法在被选元素之前插入内容。 $("img").before("Some text before");
对元素的淡入淡出效果
$("#panel").stop();暂停所有效果和动画
jQuery fadeIn() 用于淡入已隐藏的元素。 $("#div3").fadeIn(3000);
jQuery fadeOut() 方法用于淡出可见元素。$("#div3").fadeOut(3000);
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 $("#div3").fadeToggle(3000);
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。 $("#div1").fadeTo("slow",0.15);
滑动效果
$("#panel").slideToggle(); 如果元素向下滑动,则 slideToggle() 可向上滑动它们。如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$("#panel").slideUp();可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
示例:$(document).ready(function(){ $(".flip").click(function(){$(".panel").slideToggle("slow"); }); });<style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style>
<body> <p class="flip">请点击这里</p> <div class="panel"> <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p> </div> </body>
动画效果$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', '150px' }); }); 提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!Callback 函数
当动画 100% 完成后,即调用 Callback 函数。$(selector).hide(speed,callback)
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });});
获取并设置 CSS 类
$("#div1").addClass("important blue");//调用类样式 添加
$("h1,h2,p").removeClass("blue"); // 移除样式$("h1,h2,p").toggleClass("blue");//有救添加没有就删除<style type="text/css"> .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style>$("p").css({"background-color":"yellow","font-size":"200%"});///直接给样式$("#div1").width()//返回元素的宽度