jQuery 取值、赋值的基本方法整理


Posted in Javascript onMarch 31, 2014

/*获得TEXT.AREATEXT的值*/
var textval = $("#text_id").attr("value");
//或者
var textval = $("#text_id").val();
/*获取单选按钮的值*/
var valradio = $("input[@type=radio][@checked]").val();
/*获取一组名为(items)的radio被选中项的值*/
var item = $('input[@name=items][@checked]').val();
/*获取复选框的值*/
var checkboxval = $("#checkbox_id").attr("value");
/*获取下拉列表的值*/
var selectval = $('#select_id').val();

//文本框,文本区域:
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');//填充内容
//多选框checkbox:
$("#chk_id").attr("checked",'');//使其未勾选
$("#chk_id").attr("checked",true);//勾选
if($("#chk_id").attr('checked')==true) //判断是否已经选中

//单选组radio:

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

//下拉框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();//清空下拉框

获取一组名为(items)的radio被选中项的值
var item = $('input[@name=items][@checked]').val();//若未被选中 则val() = undefined
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

//重置表单
$("form").each(function(){
.reset();
});

1. 选取元素
$(”#myid”)效果等于document.getElementById(”myid”), 但是写的字符要少好多啊.

如果需要将jQuery对象转换成html元素, 则只需要取其第0个元素即可. 例如$(”#myid”)返回的是jQuery对象, 而$(”#myid”)[0]返回的就是html元素

如果选择所有的img元素, 那么这么写: $(”img”)

如果选择带有class=”TextBox”的div元素(<div class=”TextBox”></div>), 那么这么写: $(”div.TextBox”)

选择带有myattr属性的元素$(”div[myattr]”)
选择带有myattr属性, 并且属性值等于myclass的元素$(”div[myattr='myclass']”)
属性不等于[myattr!='myclass']
属性以my开头[myattr^='my']
属性以class结尾[myattr$='class']
属性包含cla这三个字符[myattr*='cla']

如果一个选择会返回多个元素, 并且希望每返回一个元素, 就把某些属性应用到该元素上, 可以这么写
$(”div”).each(function()
{
$(this).css(”background-color”, “#F00″);
alert($(this).html());
$(this).width(”200px”);
});

2.事件
给页面加onload事件处理方法
$(function()
{
alert(”页面结构加载完毕, 但是可能某些图片尚未加载(一般情况下, 此事件就够用了)”);
});

可以给页面绑定多个onload事件处理方法
$(function()
{
alert(”我首先被执行”);
});

$(function()
{
alert(”我第二被执行”);
});

绑定特殊事件
$(”#myid”).keydown(function()
{
alert(”触发了keydown事件”);
});

除了这些常用的, 不常用的事件需要通过bind方法绑定

3. 元素属性/方法
得到一个元素的高度, $(”#myid”).height()
得到一个元素的位置, $(”#myid”).offset() 返回的是一个offset对象, 如果取元素位置的top, 则$(”#myid”).offset().top,?取left则$(”#myid”).offset().left
得到一个元素的innerHTML, $(”#myid”).html()
得到一个元素的innerText, $(”#myid”).text()
得到一个文本框的值, $(”#myid”).val()
得到一个元素的属性, $(”#myid”).attr(”myattribute”)

以上这些方法有个基本特征, 就是不带参数表示取值, 带有参数表示设定值(除了offset), 例如
$(”#myid”).height(”20″);
$(”#myid”).html(”<a href=”>asdasd</a>”)
$(”#myid”).val(”asdasd”)

需要注意, offset是只读的.

给一个元素设置属性 $(”#myid”).attr(”width”, “20%”)
读取一个属性 $(”#myid”).attr(”width”)
一次指定多个属性 $(”#myid”).attr({disabled: “disabled”, width:”20%”, height: “30″})
删除属性$(”#myid”).removeAttr(”disabled”)

应用样式$(”#myid”).addClass(”myclass”)
删除样式$(”#myid”).removeClass(”myclass”)

加一个样式$(”#myid”).css(”height”, “20px”)
加一组样式$(”#myid”).css({height:”20px”, width:”100px”})
需要注意的是: 如果是加一个样式, 这个样式的名字是css中的名字, 比如说style=”background-color:#FF0000″, 对应的jQuery写法是$(”#myid”).css(”background-color”, “#FF0000″)
但是加一组样式的时候, 样式的名字就是javascript中的css名字了, 比如: myid.style.backgroundColor = “#FF0000″, 对应的jQuery写法是$(”#myid”).css({backgroundColor:”#FF0000″})

4. 根据关系查找元素
找和自己同级的下一个元素$(”#myid”).next()
找和自己同级的所有位于自己之下的元素$(”#myid”).nextAll()
找和自己同级的上一个元素$(”#myid”).prev()
找和自己同级的所有位于自己之上的所有元素$(”#myid”).prevAll()
找自己的第一代子元素$(”#myid”).children()
找自己的第一个父元素$(”#myid”).parent()
找自己的所有父元素$(”#myid”).parents()
例子:
$(”div.l4″).parents().each(
function() {
alert($(this).html());
});

会把class=l4的div的所有父元素都得到, 并且alert出他们的html

例子:
$(”div.l4″).parents(”div.l2″).each(function() { alert($(this).html()); });
会得到class=l4的父元素, 该父元素必须是div, 而且其class=l2

这里说的所有方法, 都可以带表达式, 表达式的写法参考第一部分

5. 维护元素
在body中增加一个元素
$(”body”).append(”<input type='text' value='asd' />”)
该语句会把这段html插入到body结束标签之前, 结果是<input type='text' value='asd' /></body>

$(”body”).prepend(”<input type='text' value='asd' />”)
该语句会把这段html插入到body开始标签之后, 结果是<body><input type='text' value='asd' />

6.AJAX
用get方法请求一个页面
$.get(”http://www.google.com”, “q=jquery”, function(data, status){alert(data)})
表示请求http://www.google.com, 参数是q, 参数的值是jquery, 请求结束后(不管成功还是失败)执行后面的function, 该function有两个固定参数, data和status, data是返回的数据, status是本次请求的状态

用post方法请求一个页面
$.post(……..) 参数同get方法

7.其他方法
$.trim(str) 将str前后空格去掉
$.browser 返回当前用户浏览器的类型
$.browser.version返回当前浏览器的版本

8. 插件
jQuery支持插件, http://jquery.com/plugins/上面有很多现成的插件, 也可以自己写
自己写插件, 请参考http://docs.jquery.com/Core/jQ.....end#object 和http://docs.jquery.com/Core/jQuery.extend#object

1,下拉框:
var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option
稍微解释一下:
1.select[@name='country'] option[@selected] 表示具有name 属性,
并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素;
可以看出有@开头的就表示后面跟的是属性。

2,单选框:
$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

3,复选框:
$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
alert($(this).val());
});

$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

Javascript 相关文章推荐
js中更短的 Array 类型转换
Oct 30 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
vue.js表格分页示例
Oct 18 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
js改变鼠标的形状和样式的方法
Mar 31 #Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 #Javascript
js简单的表格添加行和删除行操作示例
Mar 31 #Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 #Javascript
jquery控制display属性为none或block
Mar 31 #Javascript
js原型继承的两种方法对比介绍
Mar 30 #Javascript
详解JavaScript中undefined与null的区别
Mar 29 #Javascript
You might like
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
vue element ui validate 主动触发错误提示操作
2020/09/21 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
实例讲解Python中的私有属性
2014/08/21 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python内建模块struct实例详解
2018/02/02 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python @classmethod 的使用场合详解
2019/08/23 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
绿色家庭事迹材料
2014/05/01 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
老公保证书怎么写
2015/02/26 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android