国内可以访问jQuery库CDN有：
- 官方的 https://code.jquery.com/
- 微软的 https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview
- cdnjs的 https://cdnjs.cloudflare.com
使用方法，将scr的路径由相对路径换成下载的URL
text() 方法，获取元素文本，也可以设置元素的文本值。相当于JavaScript中的textContent。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素文本</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script> </head> <body> <p>Hello World</p> <script> alert($('p').text()); $('p').text("利永贞技术网"); </script> </body> </html>
val() 方法，获取和修改有value属性的元素，有value属性的元素有input、botton、select等。相当于JavaScript中的value。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素文本</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script> </head> <body> <input type="text" name="hello" value="Hello world" id="hello"> <script> alert($("[name='hello']").val()); $('input:text').val("利永贞技术网"); </script> </body> </html>
attr() 方法，可以获取修改元素属性。
获取属性，使用：attr("属性名") 相当于JavaScript中的getAttribute()。
设置属性，使用：attr("属性名","属性值") 相当于JavaScript中的setAttribute()。
删除属性，使用：removeAttr("属性名") 相当于JavaScript中的removeAttribute()。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素文本</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script> </head> <body> <input type="text" name="hello" value="Hello world" id="hello"> <script> alert($("[name='hello']").val()); $('input:text').val("利永贞技术网"); </script> </body> </html>
获取CSS使用方法css("CSS属性名称")， 示例css("color")
设置CSS使用方法css("CSS属性名称","属性值")， 示例css("color","blue")
如果要设置多个CSS属性，使用{}花括号括起属性名称和值，示例css({'color': 'red', 'font-size': '28px'})
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取修改CSS</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script> </head> <body> <p id="one" style="color:red">Hello world</p> <p id="two">Hello world</p> <script> alert($('#one').css("color")); $("#one").css("color", "blue"); $("#two").css({'color': 'red', 'font-size': '28px'}); </script> </body> </html>
通过获取父节点，还可以获取父节点的父节点。
有3个常用方法：
| 方法 | 说明 |
| parent() | 选取父节点 |
| parents() | 选取所有父节点 |
| parentsUntil("div") | 选取所有父节点，但不包含后面指定的节点及指定节点的父级……。 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>父节点</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script> <style> .box{ border: 1px solid blueviolet; padding: 1px; margin-bottom: 12px; } </style> </head> <body> <div> <ul id="ul"> <li id="a">油条</li> <li id="b">包子</li> <li id="c">米饺</li> <li id="d"><a>鱼粉</a></li> </ul> </div> <script> $('a').parentsUntil("div").attr("class", "box"); </script> </body> </html>