jquery 一点点 简单实用
字符截取显示
var text = $(“.content”).text();
var textNum = text.length;
var textInt = text.slice(0,140);
$(“.content”).each(function () {
if (textNum >= 160) {
$(this).html(textInt + “…” + “详细“)
$(“.dis_btn”).click(function () {
$(“.content”).text(text);
});
return false;
} else {
$(“.content”).each(function () {
$(this).text(text);
})
}
})
div做链接
$(“.pane-list li”).click(function(){
window.location=$(this).find(“a”).attr(“href”);return false;
});
简单的炸屏效果
$(document).ready(function(){
setTimeout(“showBanner();”,5000);
});
function showBanner(){
$(“.banner p:eq(0)”).slideUp(1000,function(){$(“.banner p:eq(1)”).slideDown(1000);});
}
单条滚动的新闻写法1
function scroll_news(){
$(function(){
$(‘#dvmq li’).eq(0).fadeOut(‘slow’,function(){
// alert($(this).clone().html());
//克隆:不用克隆的话，remove()就没了。
$(this).clone().appendTo($(this).parent()).fadeIn(‘slow’);
$(this).remove();
});
});
}
setInterval(‘scroll_news()’,1000);
单条滚动的新闻写法2
function AutoScroll(obj){
$(obj).find(“ul:first”).animate({
marginTop:”-25px”
},1000,function(){
$(this).css({marginTop:”0px”}).find(“li:first”).appendTo(this);
});
}
$(document).ready(function(){
setInterval(‘AutoScroll(“#scrollDiv”)’,3000)
});
验证QQ号码
var qq=/^[1-9]\d{4,8}$/;
var user_qq =$(“#user_qq”).val()
if(!qq.test(user_qq)){
alert(“请输入正确的QQ”);
return false;
}
验证邮编
var linkzipcode =$(“.form input[name='linkzipcode']“).val();
var zipcode=/\d{6}/
if(!zipcode.test(linkzipcode)){
alert(“请输入正确的邮编”);
return false;
}
验证手机号码
var reg0=/^13\d{9}$/;
var reg1=/^153\d{8}$/;
var reg2=/^159\d{8}$/;
var reg3=/^158\d{8}$/;
var reg4=/^150\d{8}$/;
var phone=reg0||reg1||reg2||reg3||reg4
var linkphone =$(“.form input[name='linkphone']“).val();
if(!phone.test(linkphone)){
alert(“请输入正确的手机号码”);
return false;
}
验证中文
var isChn = /^[\u4e00-\u9fa5]+$/i
var linkname =$(“.form input[name='linkname']“).val();
if(!isChn.test(linkname)){
alert(“请输入真实的联系人名称”);
return false;
}
jquery实现div等高效果
function SetSameHeight(obj1,obj2)
{
var h1 = $(obj1).outerHeight(); //获取对象1的高度
var h2 = $(obj2).outerHeight(); //获取对象2高度
var mh = Math.max( h1, h2); //比较一下
$(obj1).height(mh);
$(obj2).height(mh);
}
在页面用调用：
jQuery(document).ready(function($) {
SetSameHeight(“.left”,”.line”);
SetSameHeight(“.right_main”,”.line”);//如果有３个div 就加这一行代码，再适应一次．
}
使用jquery操作iframe
iframe id=”leftiframe”
iframe id=”mainiframe
leftiframe中jQuery改变mainiframe的src代码：
$(“#mainframe”,parent.document.body).attr(“src”,”http://www.radys.cn”)
JQuery获取浏览器窗口的高度和宽度
$(document).ready(function(){
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度包括border padding margin1
})
jQuery 离开页面时提示
//绑定beforeunload事件
$(window).bind(‘beforeunload’,function(){
return ‘您输入的内容尚未保存，确定离开此页面吗？’;
});
//解除绑定
$(window).unbind(‘beforeunload’);
图片不完全按比例自动缩小
jQuery(document).ready(function(){
$(window).load(function(){
$(‘#content img’).each(function(){
var x = 200; //填入目标图片宽度
var y = 140; //填入目标图片高度
var w=$(this).width(), h=$(this).height();//获取图片宽度、高度
if (w > x) { //图片宽度大于目标宽度时
var w_original=w, h_original=h;
h = h * (x / w); //根据目标宽度按比例算出高度
w = x; //宽度等于预定宽度
if (h < y) { //如果按比例缩小后的高度小于预定高度时
w = w_original * (y / h_original); //按目标高度重新计算宽度
h = y; //高度等于预定高度
}
}
$(this).attr({width:w,height:h});
});
});
});
jQuery得到用户IP
$.getJSON(“http://jsonip.appspot.com?callback=?”, function (data) {
alert(“Your ip: ” + data.ip);
});
jQuery查看图片的宽度和高度
var theImage = new Image();
theImage.src = $(‘#imageid’).attr(“src”);
alert(“Width: ” + theImage.width);
alert(“Height: ” + theImage.height);
jQuery控制IFRAME 父页面控制子窗口
DOM方法：
父窗口操作 IFRAME：window.frames["iframeSon"].document
IFRAME操作父窗口: window.parent.document
jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框： $(window.frames["iframeSon"].document).find(”:text”);
在IFRAME中操作 选中父窗口中的所有输入框：$(window.parent.document).find(”:text”);
iframe框架的HTML：iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”
细心的朋友一下就能理解，原理其实很简单，就是用到了$(DOM对象)转换成 jquery对象。
用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了
1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames["iframe1"].document).find(”input[@type='radio']“).attr(”checked”,”true”);
2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find(”input[@type='radio']“).attr(”checked”,”true”);
iframe框架的：
iframe src=”test.html” id=”iframe1″ width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”
IE7中测试通过
jquery判断是否滚动到最后一个
var $next = $current.next().length ? $current.next() : $(“#slideshow div:first”);
jquery仿淘宝搜索滚动固定
$(function(){
var s= $(‘#nav’).position().top;
var t=80;
$(window).scroll(function (){
if($(window).scrollTop()>215)
{
$(“#nav”).animate({top:$(window).scrollTop()-t+”px”},{queue:false,duration:400});
}else{
$(“#nav”).animate({top:$(window).scrollTop()+s+”px”},{queue:false,duration:400});
}
});
//nav必须用position:absolute;nav的父容器必须position:relative;
})
jquery修复IE position:fixed
function fixedPosition (element,top,right){
$(element).css(“display”,”block”)
if(!$.browser.msie){
$(element).css(“position”,”fixed”)
}else{
$(element).css(“position”,”absolute”)
$(“body”).css({“height”:”100%”,”overflow”:”auto”,”margin”:”0″});
$(“html”).css({“overflow-x”:”auto”,”overflow-y”:”hidden”});
}
$(element).css({“top”:top,”right”:right})
};
$(function(){
fixedPosition(test,150 ,40);
})
方法2
<!--–[if IE 6]-->
#fixed {
position: fixed;
_position: absolute;
bottom: 0;
right:0.75em;
top:20%;
}
<!--[endif]–-->
(function(){
var overlay = document.getElementById(‘fixed’),t;
window.onscroll = function() {
t && clearTimeout(t);
t = setTimeout(function() {
var t=document.documentElement.scrollTop;
t=t+156;
overlay.style.top=t+”px”;
},0);
};
})();
jquery each 遍历常用方法
下面提一下jQuery的each方法的几种常用的用法
Js代码
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4
还可以省略function的参数，这个时候this可以得到遍历的当前元素的值
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];
$.each(arr, function() { alert(this); });
js 判断浏览器是否启用cookie
$(document).ready(function () {
document.cookie = “cookieid=1; expires=60″;
var result = document.cookie.indexOf(“cookieid=”) != -1;
if (!result) {
alert(“浏览器未启用cookie”);
}
});
jQuery检测键盘按键
$(document).ready(function () {
$(this).keypress(function (e) {
switch (e.which) {
case 13:
alert(“您按下了回车键”);
break;
//more detect
}
});
});
jQuery 滚动到顶部/底部
//滚动到顶部
$(“html, body”).animate({ scrollTop: “0px” }, 1000);
//滚动到底部
//$(“#container”):要滚动的元素
$(“html, body”).animate({
scrollTop: $(“#container”).height()
}, 1000);
jQuery 判断元素是否存在
怎么使用 jQuery 判断元素是否存在，相信不少 jQuery 学习者都会问这个问题，方法很简单，如下：
if ($(” #elementid”).length) {
//元素存在
}
jQuery 禁用鼠标右键
$(document).ready(function() {
$(document).bind(“contextmenu”, function() {
return false;
});
});
向由setTimeout()调用的方法中传参
$(document).ready(function() {
timeout = setTimeout(function() {
showMess(“succeed”)
}, 2000);
});
function showMess(m) {
alert(m);
}
jQuery 倒计时
$(document).ready(function () {
var count = 10;
countdown = setInterval(function () {
$(“p.countdown”).html(count + ” 秒后将跳转！”);
if (count == 0) {
clearInterval(countdown)
window.location = ‘http://google.com’;
}
count–;
}, 1000);
});
jQuery 判断浏览器类型及版本号
jQuery 判断浏览器类型及版本号非常简单，可以直接使用 $.browser 方法进行判断。但我自己试验时发现在判断 Chrome 浏览器时，返回的是 Safari，在网上找了下，于是有了下边的代码：
var browserName = navigator.userAgent.toLowerCase();
mybrowser = {
version: (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1],
safari: /webkit/i.test(browserName) && !this.chrome,
opera: /opera/i.test(browserName),
firefox: /firefox/i.test(browserName),
msie: /msie/i.test(browserName) && !/opera/.test(browserName),
mozilla: /mozilla/i.test(browserName) && !/(compatible|webkit)/.test(browserName) && !this.chrome,
chrome: /chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)
}
$(document).ready(function () {
if (mybrowser.msie) {
alert(“浏览器为：Internet Explorer 版本号为：” + $.browser.version);
}
else if (mybrowser.mozilla) {
alert(“浏览器为：Firefox 版本号为：” + $.browser.version);
}
else if (mybrowser.opera) {
alert(“浏览器为：Opera 版本号为：” + $.browser.version);
}
else if (mybrowser.safari) {
alert(“浏览器为：Safari 版本号为：” + $.browser.version);
}
else if (mybrowser.chrome) {
alert(“浏览器为：Chrome 版本号为：” + mybrowser.version);
}
else {
alert(“神马”);
}
});
jQuery 元素居中显示
//写成了插件形式
(function ($) {
jQuery.fn.center = function () {
this.css(‘position’, ‘absolute’);
this.css(‘top’, ($(window).height() – this.height()) /2 +$(window).scrollTop() + ‘px’);
this.css(‘left’, ($(window).width() – this.width()) / 2 + $(window).scrollLeft() + ‘px’);
return this;
}
})(jQuery);
$(document).ready(function () {
//调用
$(“#somediv”).center();
});
jQuery 判断图像是否被完全加载进来
$(“#demoImg”).attr(“src”, “demo.jpg”).load(function() {
alert(“图片加载完成”);
});
jQuery仿微博字数统计功能
jq(‘#content’).bind(‘focus keyup input paste’,function(){ //采用几个事件来触发（已增加鼠标粘贴事件）
jq(‘#num’).text(140 – jq(this).attr(“value”).length) //获取评论框字符长度并添加到ID=”num”元素上
});
jQuery 实现左右两列一样高
$(function () {
var left = $(‘#left’).height();
var right = $(‘#right’).height();
left > right ? $(‘#right’).height(left) : $(‘#left’).height(right);
});
jQuery 操作 select 小结
//移除value为”2″的option
$(“#id option[value='2']“).remove();
//获取select option选中值
$(“#id”).val();
//设置value为”2″的option为当前选中
$(“#id”).val(“2″);
//获取select option选中text
$(“#id :selected”).text()
Javascript 实现字符串补”0″
join() 方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的，缺省时为逗号(“,”)。
function padZero(str, length) {
var strLen = str.length;
return length > strLen ? new Array(length – strLen + 1).join(“0″) + str : str;
}
jQuery 双击时不选中文本
//清理选中
var clearSelection = function () {
if (document.selection && document.selection.empty) {
document.selection.empty();
}
else if (window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
$(“#content”).dblclick(function(e) {
clearSelection();
});
jQuery 选中文本框值和取消选中
当光标移动到文本框上边时，将文本框的值选中，离开时取消选中，这样方便了用户修改文本框的值，提高了用户体验。或许你也有兴趣看看 jQuery设置和移除文本框默认值，当然在 HTML5 中我们可直接使用 “placeholder” 属性。
$(“input[type='text']“).hover(function () {
$(this).select();
}, function () {
$(this).val($(this).val());
});
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17