jQuery

jQuery是目前使用最广泛的javascript函数库。

JQuery 获取元素

常用的jQuery的选择器 获取需要操作的DOM元素，得到的结果是（JQ对象=>类数组集合），只有JQ对象才可以调取JQ提供的一操作DOM的方法。

$("#id属性") id选择器 选择某个id的元素，具有唯一性

$(function () {
  $("#btn").click(function () {
  });
});

$(".类名") 类选择器 选择某个或者是多个元素

$(".cls").css("backgroundColor", "yellow");
$(".cls").css("border", "1px solid red");


//设置某个元素的css样式属性值
.css("属性","值")

$("标签名字") 标签选择器 多个元素或者是某个元素

//页面加载的事件
$(function () {
  //根据id选择器获取按钮,添加点击事件
  $("#btn").click(function () {
    //根据标签选择器获取p标签
    $("p").text("我们都是p标签");
  });
});


.text()方法相当于DOM中的.innerText属性
对象.text() -> 获取该元素的文本内容
对象.text("值") -> 设置该元素的文本内容

$(选择器,选择器..) 并集选择器（多条件选择器）

$(function () {
  $("#btn").click(function () {
    $("#dv,p,.cls").css("backgroundColor", "orange");
  });
});

层次选择器（后代选择器）

$("A B") 后代选择器        //选择A元素内部的所有B元素 
$("A > B") 子选择器       //选择A元素内部的所有B子元素
$("#A~B") 后面的全部元素   //获取的是A这个父级元素后面的所有的兄弟元素（B）
$("#A+B") 下一个元素      //获取的是div后面直接的兄弟元素


$("#btn").click(function () {
  // 获取的是div这个父级元素中所有span标签(直接的子元素,孙子元素)
  $("#div span").css("backgroundColor","red");

  // 获取的是div这个父级元素中直接的子元素
  $("#div>span").css("backgroundColor","red");

  // 获取的是div这个父级元素后面的所有的兄弟元素---span
  $("#div~span").css("backgroundColor","red");

  // 获取的是div后面直接的兄弟元素
  $("#div+span").css("backgroundColor","red");
});

链式操作

jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

$('div').find('h3').eq(2).html('Hello');


　$('div') //找到div元素

　　　.find('h3') //选择其中的h3元素

　　　.eq(2) //选择第3个h3元素

　　　.html('Hello'); //将它的内容改为Hello

创建元素

var link=$("");
  link.text("baidu")；

元素的操作：移动

jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

　　$('div').insertAfter($('p'));

　$('p').after($('div'));

修改元素

$("button").click(function(){
  $("img").attr("width","180");
});