java jquery用的多吗_越来越少人用JQuery，但你就不学了吗？（2）

【官方正版】javascript与jquery网页

47.6元

包邮

(需用券)

去购买 >

如需要跟多资料请点击下方图片⬇(扫码加好友→备注66)

Jquery选择器

​ 和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。

​ jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。

基础选择器

选择器

名称

举例

id选择器

#id

$("#testDiv")选择id为testDiv的元素

元素名称选择器

element

$("div")选择所有div元素

类选择器

.class

$(".blue")选择所有class=blue的元素

选择所有元素

*

$("*")选择页面所有元素

组合选择器

selector1,selector2,selectorN

$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

.blue{

background: blue;

}

id选择器1 span中的内容

元素选择器

样式选择器

// id选择器

console.log("======id====");

var idSelecter = $('#mydiv1');

console.log(idSelecter.html());

console.log(idSelecter.text());

// 元素选择器

console.log("======name====");

var nameSe = $('div'); // 有多个div元素

nameSe.each(function(){

// this是dom对象，$(this)是jquery对象

console.log($(this).text());

});

// 类选择器，class

console.log("======class====");

var classSe = $('.blue'); // 有多个class=blue的元素

classSe.each(function(){

console.log($(this).text());

});

// 通用选择器：*

console.log("======所有元素====");

var all = $("*");

console.log(all.length);

// 组合选择器

console.log("======组合====");

var unionSe = $('span, .blue,div');

unionSe.each(function(){

console.log($(this).text());

});

层次选择器

选择器

名称

举例

后代选择器

ancestor descendant

$("#parent div")选择id为parent的元素的所有div元素

子代选择器

parent > child

$("#parent>div")选择id为parent的直接div子元素

相邻选择器

prev + next

$(".blue + img")选择css类为blue的下一个img元素

同辈选择器

prev ~ sibling

$(".blue ~ img")选择css类为blue的之后的img元素

层次选择器

.testColor{

background: green;

}

.gray{

background: gray;

}

层次择器

父选择器

子选择器

width="270" height="129" />

width="270" height="129" />

选择器2

选择器2中的div

console.log("=========后代选择器-选择所有后代=====");

var ancestorS = $('#parent div');

ancestorS.each(function(){

console.log($(this).text());

});

console.log("=========子代选择器-选择儿子辈=====");

var child = $('#parent>div');

child.each(function(){

console.log($(this).text());

});

console.log("=========相邻选择器=====");

var pre_next = $(".gray + img");

console.log(pre_next.length);

console.log("=========同辈选择器,其后，(弟弟)=====");

var pre_siblings = $(".gray ~ img");

console.log(pre_siblings.length);

表单选择器

Forms

名称

举例

表单选择器

:input

查找所有的input元素：$(":input")；

注意：会匹配所有的input、textarea、select和button元素。

文本框选择器

:text

查找所有文本框：$(":text")

密码框选择器

:password

查找所有密码框：$(":password")

单选按钮选择器

:radio

查找所有单选按钮：$(":radio")

复选框选择器

:checkbox

查找所有复选框：$(":checkbox")

提交按钮选择器

:submit

查找所有提交按钮：$(":submit")

图像域选择器

:image

查找所有图像域：$(":image")

重置按钮选择器

:reset

查找所有重置按钮：$(":reset")

按钮选择器

:button

查找所有按钮：$(":button")

文件域选择器

:file

查找所有文件域：$(":file")

表单验证

姓名:

密码:

年龄:小屁孩

你懂得

爱好:篮球

爬床

代码

来自:

请选择

北京

上海

简介:

头像:

width="20" height="20"/>

提交

重置

function checkForm(){

// 获取 所有的表单元素

$(":input").each(function(){

// console.log($(this)[0]);

console.log($(this)[0].tagName);

})

console.log("------+++++++++++++++++++++--------")

// 获取 text

console.log("text-->" + $(":text").length); // 1

// 获取 password

console.log("password-->" + $(":password").length); // 1

// 获取radio

console.log("radio-->" + $(":radio").length); // 2

// 获取checkbox

console.log("checkbox-->" + $(":checkbox").length); // 3

// 获取file

console.log("file-->" + $(":file").length); // 1

// 获取按钮

console.log("button-->" + $(":button").length); // 2

// 获取submit按钮

console.log("submit-->" + $(":submit").length); // 1

// 获取image按钮

console.log("image-->" + $(":image").length); // 1

// 获取reset按钮

console.log("reset-->" + $(":reset").length); // 1

return false;

}

文章持续更新，可以微信搜索「 云璈公子 」阅读，回复【资料】【面试】【简历】有我准备的一线大厂面试资料和简历模板，同时我的GitHub https://github.com/1170300826... 有互联网一线大厂面试指南。

java 11官方入门(第8版)教材

79.84元

包邮

(需用券)

去购买 >