句法：$

<body> <ul> <li>1</li> <li class=“a”>2</li> <li>3</li> <li class=“b”>4</li> <li>5</li> <li class=“a”>6</li> <li>7</li> <li id=“box”>8</li> <li>9</li> <li>10</li> </ul> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> //id选择器 console.log($(#box))//类名选择器 console.log($(.a)) //标签名选择器 console.log($(li)) //结构选择器 console.log($(li:nth-child(odd)))//拿到奇数个li console.log($(li:nth-child(even)))//拿到偶数个li </script> </body>

选操作方式

<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5 <i>子两级</i> </li> <i>子一级</i> <span>我是 ul 内的一个 span 标签</span> <li>6</li> <li>7 <p> <i>子三级</i> </p> </li> <li>8</li> <li>9</li> <li>10</li> </ul> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> //1.first() console.log($(li).first()) //2.last.() console.log($(li).last()) //3.eq(索引) console.log($(li).eq(3)) //4.next.() console.log($(span).next()) //5.nextAll() console.log($(span).nextAll()) //6.prev() console.log($(span).prev()) //7.prevAll() console.log($(span).prevAll()) //8.parent() console.log($(span).parent())级元素—–ul //9.parents() console.log($(span).parents()) //10.siglings() console.log($(span).siblings()) //11.find(选择器) console.log($(ul).find(i)) </script> </body>

二.操作方式元素内容

1.操作方式元素文本内容

元素.t

html()

<body> <div>hello<p>你好，皮蛋！</p> world </div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> console.log($(div).html()) //使用html()设置内容 console.log($(div).html(哈哈)) console.log($(div).html(<h1>皮蛋</h1>)) </script> </body>

ps:html()可以解析标签

text()

<body> <div> hello <p>你好，皮蛋！</p> world </div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> // console.log($(div).text()) //使用text()设置内容 console.log($(div).text(哈哈)) console.log($(div).text(<h1>皮蛋</h1>)) </script> </body>

ps:text()不可以解析标签

val()

<body> <input type=“text” value=“皮蛋”> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> console.log($(input).val()) //使用val()设置内容 $(input).val(哈哈) </script> </body>

ps:通常设置input

三.操作方式元素属性

1.attr()————

2.removeAttr()————–对元素的属性进行删除操作方式

1.attr()

句法：元素.at

返回值：该属性名对应的属性值

设置属性句法：元素.attr(属性名，属性值)<body> <div id=“box” hello=“hi”></div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> //设置 $(div).attr(hello,hah) //获取 console.log($(div).attr(hello)) </script> </body>

ps:attr()可以修改可以增加

2.removeAttr()句法：元素集合.removeAttr(你要删除的属性名)

<body> <div id=“box” hello=“hi”></div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> //删除 $(div).removeAttr(hello) </script> </body>

四.操作方式元素类名

addClass(‘你要增加的类名’)———增加类名removeClass(‘你要删除的类名’)———删除类名toggleClass(‘类名’)———类名如果在这个元素上就删除，反之增加

addClass()

<body> <div class=“a b v d”></div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> $(div).addClass(e) </script> </body>

removeClass()

<body> <div class=“a b c d”></div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> $(div).removeClass(a) </script> </body>

toggleClass()

<body> <div class=“a b c d”></div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> $(div).toggleClass(f) </script> </body>

五.操作方式元素样式

设置

批量设置样式

尺寸

oudding+border+margin的尺寸 <style> *{ margin: 0; padding: 0%; } div{ width: 300px; height: 300px; padding: 20px; border: 20px solid #333; margin: 20px; background-color: skyblue; background-clip: content-box; }</style> </head> <body> <div></div> <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js”></script> <script> console.log($(div).width()) console.log($(div).height()) console.log(——————) console.log($(div).innerWidth()) console.log($(div).innerHeight())console.log(——————) console.log($(div).outerWidth()) console.log($(div).outerHeight()) console.log(——————) console.log($(div).outerWidth(true)) console.log($(div).outerHeight(true)) </script> </body>