jQuery-强大的jq选择器和基本操作。

上篇对jQuery基本知识做了概述,接下来具体说说jq中主要的功能。

强大的jQuery选择器

之说以说其强大:是因为jQuery实现了从CSS1到CSS3所有的选择器以及其他常用的选择器。

以下列出实际开发中比较常用的一些选择器,具体可以去官方文档查看。

基本选择器

符号(名称) 说明 用法
# id选择器
$(“#btnShow”).css(“color”, “red”);

选择id为btnShow的一个元素(返回值为jQuery对象,下同)


.


类选择器


$(“.liItem”).css(“color”, “red”);

选择含有类liItem的所有元素


element


标签选择器


$(“li”).css(“color”, “red”);

选择标签名为li的所有元素

层级选择器(重点)、基本过滤选择器

空格 后代选择器
$(“#j_wrap li”).css(“color”, “red”);

选择id为j_wrap的元素的所有后代元素li

>
子代选择器


$(“#j_wrap > ul > li”).css(“color”, “red”);

选择id为j_wrap的元素的所有子元素ul的所有子元素li

基本过滤选择器


:eq(index)

选择匹配到的元素中索引号为index的一个元素,index从0开始。
$(“li:eq(2)”).css(“color”, ”red”);

选择li元素中索引号为2的一个元素


:odd


选择匹配到的元素中索引号为奇数的所有元素,index从0开始


$(“li:odd”).css(“color”, “red”);

选择li元素中索引号为奇数的所有元素


:even


选择匹配到的元素中索引号为偶数的所有元素,index从0开始


$(“li:even”).css(“color”, “red”);

选择li元素中索引号为偶数的所有元素

筛选选择器(方法)


find(selector)


查找指定元素的所有后代元素(子子孙孙)


$(“#j_wrap”).find(“li”).css(“color”, “red”);

选择id为j_wrap的所有后代元素li


children()


查找指定元素的直接子元素(亲儿子元素)


$(“#j_wrap”).children(“ul”).css(“color”, “red”);

选择id为j_wrap的所有子代元素ul


siblings()


查找所有兄弟元素(不包括自己)


$(“#j_liItem”).siblings().css(“color”, “red”);

选择id为j_liItem的所有兄弟元素


parent()


查找父元素(亲的)


$(“#j_liItem”).parent(“ul”).css(“color”, “red”);

选择id为j_liItem的父元素


eq(index)


查找指定元素的第index个元素,index是索引号,从0开始


$(“li”).eq(2).css(“color”, “red”);

选择所有li元素中的第二个

jq中的操作方法:

一、jquery中的样式操作

1、样式属性操作  .css()

a,设置单个样式:

$(selector).css(“color”, “red”);

给jq对象selector设置文字颜色为红色,第一个参数为样式名称。第二个参数为样式属性值。

b,设置多个样式:

$(selector).css({“color”: “red”, “font-size”: “30px”});

注意点:参数为一个对象,样式值之间用“,”分开。

2、获取样式属性操作:

$(selector).css(“font-size”);

此时,会返回”font-size”样式属性对应的值。

二,类操作

需注意的地方,操作类样式,所有的类名都不带(.);方法名驼峰。

1,添加类样式。

     addClass(className) 为指定元素添加类className.

$(selector).addClass(“liItem”);

2,移除类样式。

removeClass(className) 为指定元素移除类 className。

$(selector).removeClass(“liItem”);
$(selector).removeClass(); 不指定参数,表示移除被选中元素的所有类

3,判断有无类样式。

hasClass(calssName) 判断指定元素是否包含类 className

$(selector).hasClass(“liItem”);

此时,会返回true或false

4,切换类样式。

toggleClass(className) 为指定元素切换类 className,该元素有类则移除,没有指定类则添加。

$(selector).toggleClass(“liItem”);

开发中总结的经验:

1 操作的样式非常少,那么可以通过.css()这个 方法来操作

2 操作的样式很多,那么要通过使用类的方式来操作

待续............

时间: 2024-10-12 11:29:57

jQuery-强大的jq选择器和基本操作。的相关文章

Jquery 第一课(jq选择器:id、类、标签、奇偶、eq、nth-child、子元素、属性、包含、位置、过滤)

一.什么是jQuery? jQuery是一款比较优秀的js框架.是将js中比较常用的方法封装底层.口号是"write less,do more". 二.如何使用jQuery呢?(使用jQuery的整体思路) 1.页面加载完之后 2.找到对象 3.执行你要的事件 4.声明一个事件(function()) 5.完成事件里面的内容 三.第一个jQuery程序 注意小点:1.引入jQuery文件的时候,把jQuery的文件放js文件之前(页面由上而下执行). 2.$的作用 一个是页面加载 还有

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g

JQ选择器...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQ选择器</title> <style type="text/css"> .focused{ background:#abcdef; } </style> </head> <body> &

Jquery学习笔记-过滤选择器

1.根据某过滤规则进行元素的匹配,书写时以":"号开头,通常用于查找集合元素中的某一位置的单个元素. $("li:first") 第一个 $("li:last") 最后一个 2.如果想从一组标签元素数组中,灵活选择任意的一个标签元素,我们可以使用:eq(index) 其中参数index表示索引号(即:一个整数),它从0开始. 如果index的值为3,表示选择的是第4个元素:$("li:eq(3)") 3.按照文本内容来查找一个

CSS之旅——第三站 强大的伪选择器

说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼...首先 我们可以在VS里面提前预览一下. 可以看到,上面的伪类有很多很多,多的让我眼都快瞎了...下面就挑一些实用性比较强的说一说. 一  :nth-child 伪选择器 我们知道在jquery中有一种选择器叫做“子类选择器”,对应的有:nth-child,:first-child,:last-child,:only-child,这回在CSS中同样 可以办到,可以说一定程

从零开始学习jQuery (二) 万能的选择器

原文:从零开始学习jQuery (二) 万能的选择器 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery

jQuery 一些神奇的选择器写法

======================================================================== ======================================================================== JQ选择器是那么的方便 既然如此,不如手写重温一遍~~~~  a[href^=http://]  选择包含以http://开头的href值的链接 div[title^=my]  匹配title特性值以my开头

jQuery入门(1)jQuery中万能的选择器

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应用 编写任何JavaScript程序我们要首先获得对象,jQuery选择器能彻底改变我们平时获取对象的方式,可以获取几乎任何语意的对象,比如 “拥有title属性并且值中包含test的<a>元素”,完成这些工作只需要编写一个jQuery选择器字符串, 学习jQuery选择器是学习jQuery最重要

初识JQuery(1)-选择器

初识jquery 在学习jquery之前,就有看过一些相关的视频,才知道它是可以写很少的代码就可以完成很多事的.记得第一写轮播图的时候,首先就百度了篇轮播图的实现,当时还不知道自己百度的其实不是原生的JS代码,而是用jquery完成的,当时也是初识JS,然后就一脸懵逼的看了视频,结果好像还看懂了,于是跟着他的代码像做着世界上最伟大的事一样的敲着代码,编译的时候却没反应,经过一些了解后才发现这是用传说中的jquery完成的.尽管第一次接触jquery不是为接触而接触的,但是也意识到了他强大的功能.