$(function(){
//当页面(框架)加载完成之后,默认执行该函数;
$('#return_top').click(function(){
$(window).scrollTop(0); //回到顶部
})
//换了一种绑定事件的方式;
})
$(window).scroll(function(){
//console.log(123); //滚动一次滑轮,这里边的函数执行一次;
var height = $(window).scrollTop();//取得滚动条距顶部的高度;
console.log(height);
if(height > 0){
//显示返回顶部
$('#return_top').removeClass('hide');
}else{
$('#return_top').addClass('hide');
//隐藏返回顶部
}
});
/*
function Go(){
$(window).scrollTop(0);
}
*/
运行结果
随着滚动条的下拉，会出现一个返回顶部的按钮，按一下，返回顶部，按钮随之消失。
4、文本操作
(1)、追加
$('p').append('hello'); //在所有的p标签的内容后面加上hello完整代码如下：
页面一
I would like to say:
$(function(){
$('#addId1, #addId2').click(function(){
//获取当前点击的标签;
var curId = $(this).attr('id');
if(curId == 'addId1'){
//$('p').append('alex ');
//$('p').text('I would like to say: alex');
$('p span').text('alex');
}else if(curId == 'addId2'){
//$('p').append('oldboy ');
//$('p').text('I would like to say: oldboy');
$('p span').text('oldboy');
}else{
}
//$('p').append('alex');
});
})
上面的$(this)：表示你点击的当前的那个标签。
5、搜索框的Jquery实现
代码如下：
页面一
$(function(){
//链式表示：$('this').focus(function(){}.blur(function(){}).click(function(){})
$('#tip').focus(function(){
//$('#tip') $(this)
var id = $(this);
id.addClass('black');
if(id.val() == '请输入关键字' || id.val().trim() == ''){
id.val('') ;
}
})
$('#tip').blur(function(){
var id = $(this);
var val = id.val();
if(val.length == 0 || id.val().trim() == ''){
id.val('请输入关键字');
id.attr('class', 'gray'); //修改其属性为灰色
}else{
id.attr('class', 'black'); //修改其属性为黑色
}
})
})
6、Jquery实现全选和反选的案例
代码如下：
页面一
篮球
足球
羽毛球
$(function(){
$('#selectAll').click(function(){
$('#checklist :checkbox').attr('checked', true);
})
$('#unselectAll').click(function(){
$('#checklist :checkbox').attr('checked', false);
})
$('#reverseAll').click(function(){
$('#checklist :checkbox').each(function(){
var curStatus = $(this).attr('checked');
$(this).attr('checked', !curStatus);
})
})
})
运行结果
Jquery还有好多其他常见的方法，只有掌握一些常用的，其他的用到时在快速查找，掌握使用即可!!!
当前标题：Jquery编程基础
网页网址：http://bzwzjz.com/article/joeggp.html
