JQuery属性操作
元素固定属性值prop()
所谓的元素的固定属性就是元素自带的属性，如a链接中的href属性
语法
元素自定义属性值attr()
用户本人给元素设置的属性，称为自定义属性
留神:该办法也能够间接获取自定义属性
数据缓存data()
data（）办法能够指定元素上设置属性，但不会批改DOM构造，一旦页面被从新刷新，之前寄存的数据都会被移除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JQuery属性操作</title> <script src="./jquery-3.5.1.js"></script> </head> <body> <a href="https://www.baidu.com/" title="百度">百度</a> <input type="checkbox" name="" id="" checked> <div index='2' date-index='2'>DIV</div> <span>SPAN</span> <script> $(function () { // 1.获取元素固有属性值 console.log($('a').prop('href')) $('a').prop('title', 'baidu') $('input').change(function () { console.log($('input').prop('checked')) }) //2. 获取元素自定义的属性 console.log($('div').attr('index')) console.log($('div').attr('index', "4")); console.log($('div').attr('date-index')) // 3.数据缓存 外面的数据是寄存在内存外面 $('span').data('name', "尧子陌"); console.log($('span').data('name')) }) </script> </body> </html>JQuery获取文本值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery获取文本值</title> <script src="jquery-3.5.1.js"></script> </head> <body> <div> <span>hello word</span> </div> <input type="text" value="请输出内容"> </body> <script> console.log($('div').html()) //获取div外面的内容； $('div').html('Zero'); console.log($('input').val());//打印表单外面的内容 $('input').val('520') </script> </html>返回指定的先人元素
在JQuery中，能够通过parents()的办法来获取指定的先人元素，参数可间接写先人元素的名字
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>返回指定的先人元素</title> <script src="./jquery-3.5.1.js"></script> </head> <body> <div class="container"> <div class="father"> <div class="son">123</div> </div> </div> <script> $(function() { console.log($('.son').parents('.container')); console.log($('.son').parents('.father')); }) </script> </body></html>遍历元素
在JQuery中，隐式迭代只是对雷同的元素做了同样的操作，如果想要给同一类元素做不同的操作，则须要用到遍历
惯例遍历
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery遍历元素</title> <script src="jquery-3.5.1.js"></script></head><body><div>22</div><div>44</div><div>66</div><script> $(function () { //第一种遍历办法 var arr = ['yellow', 'red', 'pink'] var sum = 0; //两个参数 i指的是索引号 ele指的是元素对象 $('div').each(function (i, ele) { console.log(i) //打印索引号 console.log(ele) //打印元素对象 $(ele).css('backgroundColor', arr[i]); sum += parseInt($(ele).text()); }) console.log(sum) })</script></body></html>$.each()遍历
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>$.each遍历</title> <script src="./jquery-3.5.1.js"></script> </head> <body> <script> $(function() { var arr = ['yellow', 'red', 'pink']; //遍历数组 $.each(arr, function(i, ele) { console.log(i); console.log(ele) }) //遍历对象 $.each({ name: "尧子陌", age: 18 }, function(i, ele) { console.log(i); console.log(ele) }) }) </script> </body></html>创立 删除 增加元素
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>创立 删除 增加元素</title> <script src="jquery-3.5.1.js"></script> </head> <body> <ul> <li>高兴的天使</li> </ul> <span>hello</span> <p>段落</p> <script> $(function() { // 外部操作 var li = $("<li>创立的元素</li>"); var li2 = $('<li>第二次创立的元素</li>') $('ul').prepend(li); $('ul').append(li2) }) // 内部操作 var box = $('<div>Word</div>'); var box2 = $("<div>尧子陌</div>"); $('span').after(box) $('span').before(box2); // 删除元素 $('p').empty() </script> </body></html>