JQuery1：动态操作HTML和CSS

心已赠人 2022-04-17 07:16 176阅读 0赞

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

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

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

\#\#\#对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li
    $('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
    $('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
    $('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
    $('#myForm :input') // 选择表单中的input元素
    $('div:visible') //选择可见的div元素

\#\#\#对选择集进行函数过滤

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

\#\#\#选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素
    $('div').next('p'); //选择div元素后面的第一个p元素
    $('div').closest('form'); //选择离div最近的那个form父元素
    $('div').parent(); //选择div的父元素
    $('div').children(); //选择div的所有子元素
    $('div').siblings(); //选择div的同级元素
    $('div').find('.myClass'); //选择div内的class等于myClass的元素

\#jquery属性操作  
1、html() 取出或设置html内容

// 取出html内容
    
    var $htm = $('#div1').html();
    
    // 设置html内容
    
    $('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容

// 取出文本内容
    
    var $htm = $('#div1').text();
    
    // 设置文本内容
    
    $('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的值

// 取出图片的地址
    
    var $src = $('#img1').attr('src');
    
    // 设置图片的地址和alt属性
    
    $('#img1').attr({ src: "test.jpg", alt: "Test Image" });

\#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样式

学院Go语言视频主页  
[https://edu.csdn.net/lecturer/1928][https_edu.csdn.net_lecturer_1928]

[清华团队带你实战区块链开发][Link 1]  
扫码获取海量视频及源码 QQ群：721929980  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmNoZW5nMDE_size_16_color_FFFFFF_t_70]

[https_edu.csdn.net_lecturer_1928]: https://edu.csdn.net/lecturer/1928
[Link 1]: https://ke.qq.com/course/344443?tuin=3d17195d
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmNoZW5nMDE_size_16_color_FFFFFF_t_70]: /images/20220417/f8f12b19a7694a828d7ba7e95b6d5fec.png

发表评论取消回复

表情：

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

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

相关阅读

相关 jquery添加css_jQuery添加CSS，添加html元素

jquery添加css jQuery add method can be used to add elements, selectors or html to the mat

╰+哭是因爲堅強的太久メ/ 2023年02月28日 08:45/ 0 赞/ 19 阅读

相关 jQuery操作HTML+CSS

jQuery可以动态操作html元素，css效果。给我们带来了不少的方便。一：添加HTML 添加html的方法有三个，分别是。 $(selector).ap

港控/mmm°/ 2023年02月08日 12:51/ 0 赞/ 27 阅读

相关 Jquery基础DOM和css操作

Jquery 第 5 章章基础 DOM 和和 CSS 操作学习要点： 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式

朱雀/ 2022年06月09日 10:07/ 0 赞/ 264 阅读

相关 HTML和CSS入门（1）

HTML入门基础一.关于网页的基础知识 “.com”表示盈利性组织，国际最广泛流行的通用域名格式 “.cn”表示中国国家域名 “.edu

「爱情、让人受尽委屈。」/ 2022年06月06日 04:16/ 0 赞/ 199 阅读

相关 jQuery操作属性，CSS类,HTML代码，文本，值

属性 attr 取/设值 removeAttr 移除属性 prop 类似attr removeProp prop与attr的区别：attr用于取自己定义属性

ゝ一纸荒年。/ 2022年05月29日 14:15/ 0 赞/ 251 阅读

相关 JQuery1：动态操作HTML和CSS

\jquery选择器 \\\jquery用法思想一选择某个网页元素，然后对它进行某种操作 \\\jquery选择器 jquery选择器可以快速地选择元素，选择规

心已赠人/ 2022年04月17日 07:16/ 0 赞/ 177 阅读

相关 jQuery操作Html记录

做web开发前端通常都会使用jQuery这个js库的，通过jQuery来对html元素进行操作是一件很方便的事情，但是不可能将这些操作的方式都记住的包括鄙人，所以一直就想整理一

痛定思痛。/ 2022年04月08日 10:59/ 0 赞/ 216 阅读

相关 JQuery操作HTML属性

每一个HTML元素，都是一个DOM对象每一个对象都会有其对应的属性对于如图所示的img标签 ![watermark_type_ZmFuZ3poZW5naGVpdGk_

小鱼儿/ 2022年01月22日 22:37/ 0 赞/ 315 阅读

相关 jQuery动态写HTML

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

一时失言乱红尘/ 2021年12月09日 07:41/ 0 赞/ 298 阅读

相关 Day1:html和css

![标题图][20181221193645502] > Day1:`html`和`css` 了解浏览器掌握WEB标准理解标签语义掌握常用标签

Bertha 。/ 2021年09月17日 09:54/ 0 赞/ 312 阅读