jQuery(文档处理/css/属性)

web(2.12-2.13)

一、HTML/文本/值

//html([val|fn])    相当于js  innerHTML  
//text([val|fn])     相当于js   innerText
//val([val|fn|arr])

三者回调函数可设置，可获取，参数一致
function(index,oldvalue){
   //index 索引值  oldvalue 先前的值
   return value;   //返回新设置的值
}

二、css

1. css尺寸

height([val/fn]),width([val/fn]);
即可设置也可获取

//获取(以height为例)
$("ele").height();   //获取到的值不含像素单位
//设置(以height为例)
$("ele").height(300);  //设置的值后边不带单位

//关于其回调函数（以width为例）
$("ele").width(function(index,oldvalue){
    //index 索引值，oldvalue 先前的width值
    return 300；//返回值为要新设置的width;
})

innerHeight(),innerWidth();

//包括元素的补白，不包括边框
$("ele").innerHeight();  
$("ele").innerWidth();

outerHeight(),outerWidth();

//包括元素的补白和边框
$(".block1").outerHeight();
$(".block1").outerWidth();
//当其参数为true时，包括外边距
$(".block1").outerHeight(true);
$(".block1").outerWidth(true);

2.css position

 //offset([coordinates]) ,可获取，可设置
 // 设置offset  自动添加  相对定位
 //offset()  返回值是一个对象  {left:0,top:0}
 $("ele").offset();     //获取
  $("ele").offset({left:200,top:500});  //设置
  
  //position()相对于当前的父元素的偏移  返回值{left:0,top:0}
  $("ele").position();

 //scrollTop([val]),scrollLeft([val]),可获取，可设置
  $(window).scrollTop(100);    //设置
  $(window).scrollLeft(300);   
  $(window).scrollTop();   //获取
  $(window).scrollLeft();

3. css() :操作元素css样式

 // 获取时参数是获取的css的样式名称, 不能获取多个样式
   $("ele").css("border"));  //获取border样式
 
    $("ele").css("color","red");  //设置颜色属性
    //设置多个属性值，以对象的形式设置
    $("ele").css({
        color:"blue",
        backgroundColor:"red"
    });

4.CSS 类

addClass(class|fn)    //添加类
removeClass([class|fn])   //移除类
toggleClass(class|fn[,sw])   //类别切换，有该类则移除，没有则添加

三、文档处理

内部插入

append(content|fn),appendTo(content); 追加到当前元素内容之后

  var ele=$("<div></div>");   //创建元素
  ele.addClass("child");      //添加类
   //将ele追加到类名为block的元素的内容之后
  $(".block").append(ele);    //将后者加到前者内容之后
  //也可写为
  $(".block").append(function(){
      return  ele; 
  })   
  //也可写为  
  $("ele").appendTo(”.block“);  //将前者加到后者内容之后

prepend(content|fn),prependTo(content)；追加到当前元素内容之前，使用方法同append，appendTo;

外部插入

before(content|fn),insertBefore(content); 追加到指定元素之前

 var ele=$("<div class='child2'></div>");
// $(".child1").before(ele);  将后者ele追加到前者".child1"前面
//也可写为
// $(".child1").before(function(index){
      //参数，index 索引值
//     return ele;
// }); 
//也可写为 
 ele.insertBefore(".child1");  // 将前者ele追加到后者".child1"前面

after(content|fn),insertAfter(content); 追加到指定元素之后，使用方法与 before(),insertBefore()相同；

after()方法，before()方法，若获取到多个元素，只对获取到的其中一个元素进行插入操作

包裹

wrap(html|ele|fn),wrapAll(html|ele)

//wrap(html/ele/fn)：将匹配到的元素一对一进行包含
     var ele=$("<div></div>");
    // $("p").wrap($("<div></div>"));   //方法1
    // $("p").wrap(ele);                //方法2
     $("p").wrap(function(index){       //方法3
        console.log(index);
        return ele;
    })

//wrapAll(html/ele)：将匹配到的所有元素包含在一个容器下
//$("p").wrapAll($("<div></div>"));       //方法1
 $("p").wrapAll(ele);                     //方法2

unwrap()

$(“p”).unwrap();
// 移除指定元素的父元素，原有的和通过wrap添加的全部移除
wrapInner(html|ele|fn)

   var ele=$("<p></p>");
   $("p").wrapInner(ele);  //用指定容器包裹获得元素的内容
   //也可写为
   $("p").wrapInner(function(index){
       //参数 index 索引值
      return ele;
   })

替换

replaceWith(content|fn) ,replaceAll(selector)

<div class="box">点击输入</div>
<div class="box">点击输入</div>

// var ele=$("<input type='text' value='请输入...' />");
// $(".box").replaceWith(ele);     //将所有".box"元素用ele替换

//关于回调函数参数 index 索引值 value html值
      $(".box").replaceWith(function(index,value){
          var ele=$("<input type='text' value='请输入...' />");
          console.log(index, value);
          ele.val(value);    //替换同时，将原html值赋给替换元素的value
          return  ele;    //返回替换的新元素
      })

// ele.replaceAll($(".box"));   //用ele替换所有的”.box“元素

复制

clone([Even[,deepEven]])；参数： true(深度克隆克隆dom元素以及事件之类) false(浅克隆只是克隆了dom元素)（默认false）

 $(".hit").click(function(){
          console.log(1);
      });

//$(".hit").clone().appendTo($("body"));   //克隆的元素没有点击事件
 //加上true参数后,复制的元素有了点击事件
 $(".hit").clone(true).appendTo($("body"));

删除

empty(),remove([expr]),detach([expr])

 <ul>
    <li class="lis">1</li>
    <li>2
       <span>span</span>
    </li>
    <li>3</li>
</ul>
 // $("ul").empty();  //删除匹配元素的所有子节点，匹配元素仍存在
 
 // $("ul>li>span").remove();   //删除匹配的元素
//  $(".lis").remove();     //删除类名为”lis“的元素
//关于参数
    $("ul>li").remove(".lis");   //删除ul下类名为”lis“的li

  //jquery 对象里面的没有删除   只是界面没有了   数据和事件之类的还在
   console.log($("ul>li").detach(".lis"));      

 //jquery 对象里面的被删除
    $(".lis").detach();
   console.log($("ul>li"));

四、属性

//attr(name|pro|key,val|fn)
//prop(n|p|k,v|fn)
//前两者回调函数，参数一致
function(index,oldvalue){
   //index 索引值  oldvalue 先前元素的属性值
   return value;   //返回新设置的值
}
//data(n/p/k,val)    //没有回调函数
以上三者均可设置元素的自带属性和自定义属性，可设置，可获取
prop和data设置的自定义属性在行内看不到，但可以获取；

//removeProp(name)   移除属性
//removeAttr(name)     移除属性值

$("input").removeAttr("type");   //直接移除type属性，不显示
 $("input").removeProp("type");  //输出type="undefined"

来源：CSDN

作者：奢คิดถึง

链接：https://blog.csdn.net/pet_ch/article/details/104313198

标签

css

jquery

css样式