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

js与jquery知识点总结(1)

2017-10-06 16:22 555 查看

js window.location.href=’url’的用法及arguments.callee的使用，详情请看我的arguments.callee这一博客

<div id="demo"></div>
<script>
var demo = document.getElementById('demo')
var count = 5
var speed = 1000
setTimeout(function () {
count--
demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>"
if (count <= 0) {
window.location.href = 'http://www.baidu.com'
} else {
setTimeout(arguments.callee, speed)
}
},speed)
</script>

js new Date的基本使用

<body>
<h1 id="aa"></h1>
<script>
window.onload=function () {
var h1 = document.getElementById('aa')
setInterval(function () {
var date = new Date()
var y= date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
var str = y + '年' + m + '月' + d + '日' + h + '时' + i + '分' + s + '秒';
h1.innerHTML = str;
},1000)
}
</script>

发送短信倒计时的写法最核心的是this.disabled = true

<input type="text">
<button id="btn">点击发送短信</button>
<script>
var btn =document.getElementById('btn')
var count = 60
var timer = null
btn.onclick = function () {
clearInterval(timer)
this.disabled = true
var that = this
timer = setInterval(function () {
count--
if(count>0) {
that.innerHTML = '还剩余' + count + '秒'
} else {
that.innerHTML = '重新发送短信'
that.disabled = false
clearInterval(timer)
count = 60
}
}, 1000)
}
</script>

js字符串大写转化

<h1 id="big">这是大写</h1>
<h1 id="small">这是小写</h1>
<input type="text" id="txt">
<button id="btn">按钮</button>
<script>
function $(id) {return document.getElementById(id)}
$('btn').onclick=function () {
$('big').innerHTML = $('txt').value.toUpperCase()
$('small').innerHTML = $('txt').value.toLowerCase()
}
</script>

上传文件时提示格式是否正确的写法

<input type="file" name="" id="file"><span></span>
<script>
var file = document.getElementById('file')
file.onchange = function () {
var path= this.value
var pathname = path.substr(path.lastIndexOf('.')).toUpperCase()
//lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
//substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
// toUpperCase()是将字符转化为大写
if (pathname == '.JPG' || pathname == '.PNG') {
this.nextSibling.innerHTML = '格式正确'
} else {
this.nextSibling.innerHTML = '格式是错误的'
// nextSibling属性返回指定节点之后紧跟的节点，在相同的树层级中
}
}
</script>

jquery的排他思想 siblings()

<script src="jquery-1.11.3.js"></script>
<script>
$(function () {
$('img').click(function () {
$(this).css('border','5px solid red').siblings().css('border','0px solid')
})
})
</script>
</head>
<body>
<img src="images/19/1.jpg" alt="">
<img src="images/19/2.jpg" alt="">
<img src="images/19/3.jpg" alt="">
<img src="images/19/4.jpg" alt="">
<img src="images/19/5.jpg" alt="">

选中元素的索引值 $(this).index()

$(function(){
$("li").click(function () {
console.log($(this).index());
});
});

hide()的使用，括号里面写的是消失所需要的事件，例如

$(function () {
$('.ad span').click(function () {
$(this).parent().hide(1000)
})
})
</script>
</head>
<body>
<div class="ad left_ad">
<a href=""><img src="images/18/left.jpg" alt=""></a>
<span>X</span>
</div>
<div class="ad right_ad">
<a href=""><img src="images/18/right.jpg" alt=""></a>
<span>X</span>

jquery修改style的样式 (′img′).css(width:′200px′,height:′200px′,border:′1pxsolidred′)与标签自带属性的区别(‘a’).attr(‘href’,’http://www.taobao.com‘)

$(function () {
$('#btn').click(function () {
$('body').css({backgroundColor:'pink'})
$('img').css({width:'200px',height:'200px',border:'1px solid red'})
$('a').attr('href','http://www.taobao.com')
})
$('#btn2').click(function () {
alert($('a').attr('href'))
})
})
</script>
</head>
<body>
<button id="btn">修改</button>
<button id="btn2">访问</button>
<div>
<img src="./images/1.jpg" alt="">
<a href="http://www.baidu.com">haha</a>
</div>

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

标签： jquery javascript

相关文章推荐

新的分享

章节导航