jQuery实现获取table表格第一列值的方法
jquery】常用的jquery获取表单对象的属性与值
jquery】常⽤的jquery获取表单对象的属性与值1【jquery】常⽤的jquery获取表单对象的属性与值234 1、JQuery的概念56789 JQuery是⼀个JavaScript的类库，这个类库集合了很多功能⽅法，利⽤类库你可以⽤⼀些简单的代码实现⼀些复杂的JS效果。
101112 2、JQuery实现了代码的分离1314不⽤再⽹页中加⼊如：onclick之类的事件来调⽤函数了，直接引⼊JQuery类库和⾃⼰编写的JQuery代码就可以了；15如：16 $(function(){17 $("Element").click{function(){18 alert("点击我哦！");19 }20 }21 })；22上⾯的代码中只要定义了Element 这个元素后⾯的click是动作2324 alert("点击我哦！");这个是要执⾏的代码，当然你可以有很多的操作在这个函数中；25这⾥⾯的$这个号代表JQuery的意思，就是引⽤类库。
2627 3、JQuery的核⼼的⼀些⽅法28 each(callback) '就像循环29 $("Element").length; ‘元素的个数，是个属性30 $("Element").size(); ’也是元素的个数，不过带括号是个⽅法31 $("Element").get(); ‘某个元素在页⾯中的集合，以数组的形式存储32 $("Element").get(index); ’功能和上⾯的相同，index表⽰第⼏个元素，数组的下标33 $("Element").get().reverse(); ‘把得到的数组⽅向34 ("Element1").index(("Element1").index(("Element2")); ’元素2在元素1中的索引值是。
bootstraptable教程+x-editable
bootstraptable教程+x-editableBootstrap-table快速⼊门---- bootstrap-table是⼀个基于Bootstrap的jQuery插件可以实现从数据库中提取数据到前端进⾏相应操作的功能更加优秀的页⾯展现请到Table of contentsquick-start对本⽂有什么疑问或者建议,可以在下⽅的评论区说明,笔者会尽能⼒给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过⼀段时间更新,还有侧边栏的动态⽣成(bootstrap-treeview)也是在学习当中快速使⽤:Clone the repo: git clone https:///seltonGitHub/helloBootTable.git没有配置java环境,移步;没有配置tomcat环境,移步;没有下载配置idea环境,移步;why-use学习成本低,配置简单,⽂档齐全与Bootstrap⽆缝衔接,整体风格⼀致,也便于⼆次开发开发者活跃,Github定期维护whats-includedfile list:bootstrapDemo/├── web/│├── js│├── WEB-INF│└── bootindex.html└── src/│└── DataSendServlet.java表单展⽰页⾯ (bootindex.html)javascript⽂件 (showOrder.js)从服务器取得数据,然后渲染表格details$("#table").bootstrapTable({method: "post",url: "获取后台数据的url",... ...});这⾥的js语句的所有渲染操作是针对html页⾯中的id为table的⼀个table,所以不要忘了在导⼊了该js的html中构建出id为table的tablebootstrap-table中的重要键值的简单解释:showorder.js会向服务器发起ajax访问bootstrapTable构建元素解析:url$("#table").bootstrapTable({method: "post",url: "获取后台数据的url",... ...});ajax访问到的后台路径(必须),该后台需要按照指定的格式返回数据methodget发送的数据在请求报⽂的请求⾏,也就是url部分,⽽且参数如果有中⽂会出现乱码问题,⽽post发送的数据在报⽂实体,都应该是post,表单的提交也⼀般都是postqueryParams不需要任何修改,相当于ajax中的data键,上⾯的method决定这些参数传递给后台的的传递⽅式.发送给后台的数据,给出实现表单分页的两个参数,和,在oTableInit.queryParams中给出,后台⽤request.getParameter()的⽅式拿到queryParams中传递过来的值,然后制定daopageSize当前table⼀次最多显⽰多少⾏,也就是你的table的⼀页应该展现多少⾏,必须pageNumber起始页,⼀般是1不⽤改,这个和pageSize决定了queryParams中的offset的值,offset=(pageNow - 1) * pageSize,limit=pageSizecontentTypecontentType: "application/x-www-form-urlencoded"columns$("#table").bootstrapTable({method: "post",url: "获取后台数据的url",data: [{field: 'testId', title: 'ID'},{field: 'testName', title: '姓名'},{field: 'testPassword', title: '密码'}]... ...]});你的table的表结构,以上例⼦表⽰表有三列,列的实际显⽰名字分别是ID,姓名,密码,但是field代表实际数据的名字,表中的数据是由于ajax向服务器发起访问,服务器返回给的数据中的rows的每⼀个json对象的键都会对应到field的列中-----jsonstyle{"total":25,"rows":[{"testID":1,"testName":"xiaoming1","testPassword":"xiaomingpwd1"},{"testID":2,"testName":"xiaoming2","testPassword":"xiaomingpwd2"}]}数据库返还给发起访问的ajax的数据,必须满⾜,包含两个json形式的键值对,⼀个是total键,值为表单拥有者在数据库中的全部数据的数量(⾏数),这个数据和pageSize决定table展⽰的页⾯有多少页,另⼀个是rows键,值为多个json对象,rows的每⼀个json对象就是当前table页的⼀⾏实体展⽰,这⾥的rows相当于会给前端table两⾏数据,testID,testName,testPassword分别会被填⼊到table中的field对应的列中-----offsetoTableInit.queryParams = function (params) {var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的limit: params.limit, //params.limit, 页⾯⼤⼩offset: params.offset,testNum: 445,testNum1: 343};offset=( - 1) * ,是会被发送到后台使⽤的数据,limitoTableInit.queryParams = function (params) {var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的limit: params.limit, //params.limit, 页⾯⼤⼩offset: params.offset,testNum: 445,testNum1: 343};limit=,是会被发送到后台使⽤的数据,sql⽰例SELECT * FROM test WHERE id = ? LIMIT offset,limit表格绑定事件⽤于测试ajax返回的数据是最好的$("#table").bootstrapTable({method: "post",url: "获取后台数据的url",onLoadSuccess: function(){ //加载成功时执⾏("加载成功");},onLoadError: function(){ //加载失败时执⾏("加载数据失败");}});关于事件,更为详细的介绍请访问editable这是在操作table吗,感觉就像是数据库展现在了页⾯上如果你已经阅读完或者已经在⾃⼰代码中实现了上述功能,但是table存在的⽬的本来就不应该只是展现,应该还有寻常的CRUD,精⼒有限,只是实践了update,笔者使⽤的是⾏内编辑的⽅式实现的update,需要⽤到另⼀个⼯具X-editable,不过还好boottable有这样的插件,将x-editable封装整合到了当中,只需要引⼊https:///bootstrap-table/1.12.1/extensions/editable/bootstrap-table-editable.min.jsstart editable$("#table").bootstrapTable({method: "post",url: "获取后台数据的url",[{field: 'testId',title: 'ID',editable: {mode: 'popup'}},{field: 'testName',title: '姓名'},{field: 'testPassword',title: '密码'}]... ...]});onEditableSave: function (field, row, oldValue, $el) {$.ajax({type: "post",url: "/ordercenter/updateOrder.json",data: {orderid: row.orderid,updateCol: field,updateVal: eval('row.'+field)},dataType: 'JSON',success: function (data, status) {console.log(data);if (status == "success") {alert('旧数据: 订单号: ' + row.orderid + ' ' + field + ': ' + oldValue + '\r\n'+ '更新后的数据: 订单号: ' + data.updateId + ' ' + data.updateCol + ': ' + data.updateVal)}},error: function () {alert('编辑失败');},complete: function () {}});},details editable编辑后的提交⽅法统⼀放到onEditableSave事件⾥⾯统⼀处理例⼦: 页⾯table中的列姓名,field为testName,实际的值为xiaoming1,通过修改将其改为xiaoming2,这时候field为testName,row为⼀个json,键值对分别为该⾏的所有键值组合,oldValue为xiaoming1更为详细的描述请到建议读者直接使⽤我的onEditableSave,它向后台发送了三个数据精确完成update,⾏特定标识和列特定标识定位到修改了哪⼀个具体的数据,再给出updateVal指出原本的数据被修改成了updateValmoreEditableeditable中的mode的值⼀般是popup,翻译是弹出的意思,也可以使⽤inline值,但是点击并且编辑的时候会使表格样式发⽣改变,⽽popup则不会demoweb-xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="/xml/ns/javaee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_4_0.xsd"version="4.0"><welcome-file-list><welcome-file>/bootindex.html</welcome-file></welcome-file-list><servlet><servlet-name>DataSendServlet</servlet-name><servlet-class>com.selton.DataSendServlet</servlet-class></servlet><servlet-mapping><servlet-name>DataSendServlet</servlet-name><url-pattern>/DataSendServlet</url-pattern></servlet-mapping></web-app>html-demo<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https:///bootstrap/3.0.1/css/bootstrap.min.css"><link href="https:///bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet"><script src="/libs/jquery/2.1.4/jquery.min.js"></script><link href="///ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/> <script src="///ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script><script language="JavaScript" src="/js/showOrder.js"></script><script language="JavaScript">$(function () {//1.初始化Tablevar oTable = new TableInit();oTable.Init();});</script></head><body><div class="container"><table id="Table"></table></div><script src="/libs/jquery/2.1.4/jquery.min.js"></script><script src="/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script><script src="https:///bootstrap-table/1.12.1/bootstrap-table.min.js"></script></body></html>js-demovar TableInit = function () {var oTableInit = new Object();//初始化TableoTableInit.Init = function () {$('#Table').bootstrapTable({url: '/DataSendServlet', //请求后台的URL（*）method: 'get', //请求⽅式（*）async: true, //true表⽰执⾏到这,ajax向后台发起访问,在等待响应的这段时间⾥,继续执⾏下⾯的代码//设置为true,基本都是后⾯的代码(除⾮还有ajax)先执⾏// toolbar: '#toolbar', //⼯具按钮⽤哪个容器striped: true, //是否显⽰⾏间隔⾊cache: false, //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*）pagination: true, //是否显⽰分页（*）queryParams: oTableInit.queryParams,//传递参数（*）sidePagination: "server", //分页⽅式：client客户端分页，server服务端分页（*）paginationPreText:'<', //上⼀页按钮样式paginationNextText:'>', //下⼀页按钮样式pageNumber: 1, //初始化加载第⼀页，默认第⼀页pageSize: 10, //每页的记录⾏数（*）pageList: [10, 25, 50, 100], //可供选择的每页的⾏数（*）contentType: "application/x-www-form-urlencoded", //重要选项,必填showColumns: true, //是否显⽰所有的列showRefresh: true, //是否显⽰刷新按钮minimumCountColumns: 2, //最少允许的列数clickToSelect: true, //是否启⽤点击选中⾏//height: 700, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数决定表格⾼度,最好不要设置这个属性 uniqueId: "no", //每⼀⾏的唯⼀标识，⼀般为主键列showToggle: true, //是否显⽰详细视图和列表视图的切换按钮cardView: false, //是否显⽰详细视图detailView: false, //是否显⽰⽗⼦表columns: [{field: 'testId',title: 'ID',editable: {mode: 'inline'}}, {field: 'testName',title: '⽤户名'}, {field: 'testPassword',title: '密码'}],rowStyle: function (row, index) {var classesArr = ['success', 'info'];var strclass = "";if (index % 2 === 0) {//偶数⾏strclass = classesArr[0];} else {//奇数⾏strclass = classesArr[1];}return {classes: strclass};},//隔⾏变⾊});};//得到查询的参数oTableInit.queryParams = function (params) {var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的limit: params.limit, //params.limit, 页⾯⼤⼩offset: params.offset,testNum: 445,testNum1: 343};return temp;};return oTableInit;};server-demopackage com.selton;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.Enumeration;/*** @author seltonzyf@* @date 2018/5/10 13:59*/@WebServlet(name = "DataSendServlet")public class DataSendServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //这⾥输出后台从ajax拿到的数据Enumeration<String> parameterNames = request.getParameterNames();while (parameterNames.hasMoreElements()) {String s = parameterNames.nextElement();String parameter = request.getParameter(s);System.out.println("s = " + s);System.out.println("parameter = " + parameter);}response.getWriter().print("{\"total\": 11, \"rows\":[{\"testId\":9, \"testName\":\"selton\", \"testPassword\": 1}]}");}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response);}}注意bootstrap-table只能被调⽤⼀次的问题在inittable之前$("#table").bootstrapTable('destroy');清空之前表内数据服务器向前端发送的⽤于构建表单的json,所有的键都会变成⼩写。
jquery获取元素文本的方法
jquery获取元素文本的方法以jQuery获取元素文本的方法在使用jQuery进行网页开发时，经常需要获取元素的文本内容。
jQuery提供了多种方法来获取元素的文本，下面将介绍几种常用的方法。
方法一：text()方法text()方法是最常用的获取元素文本的方法之一。
它可以用于获取元素的纯文本内容，即去除HTML标签后的文本内容。
语法：$(selector).text()示例：HTML代码：<p>这是一个段落。
</p>jQuery代码：var text = $("p").text();console.log(text);输出结果：这是一个段落。
方法二：html()方法html()方法也可以用于获取元素的文本内容。
与text()方法不同的是，html()方法会返回元素的HTML内容，包括HTML标签和文本内容。
语法：$(selector).html()示例：HTML代码：<p>这是一个<strong>加粗的</strong>段落。
</p>jQuery代码：var html = $("p").html();console.log(html);输出结果：这是一个<strong>加粗的</strong>段落。
方法三：val()方法val()方法主要用于获取表单元素的值，但也可以获取其他元素的文本内容。
val()方法适用于input、textarea和select等表单元素。
语法：$(selector).val()示例：HTML代码：<input type="text" value="这是一个输入框。
">jQuery代码：var value = $("input").val();console.log(value);输出结果：这是一个输入框。
用Jquery获取table中td的值
<SCRIPT language="javascript" type="text/javascript" >
$(function(){
//使用jquery 取得table 中td里面的值
$("#tb td").click(function(){
}
});
$("#hidDetailList").val(arrMerchandise.join(","));
}
ห้องสมุดไป่ตู้
private List<hanvnet.Dto.Page.Table.DeliveryFeePage> GetDeliveryFeeList(string strChargerId)
$("#tbOrderMerchandise tr").each(function(){
var $MerchandiseIdTd = $("td:eq(0)",$(this) );//商品ID
var $quantityTd = $("td:eq(3)",$(this) );//数量
var $priceTd=$("td:eq(6)",$(this) );//小计
var $DescriptionTd = $("td:eq(7)",$(this) );//备注
if($MerchandiseIdTd.text()!="")
是否删除
</td>
</tr>
<tr>
<td>name</td>
表格组件神器：bootstraptable详细使用指南
表格组件神器：bootstraptable详细使⽤指南1、bootstrap-table简介1.1、bootstrap table简介及特征：Bootstrap table是国⼈开发的⼀款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强⼤的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
⽬前在github 上已经有2600多个Star，可见其受欢迎程度。
其官⽅⽹站地址为：/。
⾥⾯可以下载使⽤所需的JS和CSS⽂件，以及参考⽂档和例⼦。
⽀持 Bootstrap 3 和 Bootstrap 2⾃适应界⾯固定表头⾮常丰富的配置参数直接通过标签使⽤显⽰/隐藏列显⽰/隐藏表头通过 AJAX 获取 JSON 格式的数据⽀持排序格式化表格⽀持单选或者多选强⼤的分页功能⽀持卡⽚视图⽀持多语⾔⽀持插件1.2、bootstrap table渲染数据到表格的⽅式：Bootstrap-Table显⽰数据到表格的⽅式有两种，⼀种是客户端（client）模式，⼀种是服务器（server）模式。
所谓客户端模式，指的是在服务器中把要显⽰到表格的数据⼀次性加载出来，然后转换成JSON格式传到要显⽰的界⾯中，在JavaWeb中可以保存在request中，然后转发到指定界⾯，在界⾯初始化的时候使⽤EL表达式获取，然后调⽤相关初始化的函数，将JSON字符串传进去即可显⽰。
客户端模式较为简单，它是把数据⼀次性加载出来放到界⾯上，然后根据你设置的每页记录数，⾃动⽣成分页。
当点击第⼆页时，会⾃动加载出数据，不会再向服务器发送请求。
同时⽤户可以使⽤其⾃带的搜索功能，可以实现全局数据搜索。
对于数据量较少的时候，可以使⽤这个⽅法。
但是对于数据量⼤的系统，使⽤该⽅法会造成加载出⼀些很久之前的，⽤户不在关注的数据，使得加载速度变慢，增加了服务器的负担，浪费了资源。
这时应该采⽤服务器模式。
所谓服务器模式，指的是根据设定的每页记录数和当前要显⽰的页码，发送数据到服务器进⾏查询，然后再显⽰到表格中。
JqueryDatatables的使用详解
JqueryDatatables的使⽤详解参考：Datatables 是⼀款强⼤的Jquery表格处理插件，样式⽅⾯可以兼容bootstrap3/4、JqueryUi等，也有默认的样式可以选择。
使⽤Datatables可以很灵活的从服务端通过ajax 更新表格数据，实现排序、分页等功能。
⼀、安装登录官⽹下载，可以看到有⼀个选择的表单让你⾃定义下载包的内容，可以选择样式、扩展组件、Jquery库等，这个可以根据⾃⼰的需求下载，也可以先只下载Default的就可以了。
在你的项⽬中使⽤ DataTables，只需要引⼊三个⽂件即可，jQuery库，⼀个DataTables的核⼼js⽂件和⼀个DataTables的css⽂件。
有的时候还需要DataTables样式的⼀些资源。
⼆、数据的绑定如何将数据显⽰到Datatables中呢，有三种⽅式：1. Dom如果在html中⽣命的table标签下，tbody中有已经编辑好的数据的话，会直接显⽰出来。
<table id="table_id_example" class="display"><thead><tr><th>Column 1</th><th>Column 2</th></tr></thead><tbody><tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr><tr>2. JavaScript可以在js中定义好数据源，然后在DT初始化的时候，通过data选项为表格配置数据，数据源可以是数组、对象、实例三种形式。
（1）数组var data = [["Tiger Nixon","System Architect","Edinburgh","5421","2011/04/25","$3,120"],["Garrett Winters","Director","Edinburgh","8422","2011/07/25","$5,300"]];$('#example').DataTable( {data: data} );（2）实例function Employee ( name, position, salary, office ) { = name;this.position = position;this.salary = salary;this.office = function () {return this._office;}};$('#example').DataTable( {data: [new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )],columns: [{ data: 'name' },{ data: 'salary' },{ data: 'office()' },{ data: 'position' }]} );（3）对象var data = [{"name": "Tiger Nixon","position": "System Architect","salary": "$3,120","start_date": "2011/04/25","office": "Edinburgh","extn": "5421"},{"name": "Garrett Winters","position": "Director","salary": "$5,300","start_date": "2011/07/25","office": "Edinburgh","extn": "8422"}];//object可以如下初始化表格$('#example').DataTable( {data: data,//使⽤对象数组，⼀定要配置columns，告诉 DataTables 每列对应的属性//data 这⾥是固定不变的，name，position，salary，office 为你数据⾥对应的属性columns: [{ data: 'name' },{ data: 'position' },{ data: 'salary' },{ data: 'office' }]} );可以看到，在html中定义好⼀个id是example的table后，可以使⽤DT提供的选项进⾏初始化，data是数据，可以将要展⽰的数据对象放到data选项后，然后通过columns 选项为每⼀列的属性进⾏定义，DT就会根据columns中定义的属性找到对象中的成员进⾏绑定，如果是数组的话，会按照数组中定义的数据依次绑定到每⼀列上进⾏展⽰。
jquery获取表单数据的方法
标题：JQuery获取表单数据的方法正文：随着互联网技术的不断发展，前端开发在Web应用程序中扮演着愈发重要的角色。
JQuery作为一款优秀的前端开发框架，其强大的功能和便捷的操作方式受到了广大开发者的青睐。
在Web开发中，表单是不可或缺的组件之一，而JQuery也提供了丰富的API来获取表单数据，本文将介绍JQuery获取表单数据的几种常用方法。
一、使用val()方法获取表单数据JQuery中的val()方法可用于获取表单元素的值，包括input、select、textarea等。
通过选取相应的表单元素，可以直接调用val()方法来获取其值。
示例代码如下：```javascriptvar username = $('#username').val(); // 获取输入框中的值var gender = $('input:radio[name="gender"]:checked').val(); //获取单选框的值var hobby =$('input:checkbox[name="hobby"]:checked').map(function(){ return $(this).val();}).get(); // 获取复选框的值var city = $('#city option:selected').val(); // 获取下拉框选中的值var intro = $('#intro').val(); // 获取文本域的值```二、使用serialize()方法获取表单数据JQuery中的serialize()方法可以将表单元素的值序列化成字符串，以便于通过Ajax进行传输或提交表单。
示例代码如下：```javascriptvar formData = $('#form').serialize(); // 序列化表单数据```三、使用serializeArray()方法获取表单数据serializeArray()方法将表单元素的值序列化成一个数组，每个元素是一个包含name和value属性的对象。
jq获取表单值与赋值代码
jq获取表单值与赋值代码jq获取表单值与赋值代码$("#keyword")[0].value = "";/*获得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的项目为当前选中项$("testtest2").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();});jQuery对html元素取值与赋值Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容Jquery给基本控件的取值、赋值TEXTBOX:var str = $('#txt').val();$('#txt').val("Set Lbl Value");//文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容LABLE:var str = $('#lbl').text();$('#lbl').text("Set Lbl Value");var valradio = $("input[@type=radio][@checked]").val();var item = $('input[@name=items][@checked]').val();var checkboxval = $("#checkbox_id").attr("value")；var selectval = $('#select_id').val();//多选框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><optionvalue='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();});摘要： Jquery给基本控件的取值、赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容Jquery给基本控件的取值、赋值TEXTBOX:var str = $('#txt').val();$('#txt').val("Set Lbl Value");//文本框，文本区域：$("#text_id").attr("value",'');//清空内容$("#text_id").attr("value",'test');// 填充内容LABLE:var str = $('#lbl').text();$('#lbl').text("Set Lbl Value");var valradio = $("input[@type=radio][@checked]").val();var item = $('input[@name=items][@checked]').val();var checkboxval = $("#checkbox_id").attr("value")；var selectval = $('#select_id').val();//多选框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><optionvalue='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();});具有限定子节点选择器:$("mix1[mix2]"):返回包含mix2的mix1节点.如:$("div[a]"):包含a标签的div.这个和$("div a")不相同.后者表示div中的a标签,返回的是a标签对象,前者返回的是div标签对象冒号限定结点选择器:$("mix:condition"):mix标签,并且满足限定条件.E:root:类型为E,并且是文档的根元素E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始E:first-child:是其父元素的第1个类型为E的子元素E:last-child:是其父元素的最后一个类型为E的子元素E:only-child:且是其父元素的唯一一个类型为E的子元素E:empty:没有子元素（包括text节点）的类型为E的元素E:enabledE:disabled:类型为E,允许或被禁止的用户界面元素E:checked:类型为E,处于选中状态的用户界面元素（例如单选按钮或复选框）E:visible:选择所有可见元素(display值为block或visible,visibility值为visible元素,不包括hide域)E:hidden:选择所有隐藏元素(非Hide域,且display值为block或visible,visibility值为visible的元素)E:not(s):类型为E,不匹配选择器sE:eq(n),E:gt(n),E:lt(n):元素限定E:first:相当于E:eq(0)E:last:最后一个匹配的元素E:even:从匹配的元素集中取序数为偶数的元素E:odd:从匹配的元素集中取序数为奇数的元素E:parent:选择包含子元素（包含text节点）的所有元素E:contains('test'):选择所有含有指定文本的元素表单选择器:E:input:选择表单元素(input,select,textarea,button)E:text:选择所有文本域(type="text")E:password:选择所有密码域(type="password")E:radio:选择所有单选按钮(type="radio")E:checkbox:选择所有复选框(type="checkbox")E:submit:选择所有提交按钮(type="submit")E:image:选择所有图像域 (type="image")E:reset:选择所有清除域(type="reset")E:button:选择所有按钮(type="button")当然包括E:hidden8.xPath路径查询:先介绍下xPath的语法:/:选取根节点//:选取文档中所有符合条件的节点,不管该节点位于何处.:选取当前节点..:选取单前节点的父节点@:选取属性,这个在之前说过了(属性选择器)nodename:选取节点下的所有节点jQuery中的应用:根节点是很少用到的,常用的如下面的例子:$("div/p")相当于$("div>p")$("div//p")相当于$("div p")$("//div/../p"):所有div节点的父节点下的p标签还有相对路径的写法以及支持的Axis选择器,还不是会应用,不介绍了...已经一大堆了$的其他用法:$(html节点):根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素.如:$("Hello").appendTo("#body");//把Hello添加到body元素中$(document):网页文档对象$(document.body):网页body对象,和$("body")是一样的$(函数):DOM载入后就执行该函数.所以$(document).ready()可以写做$()$(选择器部分,选择器来源):这个举例说明$("input:radio",document.forms[0]):在文档的第一个表单中,搜索所有单选按钮$("div",xml.responseXML):查询指定XML文档中的所有div元素选择器来源可以是:作为上下文的DOM元素,文档或jQuery对象还有两个:$.extend(prop)和$.noConflict()是和插件以及和其他库兼容的使用,以后再写下拉框,单选框,多选框整理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('');$("1111").appendTo("#select")//添加下拉框的option稍微解释一下:1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；可以看出有@开头的就表示后面跟的是属性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本文实例讲述了jQuery实现获取table表格第一列值的方法。
分享给大家供大家参考，具体如下：
先来看看运行效果截图：
完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="/1999/xhtml" >
<head>
<title>无标题页</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#Button1").click(function(){
var cols="";
$("#tb tr").each(function(){
var text = $(this).children("td:first").text();
cols+=text+"|";
})
cols=cols.length>0?cols.substring(0,cols.length-1):"";
alert(cols);
})
})
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
<table id="tab1" border="1" style="width:100%;">
<tr>
<th>Id</th>
<th>Name</th>
<th>Address</th>
</tr>
<tbody id="tb">
<tr>
<td>11</td>
<td>leaf</td>
<td>gz</td>
</tr>
<tr>
<td>22</td>
<td>flower</td>
<td>gz</td>
</tr>
</tbody>
</table>
</body>
</html>
希望本文所述对大家jQuery程序设计有所帮助。