新手学习Jquery~一点心得~

这段时间在学习jquery写网站前台，借了几本书却发现看了还是不能立马上手，一边做才稍微一点点弄懂一些地方，几天下来觉得比起翻书，还是网上查资料比较有用，之前一直没想着把学的东西记下来，不过看到网上找到的资料许多是网友们自己学习过后贴出来分享的，而且给我带来了很大帮助，所以自己也不害臊把自己学的一点皮毛贴出来~嘿嘿~

 

 

现在主要在纠结表单验证的问题，网上虽然有很多已经写好的.js文件直接引用，但还是觉得自己动手写写理解深些，不过确实麻烦好多，而且找到的都基本是用javascript写的，看起来挺累的，就一边读一边搜网上相关的，有时候发现想要搜一个问题却不知道怎么表达，很是恼火，不过慢慢就顺手起来了~下面是搜到的一点点基础的东西~不过对我已经帮助很大了的说~

 

 

 

1、jquery如何取得text,areatext,radio,checkbox,select 的值, 以及其他一些操作;假如我们有如下页面:

 < input type = " text " name = " textname " id = " text_id " value = "" >

   ...........在此不写出来了

下面来看怎么取得FORM 中的各种值等等;

function get_form_value (){

/* 获得TEXT.AREATEXT 的值*/

   var textval = $ ( " #text_id " ) . attr ( " value " ) ; // 或者

 

 

看了这个我就自己在vs上试试，结果还是不行，我写的函数里把$ ( " #text_id " )这样类似的内容换成了this，因为函数外本身就已经用了$("input").each(function() {}所以想用this引用应该就行了吧~结果老是报错，然后就搜搜this的用法，就得到了下面这篇：

 

2、jquery中this与$(this)的用法区别.先看以下代码:$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
); 
这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了，就会报错了。
以下写法是错误的： $("#textbox").hover(
function() {
$(this).title ＝ "Test";
},
function() {
$(this).title = "OK";
}
); 
这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：
正确的写法： $("#textbox").hover(
function() {
$(this).attr('title', 'Test');
},
function() {
$(this).attr('title', 'OK');
}
); 
使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。
本文来自: IT知道网(http://www.itwis.com ) 详细出处参考：http://www.itwis.com/html/programme/javascript/20090905/6083.html

 

 

所以把this.attr("value")改成$(this).attr("value");就成了~运行成功！

 

虽然只是一个小小的地方~不过有多学到一点还是很开心的~

 

   var textval = $ ( " #text_id " ) . val () ;

/* 获取单选按钮的值*/

   var valradio = $ ( " input[@type=radio][@checked] " ) . val () ;

/* 获取复选框的值*/

var checkboxval = $ ( " #checkbox_id " ) . attr ( " value " ) ；

/* 获取下拉列表中所有的值*/

   var selectval = $ ( ' #select_id ' ) . val () ;

// 获取下拉列表选取中的值, 此方法针对所有下拉框都起作用的

// 此方法针对所有下拉框都起作用的

   // 如果针对某 ID 进行获取， $(‘#id>option’).each() 即可

 

  $( 'select>option' ).each( function () {

    if ($( this ).attr( 'selected' )== true )

    {

    alert($( this ).text());

    }

  } )

}

另外对表单的其他处理:

// 控制表单元素：

// 文本框，文本区域：

$ ( " #text_id " ) . attr ( " value " , '' ) ; // 清空内容

$ ( " #text_id " ) . attr ( " value " , ' test ' ) ; // 填充内容

// 多选框checkbox ：

$ ( " #chk_id " ) . attr ( " checked " , '' ) ; // 未选中的值

$ ( " #chk_id " ) . attr ( " checked " , true ) ; // 选中的值

if ( $ ( " #chk_id " ) . attr ( ' checked ' ) == undefined ) // 判断是否已经选中

// 单选组radio ：

$ ( " input[@type=radio] " ) . attr ( " checked " , ' 10 ' ) ; // 设置value=10 的单选按钮为当前选中项

// 下拉框select ：

$ ( " #select_id " ) . attr ( " value " , ' test ' ) ; // 设置value=test 的项目为当前选中项

$ ( " <option value='test'>test</option><option value='test2'>test2</option> " ) . appendTo ( " #select_id " ) // 添加下拉框的option

$ ( " #select_id " ) . empty () ； // 清空下拉框

 

3.jQuery中get()和eq(的区别)
[ 标签：jquery,eq,区别 ] $("a").get(1)与$("a").eq()的区别是什么？
eq返回的是一个jquery对象 get返回的是一个html 对象数组
返回的是jQuery对象，就可以继续调用其他方法，返回的是html数组就不能调用jQuery的其他方法
例如：
$("ul li").get(1).css("color", "red"); //这个是错误的
$("ul li").eq(1).css("color", "red"); //这个是正确的