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

Jquery的一些总结

 
阅读更多

1、文本框:$(":text[name='userName']")

     a)、如果text域只有一个, 刚返回jquery dom, 取值$(":text[name='userName']").val();

 

     b)、如果有两个名称为userName时, 则返回是dom结点的数组,取数组第一个元素的值:$(":text[name='userName']")[0].value;而不能用$(":text[name='userName']")[0].val();

 

     c)、如果有两个名称为userName, $(":text[name='userName']").val(); //取第一个元素的值

 

     d)、$(":text[name='userName']:first").val(); //取第一个元素值

 

2、单选按钮:$(":radio[name='sex']:checked")  //取得选中的单选按钮

 

3、复选框:$(":checkbox[name='favorite']:checked") //取得选中的复选框

 

4、下拉框:$("select[name='education']").val()  //取得选中的下拉框的值

 

设置 取结点的值

5、dom.html(); //取结点的html

     dom.html("html内容"); //设置结点的html

 

6、dom.append("html内容"); //在某个结点添加html

 

7、按照样式选取结点

    $(".class")

    $(". class  ul")   //选取引用class样式结点的下的ul元素的结点

 

 8、jQuery.getScript(url,success(response,status)):通过 AJAX 请求来获得并运行一个 JavaScript 文件,

      参考:http://www.w3school.com.cn/jquery/ajax_getscript.asp

 

9、操作css样式

      $("p").css("color","red");

       $(".sign").css("display", "none");
       $(".signed").css("display", "");

 10、样式添加、修改

http://www.w3school.com.cn/jquery/jquery_css_classes.asp

 

11、取某元素的样式、设置某元素的样式

$('#myid').attr('class')这是取得元素的class
$('#otherid').attr('class',$('#myid').attr('class'));

 

11、jquery的ready方法中使用全局:window.xxx='全局变量';

100、有一单选按钮控制图层显示

 $("#divHidden81").toggle(ture) //根据toggle( switch ), switch:true/false, 显示或隐藏元素,这里可以是div,也可以是其他标签,如:<p tyle="display: none">Hello</p><p style="display: block">Hello Again</p>

<div id="divHidden6" style="display: none; border: 1px solid rgb(201, 254, 247); background: none repeat scroll 0% 0% rgb(232, 255, 250); padding: 10px; margin-top: 10px;">
	<strong>1、降薪的比例为?(填空):</strong>
		<input type="text" class="name" name="QA80">%<br>
	<strong>2、降薪主要针对的群体是?(可多选)</strong>
			<div class="main11">
				<p>
				  <input type="checkbox" value="1" name="QA81">业务线员工&nbsp;&nbsp;
				  <input type="checkbox" value="2" name="QA82">非业务线员工&nbsp;&nbsp;
				</p>
			</div>
</div>

 

 

js代码:

<script type="text/javascript">
function showDate(){
	alert($(":text[name='userName']").val());
	alert($(":radio[name='sex']:checked"));
	alert("checkbox:"+$(":checkbox[name='favorite']:checked").val());
	alert("select"+$("select[name='education']").val());
}

$(document).ready(function(){
	$(":radio[name=showRadioButton]").click(function(){
		$("#divHidden6").toggle(this.value=="1");
	})
})
</script>

 

 12、$.trim("dddddd")

 

13、$(selector).focus()

 

14、判断jquery取的元素是否存在,if($("#userName").length>0){alert("元素存在");}

 

15、jquery判断checkbox是否选中、改变checkbox状态

jquery判断checked的三种方法:
.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'): //16+:true/false
.is(':checked'):    //所有版本:true/false//别忘记冒号哦
jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});
//记得还有这种哦:$("#cb1″).prop("checked","checked");

 

分享到:
评论

相关推荐

    jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

    6. **总结** jQuery降低了JavaScript开发的复杂度,提高了开发效率,尤其在DOM操作、事件处理和Ajax交互方面表现突出。无论是初学者还是经验丰富的开发者,jQuery都能作为一个强大的工具,提升开发体验和项目质量。...

    jquery总结学习资料JQuery总结

    **jQuery 总结** 在实际开发中,jQuery 可以极大地提高工作效率,减少代码量,使得动态交互和界面美化变得更加简单。然而,随着 ES6 和现代前端框架的崛起,如 React 和 Vue,jQuery 在某些场景下可能不再是首选。...

    JQuery学习总结及实例中文WORD版

    资源名称:JQuery 学习总结及实例 中文WORD版内容简介:普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript 的封装库,...

    JQuery个人总结(很全面)

    目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果

    jquery技巧总结(转)

    这篇总结将探讨一些实用的 jQuery 技巧,帮助开发者提高效率和代码质量。 1. **选择器的高效使用** - `$(selector)`:基本的选择器,可以是ID、类、标签名等。 - `$(document).ready()`:确保DOM加载完成后执行...

    jQuery技巧总结.pdf

    ### jQuery技巧总结 #### 一、简介 ##### 1.1 概述 随着WEB2.0技术的兴起和AJAX思想的普及,各种优秀的JavaScript框架应运而生,其中包括Prototype、YUI、jQuery、MooTools、Bindows以及国内的JSVM框架等。这些...

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    jQuery 技巧总结

    jQuery 技巧总结,是经验的系统总结,对新手很有帮助,如果你是老手就不要下了,句句实话。jQuery 技巧总结,是经验的系统总结,对新手很有帮助,如果你是老手就不要下了,句句实话。jQuery 技巧总结,是经验的系统总结...

    jquery技巧总结

    **jQuery技巧总结** jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心技巧,帮助开发者更高效地利用这一强大的工具。 ###...

    Jquery全集 Jquery总结

    **jQuery 全集:深入理解与实践** jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 JavaScript 的 DOM 操作、事件处理、动画制作以及 AJAX 交互。本资料旨在全面覆盖 jQuery 的核心概念和实用技巧,通过...

    jQuery选择器总结

    jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。

    jquery经验总结

    《jQuery经验总结——深入浅出JavaScript库的精髓》 jQuery,作为一款强大的JavaScript库,自2006年诞生以来,便以其简洁易用的API和高效的操作DOM能力深受开发者喜爱。本文将从核心概念、选择器、DOM操作、事件...

    jquery语法总结和注意事项

    jquery语法总结和注意事项

    JQuery入门,JQuery总结

    **jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...

    jquery总结 Js总结 PHP与jquery

    **jQuery 知识总结** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了 JavaScript 的DOM操作、事件处理、动画制作以及Ajax交互。jQuery 的核心特性可以概括为:选择器、DOM操作、事件处理、...

    JavaScript 与 JQuery 的方法总结

    JavaScript 与 JQuery 的方法总结

Global site tag (gtag.js) - Google Analytics