摘要:简介  Jquery是一个框架。利用CSS选择器,来操作DOM对象进行一系列操作,并且具有强大的插件机制。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

简介

  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技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1600.html