前端技术（JQuery）学习笔记（二）JQuery操作html元素的属性、对html元素的类（class）属性、对html元素的css样式、JQuery多选反选以及JQuery对html元素的追加

忘是亡心i 2022-05-25 03:57 277阅读 0赞

一、前期内容小结  
1、JQuery，一套功能极其强大的函数库，利用这个函数库可以大大提高开发效率  
2、核心函数，`jQuery---->$`  
3、JQuery代码往哪里写，主要的就是在script标签内编写  
4、文档准备就绪事件  
①、`$(docment).ready(function(){//JQuery|js代码});`  
②、`$(function(){//jqueyr|js代码});`  
5、JQuery选择器  
`$("#id1") ===> 匹配一个id属性值的一个元素 $("div") ===> 匹配所有的html元素`  
6、对html元素的值进行操作  
①、html()：设置|获取 html元素的内容（值）`$("#id1").html(); innerHTML`  
②、text()：设置|获取 html元素的内容（值）`$("#id1").html("我是jq设置的值");innerText`  
③、val（）:设置|获取html表单元素的内容（值）`$("#id1").html(function(){}) value;`

7、注意JQuery对象和JS原生(DOM)对象之间的类型转化  
①、将JQuery对象转化成DOM对象 jq对象.get(0); jq对象\[0\];  
②、将DOM对象转化成JQuer对象 $(dom对象） jq对象

直接写this，这个this是dom对象，要希望是jquery对象的话，$(this);

二、  
1、JQuery操作html元素的属性  
对html属性的操作通过jquery对象的attr属性  
①、设置html元素的属性值 jqObj.attr(“attrName”,”attrValue”);  
②、获取html元素的属性值 jqObj.attr(“attrName”);  
③、通过json数据，对html元素一次性设置多个属性，jqObj.attr(\{json\});

![这里写图片描述][Image 1]

2、JQuery对html元素的类属性的相关操作 注意：要结合css样式表体现样式  
①、通过jqObjd对象的addClass（）方法为html元素添加class属性值，同时与css样式合作设置html元素的样式  
②、通过jqObj对象的removeClass()方法删除html元素中的class属性  
③、通过jqObj对象的toggleClass（）方法，对html元素的class属性进行开关操作

3、JQuery对html元素的css样式的操作  
①、获取html元素的相关样式 var style=jqObj.css(“样式名称”); 返回值即是对应样式属性的值  
②、设置html元素的相关样式 jqObj.css(“样式名称”,”样式值”); 设置样式  
③、通过函数给html元素添加样式 jqObj.css(“样式名称”,function()\{\}); 将函数的返回值设置为css的样式值  
好处，可以在函数中对css样式值进行编辑

![这里写图片描述][Image 1]

4、通过jquery对象的prop方法设置或者是获取单一属性的值（复选框和下拉列表框的值）  
①、复选框选择器  
`$("input[type='checkbox']").prop("checked");`  
提别注意：若复选框是选中状态的话，返回值是true。若复选框没有被选中，那么这个方法的方法值false  
②、我们可以通过json格式数据对相关属性进行设置，设置多个属性

$("input[type='checkbox']").prop(json);                                
    $("input[type='checkbox']").prop({});                              
    $("input[type='checkbox']").prop({                             
        checked:false,//设置不选中状态 
        disabled:true//设置不可以编辑状态，即禁用状态 注意，所有的表单元素都由这个属性 
    });

③、关于prop方法的回调函数，回调函数有两个可选参数，第一个参数时html元素的索引下标值（从0开始），第二个参数是元素的原始属性值

$("input[type='checkbox']").prop("checked",function(index,val){ });                             
    index:即元素的索引下标值                             
    val：元素的原始值                              
    $("input[type='checkbox']").prop("checked",function (i,val) {                               
        return !val;                                
    });

④、通过jquery获取哪个下拉选项被选中  
var selectValue=$(“select option:selected”).text();

![这里写图片描述][Image 1]

5、JQuery对html元素的追加  
通过JQuery很容易地最加新元素即内容。JQuery提供了四种追加元素|内容的方法  
append() - 在被选元素的结尾插入内容  
prepend() - 在被选元素的开头插入内容  
after() - 在被选元素之后插入内容  
before() - 在被选元素之前插入内容  
![这里写图片描述][Image 1]

[Image 1]: