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

一、前期内容小结
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});

这里写图片描述

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样式值进行编辑

这里写图片描述

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();

这里写图片描述

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

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

猜你喜欢