JQuery基本操作

港控/mmm° 2022-05-09 14:28 253阅读 0赞

关于jquery的选择器，我们知道进行jquery基本操作的基础就是jquery选择器的精准定位

那我们该怎么满足各种限制条件来选择我们需要的元素对象呢，这里给大家着重介绍一下几种方法，希望对你有所帮助。

## jquery选择器 ##

**jquery用法思想一**   
选择某个网页元素，然后对它进行某种操作

**jquery选择器**   
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素
    $('.myClass') // 选择class为myClass的元素
    $('li') //选择所有的li元素
    $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
    $('input[name=first]') // 选择name属性等于first的input元素

**对选择集进行过滤**

$('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    $('div').filter('.myClass'); //选择class等于myClass的div元素
    $('div').eq(5); //选择第6个div元素

**选择集转移**

$('div').prev(); //选择div元素前面紧挨的同辈元素
    $('div').prevAll(); //选择div元素之前所有的同辈元素
    $('div').next(); //选择div元素后面紧挨的同辈元素
    $('div').nextAll(); //选择div元素后面所有的同辈元素
    $('div').parent(); //选择div的父元素
    $('div').children(); //选择div的所有子元素
    $('div').siblings(); //选择div的同级元素
    $('div').find('.myClass'); //选择div内的class等于myClass的元素

**判断是否选择到了元素**

var $div1 = $('#div1');
    var $div2 = $('#div2');
    alert($div1.length); // 弹出1
    alert($div2.length); // 弹出0
    ......
    <div id="div1">这是一个div</div>

## jquery样式操作 ##

**jquery用法思想二**   
同一个函数完成取值和赋值

**操作行间样式**

// 获取div的样式
    $("div").css("width");
    $("div").css("color");
    
    //设置div的样式
    $("div").css("width","30px");
    $("div").css("height","30px");
    $("div").css({fontSize:"30px",color:"red"});

**特别注意**   
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

**操作样式类名**

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
    $("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
    $("#div1").removeClass("divClass divClass2") //移除多个样式
    $("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery基本操作

会使用基本选择器获取元素会使用层次选择器获取元素会使用属性选择器获取元素会使用过滤选择器获取元素

比眉伴天荒/ 2024年04月29日 11:11/ 0 赞/ 65 阅读

相关 Jquery Table 的基本操作

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table： ![复制代码

迈不过友情╰/ 2024年02月17日 14:09/ 0 赞/ 52 阅读

相关 jQuery选择器及jQuery基本操作

`吐血整理，如有错误，欢迎指出，感激不尽~` 目录 1. jq选择器 2. 属性操作 3. Class操作 4. 样式操作 5. 内容操作

待我称王封你为后i/ 2023年07月16日 12:55/ 0 赞/ 15 阅读

相关 Jquery Table 的基本操作

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table： ![复制代码][co

心已赠人/ 2022年08月26日 08:27/ 0 赞/ 240 阅读

相关 jQuery DOM 操作（基本操作、内部插入、外部插入、包裹操作）

1.删除操作（1）remove() 　　$(selector).remove(\[selector\]) $("div3").remove(); //删除 id

旧城等待，/ 2022年06月18日 09:23/ 0 赞/ 189 阅读

相关 Jquery Table 的基本操作

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table： ![复制代码][co

分手后的思念是犯贱/ 2022年06月06日 07:35/ 0 赞/ 191 阅读

相关 JQuery基本操作

关于jquery的选择器，我们知道进行jquery基本操作的基础就是jquery选择器的精准定位那我们该怎么满足各种限制条件来选择我们需要的元素对象呢，这里给大家着重介绍一

港控/mmm°/ 2022年05月09日 14:28/ 0 赞/ 254 阅读

相关 jQuery-jQuery基本语法

jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action() 美元符号定

桃扇骨/ 2022年04月17日 06:59/ 0 赞/ 240 阅读

相关 Jquery Table 的基本操作

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。首先建立一个通用的表格css 和一个表格Table： ![复制代码][co

╰半橙微兮°/ 2022年01月21日 04:11/ 0 赞/ 261 阅读

相关 jQuery操作基本操作一学习笔记

基本选择用法描述 $(“\elementID”) \表示根据id查找；查找id为elementID的元素；建议的用法。所以一般推荐给标签设置ID。类似：

╰+哭是因爲堅強的太久メ/ 2022年01月09日 17:35/ 0 赞/ 321 阅读