脚本宝典收集整理的这篇文章主要介绍了js实例教程-Jquery框架的使用详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
简介
jquery是一个框架。利用CSS选择器，来操作DOM对象进行一系列操作，并且具有强大的插件机制。
我觉得对于Jquery，这样的总结已经最精炼了。无需无需多讲，它的出现就是为了使我们操作对象跟方便、快捷的一个JS框架。
如何快速使用Jquery？
学习一个新知识的目的，是为了应用。如何学习并掌握一门新技术，并加以运用到我们的实际场景中去是我们最终的目的。所以，对于踏出校门后的我们，一味地啃书我觉得已经不太符合实际了，至少在这个当前知识大爆炸，信息迭代速度飞快的大环境下，它已经是不可取的了。
言归正传。要想快速掌握一门技术，第一步就是要认识它，第二步弄清怎么使用它，第三联系实际开发过程中的某些具体场景下具体问题，它给出的解决方案是什么。
第一步我们已经做了，从简介中，我们知道，它是一个框架，并且是用来让我们操作对象的js框架。在面向对象编程中，获取了对象，我们即获取了整个世界，接下来就是想干嘛就干嘛。
第二步，怎么使用它。首先我们得获得对象。
1.获取对象
根据id获取对象
$('#id')
获得input标签中name='userName'的元素对象
$("input[name='userName']")
标签选择器 选择所有的p元素
$("p")
没错，就是这么简单。基本的获取对象的方式就是如此，在实际开发中根据id获取对象是符合实际的。所以基本上，知道通过id获取对象就可以了（当然，你要想进阶的，那是不够的）。
但是，这里插一条小知识。就是，这里获取的对象是jquery对象，不是DOM对象（不知道DOM对象的自己可以取查阅一下资料）。
2.Jquery对象与Dom对象之间的转换
jquery对象是对Dom对象进行的包装，实际是一个数据对象。
(1)jquery对象转换成Dom对象
a.通过[index]方法获得对应的Dom对象
VAR $v = $('#v')
var v = $v.[0]
b.通过jquery自身的get(index)方法
var $v = $('#v')
var v = $v.get(0)
(2)Dom对象转换成jquery对象
对于已经是一个DOM对象，只需要用$()将DOM对象包装起来，就能获得jQuery对象了
获得对象之后，我们要干嘛呢？当然取值或者赋值，前台页面带给我们的作用不就是给我们看吗？不仅是给用户，同样也是给我们开发人员“看”的啊！
3.相关控件取值与赋值的方式
文本框的取值与赋值
var str = $("#txt").val()
$("#txt").val("new value")
给文本框的value属性赋值又是另外一回事：
$("#txt").attr("value","")//清空内容
$("#txt").attr("value","测试")//填充内容，即赋值
单选按钮的取值与赋值
<input name="rd" tyPE="radio" value="1">1</input>
<input name="_radio" type="radio" value="2" checked="checked">2</input>
<input type="button" value="取值" onclick="Show_redio()"/>
<script>
function Show_redio()
{
var _val = $("input[type='radio']:checked").val();
alert(_val);
}</script>
复选框的取值与赋值
<!DOCTYPE htML><html>
<head>
<tITle>jQuery 表单元素取值与赋值方法总结</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="checkbox" name="check" value="A" id="checkbox_id1">A
<input type="checkbox" name="check" value="B" id="checkbox_id2">B
<input name="check" type="checkbox" value="C" checked="checked" id="checkbox_id3"> C
<input type="button" value="点击" onclick="Show_checkbox()" />
<script>
function Show_checkbox() {
//取得多选框值
//多选框checkbox：$("#checkbox_id").attr("value");
val3 = $("#checkbox_id3").attr("value");
val2 = $("#checkbox_id2").attr("value");
val1 = $("#checkbox_id1").attr("value");
//多选框checkbox 不打勾
$("#checkbox_id3").attr("checked", '');
//多选择框checkbox打勾
$("#checkbox_id1").attr("checked", false);
$("#checkbox_id2").attr("checked", true);
if($("#checkbox_id1").attr('checked') == undefined)
alert("没有选中!");
else alert("已经选中!");
}
</script></body></html>
总结
取值：
$("")是一个jquery对象，而不是一个dom element，value是dom element的属性，jquery与之对应的是val。
val() :获得第一个匹配元素的当前值。
val(val):设置匹配元素的值。
如果需要将jquery对象转换成html元素，则只需要取其第0个元素即可，
所以，代码应该这样写：
取值：val = $("#id")[0].value;
赋值：
$("#id")[0].value = "new value"; 或者 $("#id").val("new value");
或者这样也可以：val = $("#id").attr("value");
获取一组radio被选中项的值：
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本：
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值：
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值：
$('input[@name=items]').get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox：
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio：
$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select：
$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框
知道怎么取值与赋值之后，那就已经会用jquery。至于第三步，实际上在第二步已经做了。
在实际开发中，你会碰到下拉框、文本框、单选按钮、复选框，那你得知道怎么去取值赋值吧？再比如，实际开发中，你会不会遇到要循环遍历的情况呢？那你是不是得去了解，jquery是怎么解决循环的呢？诸如此类。
简介
Jquery是一个框架。利用CSS选择器，来操作DOM对象进行一系列操作，并且具有强大的插件机制。
我觉得对于Jquery，这样的总结已经最精炼了。无需无需多讲，它的出现就是为了使我们操作对象跟方便、快捷的一个JS框架。
如何快速使用Jquery？
学习一个新知识的目的，是为了应用。如何学习并掌握一门新技术，并加以运用到我们的实际场景中去是我们最终的目的。所以，对于踏出校门后的我们，一味地啃书我觉得已经不太符合实际了，至少在这个当前知识大爆炸，信息迭代速度飞快的大环境下，它已经是不可取的了。
言归正传。要想快速掌握一门技术，第一步就是要认识它，第二步弄清怎么使用它，第三联系实际开发过程中的某些具体场景下具体问题，它给出的解决方案是什么。
第一步我们已经做了，从简介中，我们知道，它是一个框架，并且是用来让我们操作对象的js框架。在面向对象编程中，获取了对象，我们即获取了整个世界，接下来就是想干嘛就干嘛。
第二步，怎么使用它。首先我们得获得对象。
1.获取对象
根据id获取对象
$('#id')
获得input标签中name='userName'的元素对象
$("input[name='userName']")
标签选择器 选择所有的p元素
$("p")
没错，就是这么简单。基本的获取对象的方式就是如此，在实际开发中根据id获取对象是符合实际的。所以基本上，知道通过id获取对象就可以了（当然，你要想进阶的，那是不够的）。
但是，这里插一条小知识。就是，这里获取的对象是Jquery对象，不是DOM对象（不知道DOM对象的自己可以取查阅一下资料）。
2.Jquery对象与Dom对象之间的转换
jquery对象是对Dom对象进行的包装，实际是一个数据对象。
(1)jquery对象转换成Dom对象
a.通过[index]方法获得对应的Dom对象
var $v = $('#v')
var v = $v.[0]
b.通过jquery自身的get(index)方法
var $v = $('#v')
var v = $v.get(0)
(2)Dom对象转换成jquery对象
对于已经是一个DOM对象，只需要用$()将DOM对象包装起来，就能获得jQuery对象了
获得对象之后，我们要干嘛呢？当然取值或者赋值，前台页面带给我们的作用不就是给我们看吗？不仅是给用户，同样也是给我们开发人员“看”的啊！
3.相关控件取值与赋值的方式
文本框的取值与赋值
var str = $("#txt").val()
$("#txt").val("new value")
给文本框的value属性赋值又是另外一回事：
$("#txt").attr("value","")//清空内容
$("#txt").attr("value","测试")//填充内容，即赋值
单选按钮的取值与赋值
<input name="rd" type="radio" value="1">1</input>
<input name="_radio" type="radio" value="2" checked="checked">2</input>
<input type="button" value="取值" onclick="Show_redio()"/>
<script>
function Show_redio()
{
var _val = $("input[type='radio']:checked").val();
alert(_val);
}</script>
复选框的取值与赋值
<!DOCTYPE html><html>
<head>
<title>jQuery 表单元素取值与赋值方法总结</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="checkbox" name="check" value="A" id="checkbox_id1">A
<input type="checkbox" name="check" value="B" id="checkbox_id2">B
<input name="check" type="checkbox" value="C" checked="checked" id="checkbox_id3"> C
<input type="button" value="点击" onclick="Show_checkbox()" />
<script>
function Show_checkbox() {
//取得多选框值
//多选框checkbox：$("#checkbox_id").attr("value");
val3 = $("#checkbox_id3").attr("value");
val2 = $("#checkbox_id2").attr("value");
val1 = $("#checkbox_id1").attr("value");
//多选框checkbox 不打勾
$("#checkbox_id3").attr("checked", '');
//多选择框checkbox打勾
$("#checkbox_id1").attr("checked", false);
$("#checkbox_id2").attr("checked", true);
if($("#checkbox_id1").attr('checked') == undefined)
alert("没有选中!");
else alert("已经选中!");
}
</script></body></html>
总结
取值：
$("")是一个jquery对象，而不是一个dom element，value是dom element的属性，jquery与之对应的是val。
val() :获得第一个匹配元素的当前值。
val(val):设置匹配元素的值。
如果需要将jquery对象转换成html元素，则只需要取其第0个元素即可，
所以，代码应该这样写：
取值：val = $("#id")[0].value;
赋值：
$("#id")[0].value = "new value"; 或者 $("#id").val("new value");
或者这样也可以：val = $("#id").attr("value");
获取一组radio被选中项的值：
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本：
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值：
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值：
$('input[@name=items]').get(1).checked = true;
获取值：
文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容
多选框checkbox：
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio：
$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select：
$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框
知道怎么取值与赋值之后，那就已经会用jquery。至于第三步，实际上在第二步已经做了。
在实际开发中，你会碰到下拉框、文本框、单选按钮、复选框，那你得知道怎么去取值赋值吧？再比如，实际开发中，你会不会遇到要循环遍历的情况呢？那你是不是得去了解，jquery是怎么解决循环的呢？诸如此类。
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-Jquery框架的使用详解全部内容，希望文章能够帮你解决js实例教程-Jquery框架的使用详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。