jQuery笔记

最新推荐文章于 2024-01-20 21:49:50 发布

活出自己666

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/qq_43013772/article/details/83473126

版权

jQuery笔记

1.datepicker 时间选择器 input
$("#date").datepicker();//时间选择器

2.silder 滑块小部件
$("#dd").slider({//滑块小部件默认为横向
orientation:“vertical”, //竖向
min:0,
max:150,
value:50
})

3.progressbar 进度条

$("#ff").progressbar({//进度条
value:false,
change:function(){

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dd2").text(

("#ff").progressbar(“value”)+"%");
},
complete:function(){
$("#dd2").text(“完成”);
}
})

function progress(){
	var val=$("#ff").progressbar("value")||0;
	$("#ff").progressbar("value",val+1);
	if(val<99){
		setTimeout(progress,100);
	}
}
setTimeout(progress,3000);

4.draggable 拖动
$( “#draggable” ).draggable();

5.droppable 放置
拖动dd放置到dd2 发生变化
$(function(){
$("#dd").draggable();//拖动
$("#dd2").droppable({//放置
drop:function(e,ui){
$(this).addClass(“ui-state-highlight”).find(“p”).html(“Dropped”);
}
});
})

6.resizable 缩放
$("#dd3").resizable();//缩放

7.selectable 选择器
$("#dd4").selectable();//选择

8.sortable 排序
$("#dd5").sortable().disableSelection();//排序

连接排序  dd5 dd6序列  要用同一个class
$("#dd5,#dd6").sortable({
	connectWith:".ff"	
}).disableSelection();//选择

9.accordion 折叠面板
$("#dd").accordion();//折叠面板

部分 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

10.autocomplete 自动完成
var availableTags = [
“ActionScript”,
“AppleScript”,
“Asp”,
“BASIC”,
“C”
];
$("#dd2").autocomplete({
source:availableTags
});//自动完成

11.button 按钮
一.基本
一个button元素

一个锚
$(“button,a,input[type=submit]”).button().click(function(e){
e.preventDefault();
});//按钮

二.复选框
<input type="checkbox" id="dd3"><label for="dd3">切换</label>
<div id="dd4">
	<input type="checkbox" id="check1"><label for="check1">B</label>
	<input type="checkbox" id="check2"><label for="check2">I</label>
	<input type="checkbox" id="check3"><label for="check3">U</label>
</div>
$( "#dd3" ).button();
$( "#dd4" ).buttonset();