您的位置：首页 > Web前端 > JQuery

jquery-ui以及js复习

2016-04-03 23:22 441 查看

(1).

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<link rel="stylesheet" href="jquery-ui.css"/>

<script src="jquery-1.10.2.js"></script>

<script src="jquery-ui.min.js"></script>

</head>

<body>

<input type="button" onclick="inpt()"value="show"/>

<div id="dialog-modal" title="遮罩层"></div>

<input type="text" id="txt" title="门前老树长新芽。。。"/>

</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>

</br></br>

<a href="jquery-1.10.2.js" id="a" onclick="return true">点击超链接</a>

<span id="sp">我是按钮</span>

<script>

// $(function() {

// $( "#dialog-modal" ).dialog({

// height: 140,

// modal: true

// });

// });

$("input:button").click(function inpt(){

$( "#dialog-modal" ).dialog({

height: 140,

modal: true,

buttons: {

关闭: function () {

$(this).dialog("close");

}

}

});

});

// $(function() {

// $( "#dialog-modal" ).dialog({

// height: 140,

// modal: true,

// buttons: {

// 关闭: function() {

// $( this ).dialog( "close" );

// }

// }

// });

// });

$("#txt").datepicker({

//多个值之间用逗号隔开

dateFormat:"yy-mm-dd", //日期格式化处理

changeMonth:true, //让月份可以下拉选选择

changeYear:true, //让年份可以下拉选选择，默认文当前选择年份前后十年

//完成月份名称替换为中文

monthNames: [ "一月", "二月", "三月", "四月", "五月", "六月",

"七月", "八月", "九月", "十月", "十一月", "十二月" ],

//下拉选择的月份缩写替换为中文

monthNamesShort: [ "一月", "二月", "三月", "四月", "五月", "六月",

"七月", "八月", "九月", "十月", "十一月", "十二月" ],

//星期几提示替换为中文

dayNamesMin:[ "日", "一", "二", "三", "四", "五","六"],

//星期几浮动提示提示替换为中文

dayNames:[ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五","星期六"],

maxDate:"",//设置能够选择的最大日期，如果为当前日期写“0”，同时可以加1，也可以减1（单位：x/m/y）

minDate:"" //设置能够选择的最小日期

});

//将jquery ui的日期选择的文字变小

$("#ui-datepicker-div").css("font-size","10px");

$("#sp,#a").button();

$("#txt").tooltip();

</script>

</body>

</html>

（2）.遮罩层

$("input:button").click(function inpt(){

$( "#dialog-modal" ).dialog({

height: 140,

modal: true,

buttons: {

关闭: function () {

$(this).dialog("close");

}

}

});

});

(3).JS复习

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="js/jquery-1.12.2.min.js"></script>

</head>

<body>

<div></div>

<form action="myjquery1.html" method="post" id="myform" name="myform" class="clform">

<input type="text"/><br/>

<input type="password"/><br/>

<input type="radio"/><br/>

<input type="checkbox"/><br/>

<input type="hidden"/><br/>

<input type="file"/><br/>

<input type="image"/><br/>

<input type="button"/><br/>

<input type="submit"/><br/>

<input type="reset"/><br/>

<select name="sel" id="sel">

<option>1111111</option></select><br/>

<textarea name="ta" id="ta" cols="20" rows="6"></textarea><br/>

</form>

<div id="div1" style="position: relative;width: 600px;height: 480px;border: 1px solid gray;">

<div style="position: absolute;left: 0;top: 0;width: 40px;height: 40px;background-color: orange;"></div>

</div>

<input type="button" value="走起"/><input type="button" value="暂停" disabled/>

<br/>

点击按钮后实现小div块在大的div块的内壁环行

<script>

// document.body.childNodes

// $ ====> jQuery

// $("div:eq(0)");

//用纯js来定位找到上的form

// document.getElementById("myform");

// document.getElementsByName("myform")[0];

// document.getElementsByTagName("form")[0];

// document.forms[0];document.forms["myform"];

// document.myform;

// document.body.childNodes，然后使用循环来确定是否为form元素节点

//用jquery来定位找到上面的form

// $("#myform");

// $(".clform:eq(0)");

// $("form").eq(0);

// $("[action='myjquery1.html']:eq(0)");

// $("body>form").eq(0);

// $("div+form").eq(0);

// $("div~form").eq(0);

// alert($("#myform>:input").length);

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航