JQ css操作+与DOM转换+伪类选择器篇

JQ 基础

• Jquery 是对javascript的封装库, 可以让书写JS更快速更高效

  jq 1.x.x 支持低版本的ie浏览器

  jq 2.x.x 不支持低版本的ie 较稳定的版本

  jq 3.x.x 也不支持ie低版本

JQ获取元素

• 语法:

  $(“选择器”);

  返回值: 是一个jquery对象

  **注：**只要通过$()方法, 得到的一定是一个jq对象, 而不是dom元素或者元素的集合;

  jq对象 有自己的方法和属性, 如果当前得到的是一个jq对象, 那么只能去使用jq提供的方法和属性, 不能再用之前的任何js的方法和属性来操作jq对象

  var a = document.getElementById("div1");
  a.style.backgroundColor = "red";
  
  var c = $("#div1");
  var d = $("ul li");

JQ操作css

• 语法:

  1. jq对象.css();

  该方法既可以设置样式, 也可以获取样式

  2. jq对象.css(“样式名”, “样式值”);

     设置单一样式

  3. jq对象.css({

  ​ 样式名1:“样式值1”,

  ​ 样式名2:“样式值2”,

  ​ …

  ​ });

  设置多个样式

  4. jq对象.css(“样式名”);

     获取css样式的值，返回值: 样式值

  5. 注意:

     如果设置css样式, 是给jq对象里的所有dom元素设置。如果获取css样式, 只获取jq对象里第一个dom元素的样式

  6. 例：

     var div1 = $("#div1");
     div1.css("background", "pink");
     var styleObj = {
         fontSize:"30px",
         lineHeight:"200px",
         color:"yellow",
         borderRadius:"50%",
         textAlign:"center"
     };
     styleObj.boxShadow = "10px 10px 20px 5px green";
     div1.css(styleObj);
     console.log(div1.css("box-shadow"), div1.css("background"), div1.css("color"), div1.css("width"), div1.css("line-height"));
     
     var lis = $("ul li");
     lis.css("background-color", "greenyellow");
     

JQ对象与DOM元素转换

• dom元素转jq对象

  直接把一个dom元素放进$()里, 返回值就是jq对象

  $(dom元素) 返回值: jq对象

• jq对象转dom元素

  jq对象是以数组形式存在的对象, 里面存储了dom元素, 所以只需要通过下标从jq对象里取出对应的值, 就是取到了dom元素

  var div1 = document.getElementById("div1");
  console.log(div1);
  var jqDiv1 = $(div1);
  jqDiv1.css("background-color", "red");
  console.log(jqDiv1);
  jqDiv1[0].style.color = "blue";
  

JQ里常用的伪类选择器

// :first 找到若干元素里的第一个
$("li:first").css("background-color", "red");
// :last 找到若干元素里的最后一个
$("li:last").css("background-color", "blue");
// :even 找到若干元素里序号为偶数的元素, 位置从0开始算
$("li:even").css("background-color", "pink");
// :odd 找到若干元素里序号为偶数的元素, 位置从0开始算
$("li:odd").css("background-color", "green");
// :eq(n) 找到若干元素里需要为n的元素, 位置从0开始算
$("li:eq(5)").css("background-color", "red");
// :gt(index) 找到若干元素里位置大于index的元素, 位置从0开始,不包含index位置上的元素
$("li:gt(5)").css("background-color", "red");
// :lt(index) 找到若干元素里位置小于index的元素, 位置从0开始,不包含index位置上的元素
$("li:lt(5)").css("background-color", "yellow");
// :hidden 找到隐藏的元素
$(".bbb:hidden")
// :visible 找到显示的元素
$(".aaa:visible")

JQ里与表单有关的伪类选择器

// :input 找到所有的表单控件 不仅仅指的是input标签类型的
$(":input");

// :text 找到type属性值为 text 的表单控件
$(":text");
// :password  找到type属性值为 password 的表单控件
$(":password");
// :radio	找到type属性值为 radio 的表单控件
$(":radio");
// :checkbox	找到type属性值为 checkbox 的表单控件
$(":checkbox");
// :submit	找到type属性值为 submit 的表单控件
$(":submit");
// :reset	找到type属性值为 reset 的表单控件
$(":reset");
// :button	找到type属性值为 button 的表单控件
$(":button");

// :enabled 找到所有可用的控件
$(".f1>:enabled");
// :disabled 找到所有不可用的控件
$(".f1>:disabled");
// :checked 找到所有被选中的控件
$(".f1>:checked");