这段时间在学习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"); //这个是正确的