JQ 知识点集合
数组与字符串间的转换
一、数组转字符串(将数组元素用某个字符连接成字符串)
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',
width:'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()//返回元素的宽度
JQ 知识点集合的更多相关文章
- fullcalendar日历控件知识点集合
1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方 ...
- crm作业知识点集合[三]
知识点1 我们要实现一个这样的功能,在学生表中,可以查看每个学生的报名的班级的所有的成绩,就是下图的效果 1.首先我们需要在学生表中自定义一列,这一列的内容就是一个a标签,指向另外一个页面,而我们在另 ...
- php知识点集合
--------------------------------------------------------- PHP知识大全 ------------------------ ...
- 跟着刚哥梳理java知识点——集合(十二)
Java集合分为Collection和Map两种体系 一.Collection接口: Collections接口为我们提供了以下方法: size():返回集合中元素的个数 add(Object obj ...
- iOS知识点集合--更改(2)
3.nsmutablearray *a 如果直接赋值 a = @[@"d",@""]; 这个时候a 是不可变的 字典也是如此 2.如果接口调用错误的话 打印re ...
- lr_场景设计之知识点-集合点、loadgenerator
1.controller原理 通过场景设计来模拟用户的真实操作并调用bugen中的脚本,再通过设置的压力机产生压力,在场景运行中实时监控用户的执行情况,tps,响应时间,吞吐量,服务器资源使用情况: ...
- iOS学习——iOS开发小知识点集合
在iOS学习和开发过程中,经常会遇到一些很小的知识点和问题,一两句话就可以解释清楚了,这样的知识点写一篇随笔又没有必要,但是又想mark一下,以备不时之需,所以就有了本文.后面遇到一些小的知识点会不断 ...
- javascript 相关小的知识点集合
本文主要是列出一些javascript 相关的,不限于javascript的,容易记错或者遗忘的小知识,小技巧. 1.javascript中的false 在 JavaScript,常见的 false ...
- crm作业知识点集合[二]
知识点1 前面我们实现了这个功能,就是在models中如果有了choice选项,我们可以实现在页面显示这个chocice的value值,而不是key值,我们这个知识点就是在优化一下这个点 首先如果表中 ...
随机推荐
- mysql数据库优化课程---14、常用的sql技巧
mysql数据库优化课程---14.常用的sql技巧 一.总结 一句话总结:其实就是sql中那些函数的使用 1.mysql中函数如何使用? 选择字段 其实就是作用域select的选择字段 3.转大写: ...
- EasyUI datagrid 多条件查询
<script type="text/javascript"> $(function () { $("#dg").datagrid({ url: ' ...
- HDU - 59562016ACM/ICPC亚洲区沈阳站I - The Elder 树上斜率优化dp
题意:给定上一棵树,然后每条边有一个权值,然后每个点到 1 的距离有两种,第一种是直接回到1,花费是 dist(1, i)^2,还有另一种是先到另一个点 j,然后两从 j 向1走,当然 j 也可以再向 ...
- poj1228稳定凸包
就是给一系列点,看这是不是一个稳定凸包 稳定凸包是指一个凸包不能通过加点来使它扩大面积,也就是说每条边最少有三个点 判断的地方写错了,写了两边循环,其实数组s已经排好了序,直接每三个判断就好了 #in ...
- Java输出double类型中的最小正数和最大正数
这是<写给大忙人看的java核心技术>中的一道练习题. 1. 输出最大正数值 System.out.println(Double.MAX_VALUE); 直接输出包装类Double的MAX ...
- Python之如何删除pandas DataFrame的某一/几列
删除pandas DataFrame的某一/几列: 方法一:直接del DF['column-name'] 方法二:采用drop方法,有下面三种等价的表达式: 1. DF= DF.drop('co ...
- ML之多元线性回归
转自:http://www.cnblogs.com/zgw21cn/archive/2009/01/07/1361287.html 1.多元线性回归模型 假定被解释变量与多个解释变量之间具有线性关系, ...
- UVA-10047 The Monocycle (图的BFS遍历)
题目大意:一张图,问从起点到终点的最短时间是多少.方向转动也消耗时间. 题目分析:图的广度优先遍历... 代码如下: # include<iostream> # include<cs ...
- SSM整合RocketMQ
前言 RocketMQ是一个由阿里巴巴开源的消息中间件,脱胎于阿里内部使用的MetaQ,本文主要是写个小例子演示一下消息从生产到消费的过程. RocketMQ下载和安装 下载地址 http://roc ...
- js常用正则表达式,滚蛋吧!你们测试组bug,让你挑
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...