基础语法

Query 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
   //jQuery 代码...
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

JQuery选择器

jQuery 选择器详细介绍https://www.runoob.com/jquery/jquery-ref-selectors.html

jQuery 选择器测试网站https://www.runoob.com/jquery/jquery-ref-selectors.html

操作元素属性

attr(name|properties|key)-获取或设置元素属性

//属性表达式
var href_attr = $("a[href*='163']").attr("href");  //如果只传一个参数则为获取属性
alert(href_attr);

$("a[href*='163']").attr("href","http://www.163.com");  //设置元素属性值

//对于一个选择器若选中了多个元素，在执行attr获取对应属性值的时候，它默认会把第一个元素的href属性返回
var attr = $("a").attr("href");

获取属性值的时候，它会返回第一个符合要求的属性值，而设置属性值的时候，它是将所有选中的元素的属性进行赋值，这就是attr函数的使用办法。

removeAttr(name)-移除元素属性

$("a").removeAttr("href");//将当前页面中所有超链接的href属性移除，也就是超链接失效

操作元素的CSS样式

.important {
    font-weight:bold;
    font-size:xx-large;
}
 
.blue {
    color:blue;
}

css()-获取或设置匹配元素的样式属性
- css(“propertyname“,”value“); 设置指定的 CSS 属性
  
  $("p").css("background-color","yellow");
- css({“propertyname“:”value“,”propertyname“:”value“,…}); 设置多个 CSS 属性
  
  $("a").css({"color" : "red" , "font -weight" : "bold" , "font- style" : "italic"});

addClass()-为每个匹配的元素添加指定的类名

//向不同的元素添加 class 属性
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
//在 addClass() 方法中规定多个类
$("body div:first").addClass("important blue");

removeClass()-从所有匹配的元素中删除全部或者指定的类

//在不同的元素中删除指定的 class 属性
$("h1,h2,p").removeClass("blue");

设置元素内容

不加参数即为获取，加参数即为设置内容。

text() – 设置或返回所选元素的文本内容
html() – 设置或返回所选元素的内容（包括 HTML 标记）
val() – 设置或返回表单字段的值

//获取内容
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());   //Text: 这是段落中的 粗体 文本。
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());  //HTML: 这是段落中的 <b>粗体</b> 文本。
});
$("#btn3").click(function(){
  alert("值为: " + $("#input_test").val());  //值为: test(input中的值)
});

//设置内容
//测试网站：https://www.runoob.com/try/try.php?filename=tryjquery_dom_html_set
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});