JS高阶 jQuery

最新推荐文章于 2021-09-07 19:15:20 发布

Java1029384756

最新推荐文章于 2021-09-07 19:15:20 发布

阅读量412

点赞数

本文链接：https://blog.csdn.net/java1029384756/article/details/52862471

版权

JS高阶

翻页

<html>
<meta charset="utf-8"/>

<head>
<script type="text/javascript">

var MAX_LENGTH = 100; //总页数

//点击切换页面
function clickChangePage(count){

var newPage = 0;
var myText = document.getElementById("myText");
var nowPage = parseInt(myText.value); //当前页码转换为number类型

//跳到首页
if(count == -999){
newPage = 1;
}else if(count == -1){ //前翻

newPage = nowPage - 1;
if(newPage < 1)
newPage = 1;

}else if(count == 1){ //后翻

newPage = nowPage + 1;
if(newPage > MAX_LENGTH)
newPage = MAX_LENGTH;

}else if(count == 888){ //跳到尾页
newPage = MAX_LENGTH;
}

myText.value = newPage;

checkBtnShowHide(newPage);
}

//检测是否隐藏或者显示首尾页按钮
function checkBtnShowHide(nowPage){
var firstBtn = document.getElementById("firstBtn");//首页按钮
var lastBtn = document.getElementById("lastBtn");//尾页按钮

if(nowPage == 1){ //第一页的时候，隐藏首页按钮，显示尾页按钮

firstBtn.style.visibility = "hidden";
lastBtn.style.visibility = "";

}else if(nowPage == MAX_LENGTH){ //最后一页的时候，隐藏尾页按钮，显示首页按钮

lastBtn.style.visibility = "hidden";
firstBtn.style.visibility = "";

}else{ //中间页面的时候，首尾2个按钮都要显示出来

lastBtn.style.visibility = "";
firstBtn.style.visibility = "";

}
}

//文本框内的值改变的时候（触发条件：当前文本框失去焦点）
function textChangeFuc(myText){
var count = Number(myText.value);

if(count < 1)
myText.value = 1;

if(count > MAX_LENGTH)
myText.value = MAX_LENGTH;

checkBtnShowHide(parseInt(myText.value));
}

</script>
</head>

<body>

<input id="firstBtn" type="button" value="<<" style="visibility:hidden;" οnclick="clickChangePage(-999)" />
<input type="button" value="<" οnclick="clickChangePage(-1)"/>

<input id="myText" type="text" size="2" value="1" οnchange="textChangeFuc(this)" />
<label>/100</label>

<input type="button" value=">" οnclick="clickChangePage(1)"/>
<input id="lastBtn" type="button" value=">>" οnclick="clickChangePage(888)"/>

</body>
</html>

动态创建表格

<html>
<meta charset="utf-8"/>
<head>
<script type="text/javascript">

//动态创建表格
function clickCreateTable(){
// var myTable = document.getElementById("myTable");

// myTable.rows;//行的集合(tr的集合)
// myTable.cells; //列的集合(td的集合)

// var newRow = myTable.insertRow(2);
// newRow.insertCell(0).innerHTML = "新的列1";
// newRow.insertCell(1).innerHTML = "新的列2";
// newRow.insertCell(2).innerHTML = "新的列3";

//这是老司机的妖艳儿写法，不建议使用！！
// myTable.insertRow(3).insertCell(0).innerHTML = "老子就是要妖艳儿";
// myTable.rows[3].insertCell(1).innerHTML = "继续妖";
// myTable.rows[3].insertCell(2).innerHTML = "我就是最妖的";



//动态创建表格
// //第一步，创建一个table元素
// var autoTable = document.createElement("table");
// autoTable.border = 50;
//
// //第一行
// autoTable.insertRow(0).insertCell(0).innerHTML = "动态的1,1";
// autoTable.rows[0].insertCell(1).innerHTML = "动态的1,2";
// autoTable.rows[0].insertCell(2).innerHTML = "动态的1,3";
// autoTable.rows[0].insertCell(3).innerHTML = "动态的1,4";
//
// //第二行
// autoTable.insertRow(1).insertCell(0).innerHTML = "动态的2,1";
// autoTable.rows[1].insertCell(1).innerHTML = "动态的2,2";
// autoTable.rows[1].insertCell(2).innerHTML = "动态的2,3";
// autoTable.rows[1].insertCell(3).innerHTML = "动态的2,4";
//
// //第三行
// autoTable.insertRow(2).insertCell(0).innerHTML = "动态的3,1";
// autoTable.rows[2].insertCell(1).innerHTML = "动态的3,2";
// autoTable.rows[2].insertCell(2).innerHTML = "动态的3,3";
// autoTable.rows[2].insertCell(3).innerHTML = "动态的3,4";
//
// //第四行
// autoTable.insertRow(3).insertCell(0).innerHTML = "动态的4,1";
// autoTable.rows[3].insertCell(1).innerHTML = "动态的4,2";
// autoTable.rows[3].insertCell(2).innerHTML = "动态的4,3";
// autoTable.rows[3].insertCell(3).innerHTML = "动态的4,4";

// document.getElementById("tableDiv").appendChild(autoTable);


//99乘法表的table
var table_99 = document.createElement("table");
table_99.border = 1;

// alert(1);

for(var i = 1; i < 10; i++){

table_99.insertRow(i-1);
var index = 0;

for(var p = i; p < 10; p++){
table_99.rows[i-1].insertCell(index).innerHTML = i + " * " + p + " = " + i * p;
}

}

document.getElementById("tableDiv").appendChild(table_99);
}

</script>

</head>

<body>
<input type="button" value="创建表格" οnclick="clickCreateTable()"/>







</body>
</html>

事件

<html>
<meta charset="utf-8"/>
<head>
<title>js网页</title>

<script type="text/javascript">

var count = 0;

// window.onload = function(){
// alert("onload事件");
// }
window.onload = clickBtn();


function testFuc(){
// alert('移动开了');
alert(count);

count = 0;
}

function moveFuc(){
count++;
}


function inputFuc(){
alert("触发");
}

var myIntervalIndex;

function clickBtn(){
// setTimeout("alert('执行')",2000);
// setTimeout("timeOutFuc()",2000);

// myIntervalIndex = setInterval("timeOutFuc()",2000);

setInterval("changeImg()",3000);


}

function timeOutFuc(){
alert("延迟执行");

clearInterval(myIntervalIndex); //停止interval
}

var imgList = ["image/logo.png","image/add.png","image/dec.png","image/test.jpg"];
var imgindex = 1;

function changeImg(){
var myImg = document.getElementById("myImg");
myImg.src = imgList[imgindex++];

if(imgindex > 3)
imgindex = 0;
}



//js提交表单
function clickFormP(){
// document.forms[0].submit();//获取表单方式1
// document.forms["myForm"].submit(); //获取表单方式2
// var myForm = document.getElementById("myForm"); //获取表单方式3
// myForm.submit();
//等等其他方法


// document.forms[0].reset();


var myText = document.getElementById("myText");
myText.focus(); //让此元素得到焦点
myText.blur(); //让此元素失去焦点
}

//提交表单触发的事件
function submitForm(){
var myText = document.getElementById("myText");

if(myText.value == "1"){
return true;
}else{
alert("验证失败！！请重新输入");
return false;
}

}

//得到焦点事件
function focusMeFuc(){
alert("我得到了焦点");
}

//失去焦点事件
function blurMeFuc(){
alert("88");
}

//文本框change事件
function changeText(){
var text = document.getElementById("myText");
var reg = /^\d+$/;//方法1
// var reg1 = new RegExp(正则表达式);//方法2

alert(reg.test(text.value));
// alert(/^\d+$/.test(text.value));
// reg1.test(text.value);

}

//点击复选框模拟点击
function clickCheckBoxChange(){
document.getElementById("myCheckBox").click();
document.getElementById("myRadioBox").click();

var radio = document.getElementById("myRadioBox");
alert(radio.defaultChecked);
}

</script>
</head>

<body>










<form id="myForm" name="myForm" action="www.baidu.com" method="post" οnsubmit="return submitForm()" οnreset="return false">


<input id="myText" type="text" value="请输入您的帐户名" οnchange="changeText()"/>
<p οnclick="clickFormP()">提交表单</p>

<input type="checkbox" id="myCheckBox"/>
<input type="radio" id="myRadioBox" checked="checked"/>
<label οnclick="clickCheckBoxChange()">让复选框点击</label>

<input type="submit"/>

</form>

</body>
</html>

jQuery

<html>

<meta charset="utf-8"/>
<head>

<style type="text/css">
.myPClass{
color: fuchsia;
font-weight: bold;
}

.newClass{
font-size: 50px;
}

</style>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>


<script type="text/javascript">


$(document).ready(function(){
// alert("READY!");
});

function clickBtn(){
// //jQuery方法
// $("#hideP").hide();
//
传统DOM方法
// var list = document.getElementsByTagName("p");
// for(){
// .style.visibility = "hidden";
// }

// $("#hideP").show(); //id选择器
// $(".myPClass").show(); //类选择器
// $("img").hide(); //元素选择器


// var m_p = document.getElementById("hideP");
// var jquery_p = $(m_p); //DOM->jQuery对象
// jquery_p.hide();


// var dom_p = jquery_p[0]; //jQuery -> DOM 方法1
// var dom_p = jquery_p.get(0); //jQuery -> DOM 方法2
// alert(dom_p.id);

var $p = $("#newP");
$p.removeAttr("class");
// alert($p.attr("class"));
// $p.attr("class","newClass");


// var obj = {class:"newClass",style:"background-color:yellow"};
// $p.attr(obj);


// $p.attr({class:"newClass",style:"background-color:yellow"});

// alert($("#myBody").html("<p style='color:yellow'>新的网页</p>"));
// alert($("#myBody").text());
// alert($("#mytext").val());
$("#mytext").val("请输入用户名");

}


//计算
function clickBtn(){
// var num1_str = $("#num1").val();
// var num2_str = $("#num2").val();
// var reg = /^\d+$/;
//
// if(reg.test(num1_str) && reg.test(num2_str)){
// $("#num3").val(Number(num1_str) + Number(num2_str));
// }else
// alert("请不要输入非数字!");

$("#num1").click(alertFuc); //这里传的方法不要加()

}

function alertFuc(){
alert("动态添加的事件");
}

function clickMe(){
$("p").hide(2000,hideOver);
$("p").show(2000);

// $("p").fadeOut(2000);
// $("p").fadeIn(2000);
}

function hideOver(){
alert("播放完成");
}

</script>

</head>

<body id="myBody">





<p οnclick="clickMe()">我是字段</p>
<p>我是字段</p>
<p>我是字段</p>
<p>我是字段</p>

</body>
</html>

自制导航栏

<html>
<meta charset="utf-8"/>

<head>
<title>自制导航栏</title>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

<style type="text/css">
*{
font-family: '微软雅黑';
font-weight: bold;
}

#box{
background-color: black;
height: 60px;
width: 800px;
margin: 0 auto;
}

#t_1{

}

.t_class{
color: darkgrey;
float: left;
height: 60px;
width: 100px;
border-right:2px solid darkgrey;
/* background-color: black*/
text-align: center;
line-height: 60px;
}

.t_bg{
position: absolute;
height: 60px;
width: 100px;
z-index: 0;
background-color:firebrick;
display: none;
}

label{
position: absolute;
z-index: 1;
margin-left: -20px;
color: #ffffff;
}

</style>

<script type="text/javascript">

function showLightBg(d_element){
var $mdiv = $(d_element);
$mdiv.children(".t_bg").fadeIn(400);
}

function hideLightBg(d_element){
var $mdiv = $(d_element);
$mdiv.children(".t_bg").fadeOut(400);
}

</script>
</head>


<body>
<div id="box">
<div id="t_1" class="t_class" οnmοuseοver="showLightBg(this)" οnmοuseοut="hideLightBg(this)">
<label>Java</label>
<div class="t_bg"></div>
</div>

<div id="t_2" class="t_class" οnmοuseοver="showLightBg(this)" οnmοuseοut="hideLightBg(this)"><div class="t_bg"></div><label>AS3</label></div>
<div id="t_3" class="t_class" οnmοuseοver="showLightBg(this)" οnmοuseοut="hideLightBg(this)"><div class="t_bg"></div><label>C++</label></div>
<div id="t_4" class="t_class" οnmοuseοver="showLightBg(this)" οnmοuseοut="hideLightBg(this)"><div class="t_bg"></div><label>cc2d</label></div>
<div id="t_5" class="t_class" οnmοuseοver="showLightBg(this)" οnmοuseοut="hideLightBg(this)"><div class="t_bg"></div><label>u3d</label></div>
<div id="t_6" class="t_class" οnmοuseοver="showLightBg(this)" οnmοuseοut="hideLightBg(this)"><div class="t_bg"></div><label>swift</label></div>
<div id="t_7" class="t_class" οnmοuseοver="showLightBg(this)" οnmοuseοut="hideLightBg(this)"><div class="t_bg"></div><label>.net</label></div>
</div>
</body>
</html>