`
高军威
  • 浏览: 181023 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 库与原生javascript 常用方法

阅读更多
jquery:http://www.w3school.com.cn/jquery/
$(":button").attr("disabled","disabled");//设置所有的button不可用  
$(":button").removeAttr("disabled");//去掉button的disabled属性,使button可用  
$("#all_big").removeClass("all_big");
$("#all_big").addClass("all_big");
$("#divQQbox").hide();
$("#divQQbox").show();
$("#show_img").hide(1000, "");
$("#img_pos").html(content);
$(document).ready(function() {});
$("#content").append("<p>姚明退役了...</p>"); //追加文本信息
val2 = $.trim(val2+val);//去除首尾空格
var barcode = obj.value.replace(/\s+/g,"")//除去文本中所有的空格
var data = $("form").serialize();//将页面表单序列化成一个JSON结构的对象。注意不是
JSON字符串。用于表单异步提交

获取浏览器显示区域的高度 : $(window).height(); 
获取浏览器显示区域的宽度 :$(window).width(); 
获取页面的文档高度 :$(document).height(); 
获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop(); 
获取滚动条到左边的垂直宽度 :$(document).scrollLeft(); 

$(obj).focus();//获得焦点
// 监听键盘事件
$("#zfmm_input").keydown(function(event){
	if(event.keyCode==13){
		setjymm(flag_str);
	}
});

$('#agree').is(':checked')//用于判断 单选框or复选框是否选中



$.trim(sString);
jQuery.trim( str )
str	String类型需要去除两端空白字符的字符串。
如果参数str不是字符串类型,该函数将自动将其转为字符串(一般调用其toString()方法)。如果参数str为null或undefined,则返回空字符串("")。
返回值:
jQuery.trim()函数的返回值为String类型,返回去除两端空白字符串后的字符串。



1.1 remove()与 empty()的区别
empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。
remove([expr])则是把其从dom中删除,而不会保留其所占的位置。

1.2 remove()与 empty()的区别
parseInt(变量): 转为整数,不考虑小数位;
parseFloat(变量):转为带精度的数字;

注意:没有parseDouble(变量)这种类型转换

1.3 jquery全选,全不选问题。第一次好用,第二次失效不知为何?
$(this).attr('checked',false);
//改为
$(this).prop('checked',false);
$(this).prop('checked',true);
/*
• 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。 
• 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
*/

jquery中attr和prop的区别分析:http://www.jb51.net/article/62308.htm

jquery 元素控制(追加元素/追加内容)介绍及应用
http://www.jb51.net/article/35845.htm
jQuery中的toggle方法
http://www.2cto.com/kf/201202/119458.html

jquery ajax请求同步设置
var result = false;
			// 设置同步
			$.ajaxSetup({
				async: false
			});
			var param = {
				xu_email: values
			};
			$.post("./web/checkLoginid.do", param, function(data){
				result = (1 == data);
			});
			// 恢复异步
			$.ajaxSetup({
				async: true
			});
			if (result) {
				$("#" + err_id).html("");
			}



jquery ajax模板

$.ajax({
			url: "test.do",
			type: "post",
			data: param,//最好使用json对象
			dataType:'json',
			success: function(data){
			     /*var obj = jQuery.parseJSON(msg); 将json字符串转换成json对象*/
			}
		});



js:
document.getElementById("tr1") //得到元素对象
Object.innerHTML //得到某元素的文本内容
Object.innerHTML=HTML //给元素赋值
Object.getAttribute("属性名") //得到元素的属性值
Object.setAttribute(name,value)//给元素的属性赋值
document.getElementById("result").value="100";//给input赋值


JS 数据类型转换
http://www.cnblogs.com/446557021/archive/2011/10/13/2211043.html

js如何获取兄弟、父类等节点

var chils= s.childNodes; //得到s的全部子节点 

var par=s.parentNode; //得到s的父节点 

var ns=s.nextSbiling; //获得s的下一个兄弟节点 

var ps=s.previousSbiling; //得到s的上一个兄弟节点 

var fc=s.firstChild; //获得s的第一个子节点 

var lc=s.lastChile; //获得s的最后一个子节点 

javascript:document.getElementById('元素id').scrollIntoView(true);//页面内跳转到锚点


JS打开新窗口的2种方式,需要的朋友可以参考一下
1.超链接<a href="http://www.jb51.net" title="脚本之家">Welcome</a>
等效于js代码
window.location.href="http://www.jb51.net";     //在同当前窗口中打开窗口
 
2.超链接<a href="http://www.jb51.net" title="脚本之家" target="_blank">Welcome</a>
等效于js代码
window.open("http://www.jb51.net");                 //在另外新建窗口中打开窗口


js数组循环IE内核与其他内核浏览器实现区别
第一种几乎所有浏览器都支持(包括IE)
for(var b=0;b<categ_list.length;b++)
{
	var e=categ_list[b];
	if(e.categ_id==categ.categ_id){flag=false;}
}

第二种几乎所有浏览器都支持(IE不支持)
categ_list.forEach(function(e){ 
	if(e.categ_id==categ.categ_id){flag=false;}
});


$("input").attr("disabled",true) 按钮不可用               
$("input").attr("disabled",false)按钮可用

结合对checkbox的判断代码如下

if($("#ipt_checked").attr("checked")==true){   //当用户同意"协议"的时候,可以提交  
$("input").attr("disabled",false);    //提交按钮可用  
}else{  
$("input").attr("disabled",true); //提交按钮不可用  
}



jquery.cookie用法详细解析:
参考地址:http://www.jb51.net/article/44557.htm
//原生js实现
function SetCookie(usern,psw){ 
		var Then = new Date();  
		Then.setTime(Then.getTime() + 1866240000000);  
		document.cookie ="username=" + usern + "%%"+psw+";expires="+ Then.toGMTString() ; 
		} 
		function GetCookie(){  
		var nmpsd; 
		var nm; 
		var psd; 
		var cookieString = new String(document.cookie);
		var cookieHeader = "username=" ;
		var beginPosition = cookieString.indexOf(cookieHeader);
		cookieString = cookieString.substring(beginPosition); 
		var ends=cookieString.indexOf(";"); 
		if (ends!=-1){ 
		   cookieString = cookieString.substring(0,ends); 
		} 
		if (beginPosition>-1){ 
		   nmpsd = cookieString.substring(cookieHeader.length); 
		   if (nmpsd!=""){ 
		    beginPosition = nmpsd.indexOf("%%"); 
		    nm=nmpsd.substring(0,beginPosition); 
		    psd=nmpsd.substring(beginPosition+2); 
		    document.getElementById('username').value=nm; 
		    document.getElementById('password').value=psd; 
		    if(nm!="" && psd!=""){ 
		     document.getElementById('remembering').checked = true; 
		    } 
		   }  
		} 
		}

  window.onload = function(e) {
	GetCookie();
  }

//jquery 实现
function saveCookie() {
			if ($("#saveid").attr("checked")) {
				$.cookie('loginname', $("#loginname").val(), {
					expires : 7
				});
				$.cookie('password', $("#password").val(), {
					expires : 7
				});
			}
		}

jQuery(function() {
			var loginname = $.cookie('loginname');
			var password = $.cookie('password');
			if (typeof(loginname) != "undefined"
					&& typeof(password) != "undefined") {
				$("#loginname").val(loginname);
				$("#password").val(password);
				$("#saveid").attr("checked", true);
				$("#code").focus();
			}
		});


javascript除法如何取整  
Math.round(x) 四舍五入,如Math.round(0.60),结果为1;Math.round(0.49),结果为0;  
Math.floor(x) 向下舍入,如Math.floor(0.60)与Math.floor(0.49),结果均为0;  
Math.ceil(x)向上舍入,如Math.ceil(0.60)与Math.ceil(0. 49),结果均为1。 
分享到:
评论

相关推荐

    jquery和javascript的区别(常用方法比较)

    `jQuery` 是对 `JavaScript` 的一个轻量级的库,它通过封装 `JavaScript` 的一些常见操作,使得代码更加简洁、易读。下面将详细介绍两者在常用方法上的差异。 首先,我们来看 `DOM` 加载的区别。在 `JavaScript` 中...

    常用的几个jquery版本文件

    4. jQuery与原生JavaScript的对比: - jQuery简化了DOM操作,比如`$("#id").click(function() {...})` 相比原生的 `document.getElementById("id").addEventListener("click", function() {...})` 更简洁。 - ...

    javascript 原生Dom对象和jQuery对象的联系和区别

    随着现代浏览器对ES6和新API的支持增强,原生JavaScript的许多功能已经变得和jQuery一样方便,比如`querySelectorAll`和`addEventListener`,这也使得部分开发者转向使用更轻量级的库或直接使用原生JavaScript。...

    演员选择框三级联动(原生javascript和jquery实现)

    这个功能通常由原生JavaScript和jQuery库共同实现,以提供高效且用户体验良好的界面效果。 首先,我们要理解什么是“三级联动”。它指的是在一个选择框中,当用户选择某一选项时,下一个关联的选择框会根据前一个...

    jquery经典示例,jquery与javascript对比

    这个压缩包文件中的内容很可能是关于jQuery的一些经典示例,以及将jQuery与原生JavaScript进行对比的讲解。让我们深入探讨一下jQuery和JavaScript之间的差异,以及jQuery的一些核心特点和经典应用。 首先,jQuery的...

    原生js实现jquery函数animate()动画效果的简单实例

    本文将介绍如何使用原生JavaScript实现类似jQuery中的animate()方法的动画效果。在前端开发中,jQuery提供了一套非常方便的API来实现动画效果,但随着Web标准的发展和性能优化需求的提高,原生JavaScript的方法逐渐...

    JavaScript+jQuery交互式Web前端开发-源代码.zip

    jQuery 是一个 JavaScript 库,它简化了 JavaScript 的使用,提供了一套丰富的API来处理常见的网页操作,如选择DOM元素、事件处理、动画效果等。jQuery 的出现极大地降低了前端开发的门槛,使得开发者可以更快速、更...

    jQuery与JavaScript节点创建方法的对比.docx

    总的来说,jQuery 的节点创建方法适合快速开发和简化代码,而 JavaScript 的原生方法在性能上有优势,适用于对效率有较高要求的场景。在实际开发中,开发者可以根据项目需求和团队习惯选择合适的方法。 此外,了解...

    jQuery和JavaScript使用小案例

    例如,使用原生JavaScript获取元素: ```javascript var element = document.getElementById("elementId"); ``` 并添加事件监听器: ```javascript document.querySelector(".button").addEventListener("click", ...

    Jquery作者John Resig自己封装的javascript 常用函数

    他的自定义库可能包含了简化DOM操作的函数,如`getElementById()`、`getElementsByClassName()`等,这些函数可能比原生JavaScript更高效、更简洁。 5. **事件处理** 除了DOM操作,Resig的库可能也提供了事件处理的...

    详解用原生JavaScript实现jQuery的某些简单功能

    通过这种方式,我们可以逐步构建一个与jQuery类似但基于原生JavaScript的库,这不仅可以提高我们的编程技能,还可以在不需要引入额外库的情况下,实现轻量级的DOM操作和事件处理。同时,这种实践也有助于理解jQuery...

    jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端

    10. **最佳实践**:学习如何有效地组织jQuery代码,避免全局变量污染,以及何时使用jQuery与原生JavaScript相结合以提高性能,都是成为jQuery专家的必经之路。 通过阅读《jQuery经典入门教程(绝对详细).pdf》,你...

    JQUERY.zip是JavaScript的一个小的库的内容

    这比原生JavaScript的DOM操作更为简便。 2. **事件处理**:jQuery简化了事件绑定和处理,可以方便地为一个或多个元素绑定多种事件,并提供统一的事件触发和阻止冒泡机制。 3. **动画效果**:jQuery的`.animate()`...

    JQuery库文件

    - **过度依赖**:过度依赖jQuery可能导致开发者对原生JavaScript的掌握不足。 - **社区活跃度**:随着现代前端框架的崛起,jQuery的社区活跃度相比以前有所下降。 ## 结合实际应用 在实际项目中,jQuery常用于页面...

    深入理解jquery和javascript系列

    3. **事件处理**:jQuery的事件绑定和触发比原生JavaScript更简洁,如`.click()`, `.hover()`, `.on()`等。 4. **动画效果**:`.fadeIn()`, `.slideToggle()`, `.animate()`等方法让创建复杂的动画效果变得简单。 ...

    JavaScript与JQuery实现全选例子

    无论是使用原生JavaScript还是jQuery来实现全选功能,关键是理解其中的核心逻辑——即如何根据全选按钮的状态来更新所有复选框的状态,以及如何根据所有复选框的状态来更新全选按钮的状态。此外,根据项目的实际需求...

    jQuery-API.rar_javascript_jquery_jquery api

    **jQuery API - JavaScript与jQuery的世界** 在Web开发领域,JavaScript是一种不可或缺的脚本语言,而jQuery库则是JavaScript的一个强大工具,极大地简化了DOM操作、事件处理、动画制作和Ajax交互等任务。本教程将...

    jquery 库 javascript

    4. **与ES6/7的兼容**: 虽然现代浏览器对原生JavaScript支持越来越好,但jQuery仍能在旧浏览器中提供良好的兼容性,并与新的语法特性如Promise、箭头函数等良好共存。 总的来说,jQuery以其高效、简洁的API,极大地...

    javascript与jquery技术应用ppt及帮助文档

    例如,使用jQuery选择器选取元素比原生JavaScript更加简便,而动画函数则使得创建复杂的过渡效果变得轻松。 本资源包中的"jquery.api.1.11.3.CHM"是一个jQuery的帮助文档,其中包含了关于版本1.11.3的详细API参考,...

Global site tag (gtag.js) - Google Analytics