jQuery入门（二）---jQuery语法

it2025-03-21 9

jQuery入门（二）--- jQuery语法

1、设置、获取文本内容 text（）1.1 获取文本2、获取、设置样式 .css（） 3、基本选择器3.1 选择器：3.2 基本选择器：3.3 层级选择器：3.4 过滤选择器：3.5 筛选选择器：3.6 高亮显示例子 4、class类操作接上文------ jQuery入门（二）— jQuery初体验（与原生js对比）

引入jQuery： <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

1、设置、获取文本内容 text（）

1.1 获取文本

<input type="button" value="获取" id="getBtn"> <input type="button" value="设置" id="setBtn"> <div id="div1">我是一个div标签 <p>我是一个p标签 <span>span1</span> </p> </div> <div id="div2">我是一个div标签 <p>我是一个p标签 <span>span2</span> </p> </div> <script> $(function(){ // text(); 获取和设置文本 //1、获取文本：text（）; 方法不给参数 $('#getBtn').click(function(){ //1.1 获取id为div1这个标签的文本 //会获取到这个标签中所有的文本，包括后代元素的文本 console.log($('#div1').text()); //1.2、获取标签为div的元素的文本 //包含多个dom元素的jQuery对象，通过text（）方法获取文本，会把所有dom元素的文本获取到 console.log($('div').text()); }) //2、设置文本：text（）方法给参数，参数就是要设置的文本 $('#setBtn').click(function(){ //2.1 给id为div1的标签设置文本 //会覆盖他原来的内容,如果设置的文本中包含标签，是不会把这个标签解析出来的 $('#div1').text('我是新设置的文本'); //2.2 给标签为div的元素设置文本 //包含了多个dom元素的jQuery对象，通过text（）的方法设置文本，会把所有的dom元素都设置上 $('div').text('设置的文本'); //隐式迭代 }) })

2、获取、设置样式 .css（）

引入jquery： <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> #div1 { height: 200px; background-color: pink; border:2px solid red; } </style> <body> <input type="button" value="获取" id="getBtn"> <input type="button" value="设置" id="setBtn"> <div id="div1" style="width:200px"></div> <div id="div2" style="width:300px"></div> <div id="div3" style="width:400px"></div> <script> $(function(){ // .css（）方法：设置、获取样式 //1、获取样式： .css（）方法设置参数为要获取的值的样式名 $('#getBtn').click(function(){ //1.1 获取id为div1这个元素的样式 console.log($('#div1').css('width')); //200px console.log($('#div1').css('height')); //200px console.log($('#div1').css('background-color')); //rgb(255, 192, 203) //再ie浏览器中，要获取边框这样的样式值，要给一个准确的边框，如border-top-width console.log($('#div1').css('border')); //2px solid rgb(255, 0, 0) console.log($('#div1').css('border-top-width')); //2px //1.2 获取标签为div的元素们的样式 // 获取包含多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式 console.log($('div').css('width')); //200px }) //2、设置样式: .css() 方法要给样式名和样式值，用''包起来 // 设置样式设置的是行内样式 $('#setBtn').click(function(){ //2.1 给id为div1的元素设置样式 $('#div1').css('width','300px'); $('#div1').css('height',300); $('#div1').css('background-color','red'); $('#div1').css('border','10px solid green'); //设置多样式 $('#div1').css({ width: 300, 'height': '300px', 'background-color': 'red', 'border':'10px solid green' }); //2.2 给标签为div的元素们设置样式 $('div').css({ width: 300, 'height': '300px', 'background-color': 'red', 'border':'10px solid green' }) //隐式迭代，给每一个div都设置了同样的样式 }) }) </script> </body>

3、基本选择器

3.1 选择器：

一组方便获取页面中元素的方法，jQuery选择器返回的是jQuery对象。 jQuery特性：隐式迭代；链式编程：在于一个方法返回的是一个jQuery对象，既然是jQuery对象，就可以继续点出jQuery的方法

3.2 基本选择器：

id选择器 $('#id') 类选择器 $('.class') 标签选择器 $('div') 并集选择器 $('div,p,li') 交集选择器 $('div.redClass')

3.3 层级选择器：

子代选择器 $('ul>li') 后代选择器 $('ul li')

3.4 过滤选择器：

:eq( index ) $('li:eq(2)').css('color','red) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 :odd $('li:odd').css('color','red') 获取到的li元素中，选择索引号为奇数的元素 :even $('li:even').css('color','red') 获取到的li元素中，选择索引号为偶数的元素

3.5 筛选选择器：

children(selector) $('ul').children('li') 相当于$('ul>li'),子类选择器 find(selector) $('ul').find('li') 相当于$('ul li'),后代选择器 siblings(selector) $('#first').sublings('li') 查找兄弟节点，不包括自己本身 parent（） $('#first').parent( ) 查找父亲 eq（index） $('li').eq(2) 相当于$('li:eq(2)') ，索引号index从0开始 next( ) $('li').next( ) 找下一个兄弟 nextAll( ) $('li').nextAll( ) 找后面所有兄弟 prev( ) $('li').prev( ) 找上一个兄弟 prevAll( ) $('li').prevAll( ) 找前面所有兄弟

3.6 高亮显示例子

4、class类操作

添加类 $('#div').addClass（'类名'）移除类 $('#div').removeClass('类名') 判断类 $('#div').hasClass('类名') 切换类 $('#div').toggleClass('类名') <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> #div1{ width: 100px; height: 100px; background-color: pink; } .font-size20{ font-size:30px; } .color{ color:yellow; } </style> <body> <input type="button" value="添加类" id="addClass"> <input type="button" value="移除类" id="removeClass"> <input type="button" value="判断类" id="hasClass"> <input type="button" value="切换类" id="toggleClass"> <div id="div1"> div1</div> <script> $(function(){ //1、添加类 $('#div').addClass（'类名'） $('#addClass').click(function(){ //1.1 给id为div1的元素添加一个类 //添加单个类 $('#div1').addClass('font-size20'); //添加多个类 $('#div1').addClass('font-size20 color'); }) //2、移除类 $('#div').removeClass('类名'); $('#removeClass').click(function(){ //2.1 给id为div1的元素移除移除类 //移除单个类 $('#div1').removeClass('font-size20'); //移除多个类 $('#div1').removeClass('font-size20，color'); //移除所有类 $('#div1').removeClass(); }) //3、判断类 $('#div').hasClass('类名') $('#hasClass').click(function(){ //3.1 判断id为div1的元素是否有某个类，如有返回true，否则返回false console.log($('#div1').hasClass('color')); //true }) //4、切换类 $('#div').toggleClass('类名') $('#toggleClass').click(function(){ //4.1 如果元素有某个类就移除这个类，如果元素没有某个类就添加这个类 $('#div1').toggleClass('color'); }) }) </script> </body>

最新回复(0)

jQuery入门（二）---jQuery语法