jQuery对象与Dom对象及jQuery中的选择器

最新推荐文章于 2022-10-09 23:37:28 发布

lmy_林夕

最新推荐文章于 2022-10-09 23:37:28 发布

阅读量532

点赞数

分类专栏： jQuery 文章标签： jquery 选择器

本文链接：https://blog.csdn.net/weixin_39550799/article/details/78792472

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery

jQuery对象和DOM(document)对象

用#id取得的jQuery对象与document.getElementByid所得的Dom对象区别

普通的dom对象一般可以通过$()转换成jquery对象

如：$(document.getElementById("msg"))；

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：

　　$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]

　　这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

[重点]CSS选择器

1. 标签名选择器div{color:red;}/即页面中的各个标签名的CSS样式

2. 类选择器.divClass{color:red;}/即定义的每个标签的class中的CSS样式

3. Id选择器#myDiv{color:red;}/即页面中的标签的id

4. 后代选择器(类选择器的后代选择器).divClass span{color:red;}/即多个选择器以逗号的格式分隔

5. 群组选择器div,span,img{color:red;}/即具有相同样式的标签分组显示

[重点]jQuery中的选择器

1. 基本选择器

a. $(“*”) 选取页面所有元素。

b. $(“p,div”)选取p、div标签元素

c. $(“.con”)选取class=”con”元素

d. $(“#one”)选取id=”one”元素

2. 层次选择器

a. Parent>child 选取直系子元素

b. Prev+next 选取下一个兄弟元素，相当于next();

c. Perv~siblings 选取prev的所有兄弟元素，等同于nextAll();

3. 过滤选择器

基本过滤选择器

a. $(p:first) 选取匹配的第一个元素

b. $(p:last) 选取匹配的最后一个元素

c. $(p:not(“div”)) 去除与给定选择器匹配的元素

d. $(“tr:even”) 匹配索引值为偶数的元素，从0开始计数

e. $(“tr:odd”) 匹配索引值为奇数的元素，从0开始计数

f. $(“tr:eq()”) 匹配一个给定索引值的元素，从0开始计数

g. $(“tr:gt(0)”) 匹配所有大于给定索引值的元素，从0开始计数

h. $(“tr:lt(0)”) 匹配所有小于给定索引值的元素，从0开始计数

i. $(“:header”) 匹配如h1,h2,h3之类的标题元素

内容过滤选择器

$("div:contains('hello')") 匹配包含给定文本的元素

$("td:empty")匹配所有不包含子元素或者文本的空元素

$("div:has(p)")匹配含有选择器所匹配的元素的元素

$("td:parent") 匹配含有子元素或者文本的元素

属性过滤选择器

$("input[name='news']")匹配属性值等于news的元素

$("input[name!='news']") 匹配属性值不等于news的元素

$("input[name^='news']") 匹配属性值以news开头的元素

$("input[name$='news']") 匹配属性值以news结尾的元素

$("input[name*='news']") 匹配属性值包含news的元素

$("input[id][name$='news']") 匹配属性id,属性name以news结尾的元素

子元素过滤选择器

$("ulli:nth-child(2)") 匹配其父元素下的第2个子元素, 匹配元素的序号，从1开始

$("ulli:first-child") 匹配第一个子元素。

$("ulli:last-child")匹配最后一个子元素。

$("ulli:only-child")匹配某个父元素中唯一的子元素

4. 表单对象属性选择器

$(":input") 匹配所有input, textarea, select和 button 元素

$("input:text")匹配所有的单行文本框。

$("input:password")匹配所有密码框。

$("input:checked")匹配所有被选中的元素。

$("input:radio")匹配所有单选按钮

$("input:checkbox")匹配所有复选框

$("input:submit")匹配所有提交按钮

$("input:image")匹配所有图像域。

$("input:reset")匹配所有重置按钮。

$("input:button")匹配所有按钮。

$("input:file")匹配所有文件域。

$("input:hidden")匹配所有不可见元素。

--------------------------------------------------------------------------------------------------------------------------

A、创建节点(创建方法)

Var $节点名称=$(“标签”);

B、 [重点]添加节点

内部前置：prepend() 或者 prepend to()

内部后置：append() 或者 append to()

外部之前：before() 或者InsertBefore()

外部之后：after() 或者insertAfter()

C、删除节点

删除—remove()

清空—empty()

D、 [重点]Ajax事件：$.Ajax();

第二层：$.post(); $.get(); 对象.load();

第三层：$.getJSON(); $.getScript();

Ø $.ajax()语法：

例子：

$.ajax({

url: "/ForgetCard/ForgetLogin",//方法路径URL

data: {

strUser:$("#textUser").val(), //申请人

strForgetDate:$("#txtForgetDate").val(), //忘记打卡日

strLoginDate: $("#txtLoginDate").val(), //登录日

strType:$("#drpType").val(), //类型

strForgetType:$("#drpForgetCard").val(), //忘记打卡类型

strBeiko:$("#txtBeiko").val(), //备注

strWitness:$("#drpWiness").val() //证明人

},//参数

dataType: 'json',

type: 'POST',

async: false,//默认异步调用 false：同步

success: function (data) {

var retInfo = eval(data);

//提交成功

if (retInfo == true) {

alert("提交成功！");

$("#txtForgetDate").val(""); //忘记打卡日

$("#txtLoginDate").val(""); //登录日

$("#drpType").val("0"); //类型

$("#txtBeiko").val(""); //备注

$(".ForgetCard").css("visibility", "hidden");

window.parent.location.reload;

}

error: function () {

alert('提交数据失败！');

}

})

$.ajax({

url:"/HolidayManage/SelectData",

data: {

strbmID: function () { return strBmId}, //申请人所在部门CD

strUser: function () { return strUser}, //申请人

strBEGIN_TIME: function () { return strBEGIN_TIME}, //请假起始时间

strEND_TIME: function () { return strEND_TIME} //请假结束时间

dataType:'json',

type:'POST',

async:false,

success:function (data) {

$("#tblView tbody").html("");

var strTrsContent = "";

$.each(eval(data), function (n, value) {

strTrsContent = "";

strTrsContent += "<tr>";

//请假单号

strTrsContent += "<td style='width:125px;'>" +value.HOLIDAY_CD + "</td>";

//姓名

strTrsContent += "<td style='width:95px;'>" +value.STAFF_NAME + "</td>";

//所属部门

strTrsContent += "<td style='width:168px;' >" + value.DEP_Name+ "</td>";

//请假类别

strTrsContent += "<td style='width:205px;' >" + value.O_TYPE +"</td>";

//开始时间

strTrsContent += "<td style='width:180px;' >" +value.O_BEGIN_TIME + "</td>";

//结束时间

strTrsContent += "<td style='width:180px;' >" +value.O_END_TIME + "</td>";

//审批状态

strTrsContent += "<td style='width:180px;' >" +value.O_APPROVE_STATE + "</td>";

if (value.O_APPROVE_STATE == "待审批") {

//操作

strTrsContent += "<td style='width:250px'><input type='button'name='" + value.HOLIDAY_CD + "' id='btnSP' class='btn'value='审核' ><input type='button' name='" +value.HOLIDAY_CD + "' class='btn' id='btnDel' value='删除'/></td>";

} else {

strTrsContent += "<td style='width:250px'><input type='button'name='" + value.HOLIDAY_CD + "' id='btnSP' style='display:none' class='btn' value='审核'><input type='button' name='" + value.HOLIDAY_CD + "' style='display:none' id='btnDel' value='删除'/></td>";

}

$("#tblView tbody").append(strTrsContent);

});

error:function () {

alert('提交数据失败！');

}

});

Ø $.ajax({参数列表});

参数列表：

url—请求路径

type—请求方式(post/get)

默认为get