jquery

最新推荐文章于 2024-11-08 11:17:16 发布

c692088846

最新推荐文章于 2024-11-08 11:17:16 发布

阅读量90

点赞数

分类专栏： js 文章标签： json javascript ViewUI

本文链接：https://blog.csdn.net/c692088846/article/details/84486770

版权

js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

http://www.w3school.com.cn/jquery/jquery_traversing_siblings.asp

1：js的dom对像转换成jquery对像

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

2:ajax

$.ajax({
		 type: "POST",
		 dataType :"json",      //返回类型
		 url: "<%=basePath%>res/hw/autoDetect/taskCheckJson.do?taskId=${taskId}",
		 success: function(msg){ 
                            //回调函数 msg为url返回的json数据
                  }
       })

详情参见：http://www.w3school.com.cn/jquery/ajax_ajax.asp

3：全局变量的定义

在方法之外定义的变量是全局变量，

4：清空下拉列表选项

$("#search").find("option").remove()();
或者
$("#search").empty();

5：给控件赋值（网上找的须要验证）

1.jQuery给span取值：$("#id").html();

2.jQuery给input取值：$("#id").val();

3.jQuery给textarea取值：$("#id").val();

4.jQuery给radio取值(非主创)：

今天写Js的时候发现利用jquery取不到radio的当前值，上网Google下，发现网上的解决方案都是依托于1.2版本的，jquery的1.3版本已经去掉的属性选择器@符号。

(1.2)以前的版本对于radio取当前值的方式:

$("input[@type=radio][@checked]")

把@去掉发现能得到object，但是取到的当前值不对，永远都是开始设置radio的那个默认值。

$("input[type=radio][checked]") 这种方式也是取不到当前值的

(1.3-->1.4)经过乱七八糟的实验，最终发现了正确写法

$("input:radio[type='radio'][checked]")

或

$("input[accesskey='shippingFee']:checked");

赋值：var sex = json.sex;//异步返回的信息
$("input:radio").each(function(i){//遍历对象
if(this.value== sex){
$(this).attr("checked","true");
}

5.jQuery给iframe的src赋值：$("id").src+="&uid ="+ uid;

6.jQuery给下拉菜单取值：$("#id").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()；//清空下拉框

6：标签选择器

jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素，返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")

层叠选择器：
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器：
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span")

过滤掉：checked的选择器的所有的input元素

$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器：

$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器：

$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器：

$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素

$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素

$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素

选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()

名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)

一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();

$("A B") 查找A元素下面的所有子节点，包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

当前标签的下一个同级标签

<input type="test" id="upindata" οnblur="aa(this)"/>
function aa(dom){
$(dom).next("span");
}

得到父标签（一级）

$(dom).parent();

得到所有父标签（直到<html>）

$("span").parents(); //parents("ul");过滤只要ul

返回两标签之间的所有父元素

$("span").parentsUntil("div");

得到子标签（一级）

$(dom).children("span")

得到所有子孙标签

$("div").find("span"); //find("*") 得到所有子孙元素

得到的元素为数组，可以使用get得到具体元素，下标从0开始，得到的元素为js，须要转换成jq元素才能使用jq方法

$(tr.find("input").get(0)).val()

7：正则表达式

1 javascript 正则对象创建和用法声明javascript 正则表达式

var reCat = new RegExp(“cat”);

你也可以

var reCat = /cat/; //Perl 风格（推荐）

2 学习最常用的 test exec match search replace split 6个方法

1） test 检查指定的字符串是否存在

var data = “123123″;

var reCat = /123/gi;

alert(reCat.test(data)); //tr

//检查字符是否存在 g 继续往下走 i 不区分大小写

2） exec 返回查询值

var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;

var reCat = /cat/i;

alert(reCat.exec(data)); //Cat

3）match 得到查询数组

var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;

var reCat = /cat/gi;

var arrMactches = data.match(reCat)

for (var i=0;i < arrMactches.length ; i++)

{

alert(arrMactches[i]); //Cat cat

}

4） search 返回搜索位置类似于indexof

var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;

var reCat = /cat/gi;

alert(data.search(reCat)); //23

5） replace 替换字符利用正则替换

var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;

var reCat = /cat/gi;

alert(data.replace(reCat,”libinqq”));

6）split 利用正则分割数组

var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;

var reCat = /\,/;

var arrdata = data.split(reCat);

for (var i = 0; i < arrdata.length; i++)

{

alert(arrdata[i]);

}

8:日期控件

9:修改表单属性

$("#upsubimt").attr("disabled",true);

10:在数组中查找是否包括某个元素

var idarray=['a','b'];
$.grep(idarray,function(n){return n=='a'})

return ['a']

11：增加子标签|增加子元素

$('#dd').append(sel2); //sel2为dom对象

12：删除子元素（删除所有子div）

$('#bc div').remove();

13：隐藏dom

$("p").hide();

14：得到上一个同辈元素

$("p").prev()

15：显示dom

$("p").show();

16:遍历对象属性

$.each(obj,function(n,value) {
				 alert(n+' '+value);  
			});

参拷

1）.遍历对象

Js代码

$(function(){
var tbody = "";
//------------遍历对象 .each的使用-------------
//对象语法JSON数据格式(当服务器端回调回来的对象数据格式是json数据格式，必须保证JSON的格式要求，回调的对象必须使用eval函数进行转化（否则将得不到Object）。本文不作详细介绍服务器端回调的数据问题，我们将直接自定义对象)
var obj =[{"name":"admin","password":"123456"}];
$("#result").html("------------遍历对象 .each的使用-------------");
alert(obj);//是个object元素
//下面使用each进行遍历
$.each(obj,function(n,value) {
alert(n+' '+value);
var trs = "";
trs += "<tr><td>" + value.name +"</td> <td>" + value.password +"</td></tr>";
tbody += trs;
});
$("#project").append(tbody);
});

2）.遍历数组

Js代码

$(function(){
var tbody = "";
//------------遍历数组 .each的使用-------------
var anArray = ['one','two','three'];
$("#result").html("------------遍历数组 .each的使用-------------");
$.each(anArray,function(n,value) {
alert(n+' '+value);
var trs = "";
trs += "<tr><td>" +value+"</td></tr>";
tbody += trs;
});
$("#project").append(tbody);
});

3）.遍历List集合

Js代码

$(function(){
var tbody = "";
//------------遍历List集合 .each的使用-------------
var obj =[{"name":"zhangsan","password":"123456"},{"name":"lisi","password":"333333"}];
$("#result").html("遍历List集合 .each的使用");
alert(obj);//是个object元素
//下面使用each进行遍历
$.each(obj,function(n,value) {
alert(n+' '+value);
var trs = "";
trs += "<tr><td>" +value.name+"</td> <td>" + value.password +"</td></tr>";
tbody += trs;
});
$("#project").append(tbody);
});

17：判断对象是空的（对象userdata：{"detail":{},"max":{}}）

function isEmptyObject(obj){
    for(var n in obj){return false} 
    return true; 
} 

if(isEmptyObject(userdata.max)){
		
	
			}