VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • Web前端基础(17):jQuery基础(四)

作者:@小灰灰
本文为作者原创,转载请注明出处:https://www.cnblogs.com/liuhui0308/p/11887648.html


回到顶部(go to top)

1. jQuery的属性操作

jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作

html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()

DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()

类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()

值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()

1.1 html属性操作

1.1.1 attr()

设置属性值或者返回被选元素的属性值。


		
  1. //获取值:attr()设置一个属性值的时候 只是获取值
  2. var id = $('div').attr('id')
  3. console.log(id)
  4. var cla = $('div').attr('class')
  5. console.log(cla)
  6. //设置值
  7. //1.设置一个值 设置div的class为box
  8. $('div').attr('class','box')
  9. //2.设置多个值,参数为对象,键值对存储
  10. $('div').attr({name:'hahaha',class:'happy'})

1.1.2 removeAttr()

移除属性


		
  1. //删除单个属性
  2. $('#box').removeAttr('name');
  3. $('#box').removeAttr('class');
  4.  
  5. //删除多个属性
  6. $('#box').removeAttr('name class');

1.2 DOM属性操作

1.2.1 prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

返回属性的值:


		
  1. $(selector).prop(property)

设置属性和值:


		
  1. $(selector).prop(property,value)

设置多个属性和值:


		
  1. $(selector).prop({property:value, property:value,...})

1.2.2 attr()和prop()的区别


		
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <input type="radio" id='test' name="sex" checked/>
  9. <input type="radio" id='test2' name="sex" />
  10. <button>提交</button>
  11.  
  12. <script type="text/javascript" src="jquery-3.3.1.js"></script>
  13. <script type="text/javascript">
  14. $(function(){
  15. //获取第一个input
  16. var el = $('input').first();
  17. //undefined 因为attr是获取的这个对象属性节点的值,很显然此时没有这个属性节点,自然输出undefined
  18. console.log(el.attr('style'));
  19. // 输出CSSStyleDeclaration对象,对于一个DOM对象,是具有原生的style对象属性的,所以输出了style对象
  20. console.log(el.prop('style'));
  21. console.log(document.getElementById('test').style);
  22.  
  23. $('button').click(function(){
  24. alert(el.prop("checked") ? "男":"女");
  25. })
  26.  
  27. })
  28. </script>
  29.  
  30. </body>
  31. </html>

什么时候使用attr(),什么时候使用prop()?

1.是有true,false两个属性使用prop()。

2.其他则使用attr()。

1.3 类样式操作

1.3.1 addClass

为每个匹配的元素添加指定的类名。


		
  1. $('div').addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名。


		
  1. $('div').addClass("box box2");//追加多个类名

1.3.2 removeClass

从所有匹配的元素中删除全部或者指定的类。

移除指定的类(一个或多个)


		
  1. $('div').removeClass('box');

移除全部的类


		
  1. $('div').removeClass();

可以通过添加删除类名,来实现元素的显示隐藏。

代码如下:


		
  1. var tag = false;
  2. $('span').click(function(){
  3. if(tag){
  4. $('span').removeClass('active')
  5. tag=false;
  6. }else{
  7. $('span').addClass('active')
  8. tag=true;
  9. }
  10. })

案例:


		
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. .active{
  8. color: red;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <ul>
  14. <li class="item">张三</li>
  15. <li class="item">李四</li>
  16. <li class="item">王五</li>
  17. </ul>
  18. <script type="text/javascript" src="jquery-3.3.1.js"></script>
  19. <script type="text/javascript">
  20. $(function(){
  21.  
  22. $('ul li').click(function(){
  23. // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
  24. $(this).addClass('active').siblings('li').removeClass('active');
  25. })
  26. })
  27. </script>
  28.  
  29. </body>
  30. </html>

1.3.3 toggleClass

如果存在(不存在)就删除(添加)一个类。

语法:toggleClass('box')


		
  1. $('span').click(function(){
  2. //动态的切换class类名为active
  3. $(this).toggleClass('active')
  4. })

1.4 值操作

1.4.1 html

html():是获取选中标签元素中所有的内容


		
  1. $('#box').html();

设置值:设置该元素的所有内容会替换掉标签中原来的内容


		
  1. $('#box').html('<a href="https://www.baidu.com">百度一下</a>');

1.4.2 text

text():获取匹配元素包含的文本内容


		
  1. $('#box').text();

设置该所有的文本内容


		
  1. $('#box').text('<a href="https://www.baidu.com">百度一下</a>');

值为标签的时候,不会被渲染为标签元素,只会被当做值渲染到浏览器中。

1.4.3 val

val()用于表单控件中获取值,比如input textarea select等等


		
  1. $('input').val();

val()用于表单控件中获取值,比如input textarea select等等


		
  1. $('input').val('设置了表单控件中的值');
回到顶部(go to top)

2. 操作input的value值

表单控件是我们的重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等

那么通过上章知识点我们了解到,我们在使用jquery方法操作表单控件的方法:


		
  1. $(selector).val()//设置值和获取值

看如下HTML结构:


		
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <form action="">
  9. <input type="radio" name="sex" value="112" />
  10. <!-- 设置cheked属性表示选中当前选项 -->
  11. <input type="radio" name="sex" value="11" checked="" />
  12. <input type="radio" name="sex" value="11" />gay
  13.  
  14. <input type="checkbox" value="a" checked=""/>吃饭
  15. <input type="checkbox" value="b" />睡觉
  16. <input type="checkbox" value="c" checked=""/>打豆豆
  17.  
  18. <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
  19. <select name="timespan" id="timespan" class="Wdate" >
  20. <option value="1">8:00-8:30</option>
  21. <option value="2" selected="">8:30-9:00</option>
  22. <option value="3">9:00-9:30</option>
  23. </select>
  24. <input type="text" name="" id="" value="111" />
  25. </form>
  26.  
  27. </body>
  28. </html>

操作表单控件代码如下:


		
  1. <script type="text/javascript" src="jquery-3.3.1.js"></script>
  2. <script type="text/javascript">
  3.  
  4. $(function(){
  5. // 一、获取值
  6. //1.获取单选框被选中的value值
  7. console.log($('input[type=radio]:checked').val())
  8.  
  9. //2.复选框被选中的value,获取的是第一个被选中的值
  10. console.log($('input[type=checkbox]:checked').val())
  11.  
  12. //3.下拉列表被选中的值
  13.  
  14. var obj = $("#timespan option:selected");
  15. // 获取被选中的值
  16. var time = obj.val();
  17. console.log(time);
  18. // 获取文本
  19. var time_text = obj.text();
  20. console.log("val:"+time+" text"+ time_text );
  21.  
  22. //4.获取文本框的value值
  23. console.log($("input[type=text]").val())//获取文本框中的值
  24.  
  25. // 二.设置值
  26. //1.设置单选按钮和多选按钮被选中项
  27. $('input[type=radio]').val(['112']);
  28. $('input[type=checkbox]').val(['a','b']);
  29.  
  30. //2.设置下拉列表框的选中值,必须使用select
  31. /*因为option只能设置单个值,当给select标签设置multiple。
  32. 那么我们设置多个值,就没有办法了,但是使用select设置单个值和多个值都可以
  33. */
  34. $('select').val(['3','2'])
  35.  
  36. //3.设置文本框的value值
  37. $('input[type=text]').val('试试就试试')
  38.  
  39. })
  40.  
  41. </script>
回到顶部(go to top)

3. 文档操作

之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果。那么jQuery的文档操作的API提供了便利的方法供我们操作我们的文档。

看一个之前我们js操作DOM的例子:


		
  1. var oUl = document.getElementsByTagName('ul')[0];
  2. var oLi = document.createElement('li');
  3. oLi.innerHTML = '赵云';
  4. oUl.appendChild(oLi);

3.1 插入操作

(1) append

语法:


		
  1. 父元素.append(子元素)

追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素。

代码如下:


		
  1. var oli = document.createElement('li');
  2. oli.innerHTML = '哈哈哈';
  3. $('ul').append('<li>1233</li>');
  4. $('ul').append(oli);
  5. $('ul').append($('#app'));

如果追加的是jquery对象,那么这些元素将从原位置上消失。简言之,就是一个移动操作。

(2) appendTo

语法:


		
  1. 父元素.prepend(子元素);

追加到某元素,子元素添加到父元素


		
  1. $('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素。

(3) prepend

语法:


		
  1. 父元素.prepend(子元素);

前置添加, 添加到父元素的第一个位置。


		
  1. $('ul').prepend('<li>我是第一个</li>')

(4) prependTo

语法:


		
  1. 子元素.prependTo(父元素);

前置添加, 添加到父元素的第一个位置


		
  1. $('<a href="#">小灰灰</a>').prependTo('ul')

(5) after和insertAfter

语法:


		
  1. 兄弟元素.after(要插入的兄弟元素);
  2. 要插入的兄弟元素.insertAfter(兄弟元素);

在匹配的元素之后插入内容 


		
  1. $('ul').after('<h4>我是一个h3标题</h4>')
  2. $('<h5>我是一个h2标题</h5>').insertAfter('ul')

(6) before和insertBefore

语法:


		
  1. 兄弟元素.before(要插入的兄弟元素);
  2. 要插入的兄弟元素.insertBefore(兄弟元素);

在匹配的元素之后插入内容 


		
  1. $('ul').before('<h3>我是一个h3标题</h3>')
  2. $('<h2>我是一个h2标题</h2>').insertBefore('ul')

3.2 克隆操作

语法:


		
  1. $(选择器).clone();

克隆匹配的DOM元素


		
  1. $('button').click(function() {
  2.  
  3. // 1.clone():克隆匹配的DOM元素
  4. // 2.clone(true):元素以及其所有的事件处理并且选中这些克隆的副本(简言之,副本具有与真身一样的事件处理能力)
  5. $(this).clone(true).insertAfter(this);
  6. })

3.3 修改操作

(1) replaceWith

语法:


		
  1. $(selector).replaceWith(content);

将所有匹配的元素替换成指定的string、js对象、jquery对象。


		
  1. //将所有的h5标题替换为a标签
  2. $('h5').replaceWith('<a href="#">hello world</a>')
  3. //将所有h5标题标签替换成id为app的dom元素
  4. $('h5').replaceWith($('#app'));

(2) replaceAll

语法:


		
  1. $('<p>哈哈哈</p>')replaceAll('h2');

替换所有。将所有的h2标签替换成p标签。


		
  1. $('<br/><hr/><button>按钮</button>').replaceAll('h4')

3.4 删除操作

(1) remove

语法:


		
  1. $(selector).remove();

删除节点后,事件也会删除(简言之,删除了整个标签)


		
  1. $('ul').remove();

(2) detach

语法:


		
  1. $(selector).detach();

删除节点后,事件会保留


		
  1. var $btn = $('button').detach()
  2. //此时按钮能追加到ul中
  3. $('ul').append($btn)

(3) empty

语法:


		
  1. $(selector).empty();

清空选中元素中的所有后代节点


		
  1. //清空掉ul中的子元素,保留ul
  2. $('ul').empty()
 
出处:https://www.cnblogs.com/liuhui0308/p/11887648.html


相关教程