jQuery工具方法和CSS属性及方法

目录

思维导图

​

1.$工具中的类方法（静态方法）

1.1 each() 遍历数组 对象 对象数组

1.2 trim() 去掉字符串两端的空格

2.jQuery属性和CSS

（1）属性

1.1 attr() 获取某个标签属性的值，或设置某个标签属性的值

1.2 removeAttr() 删除某个标签属性

1.3 addClass() 给某个标签添加class属性值

1.4 removeClass() 删除某个标签class属性值

1.5 prop() 和 attr() 类似，区别在于prop用于属性值为Boolean类型的情况下

1.6 html() 获取某一个标签体内容（该标签体中可以包含子标签）

1.7 text() 获取某一个标签体内容（该标签体不能包含子标签）

1.8 val() 获取或设置表单元素中的value值

（2）CSS

1.1

1.2位置

offset() 获取指定标签相对整个大容器（body）的一个相对距离（top left）

position() 获取指定标签相对于父标签的位置

scroll() 获取滚动条被滚去的距离

---

思维导图

 

1.$工具中的类方法（静态方法）

1.1 each() 遍历数组 对象 对象数组

//数组的定义
var arr = []
var arr = new Array();

//定义一个数组存储五个姓名
var name = ["张三","里斯","王五","蛮子","小六子"]
$.each(name, function(index, name) {
                //获取每一个元素
                console.log(index, name); //1
 
                console.log(name) //2
 
                console.log(name[index]) //3
            })
            //对象 {}
            var students = [{
                    "name": "张三",
                    "sex": "男",
                    "age": 18
                },
                {
                    "name": "张三2",
                    "sex": "女",
                    "age": 19
                }
            ]
            $.each(students,function(index,stu){
                $.each(stu,function(name,value){
                    console.log(name,value)
                })
            })

1.2 trim() 去掉字符串两端的空格

var str = "   123   ";
console.log(str.length)//6
console.log($.trim(str).length)//2
1.3 type() 判断值类型
console.log($.type("hhhh"))//String
console.log($.type(jQuery))//function
1.4 isArray() 判断是否是一个数组
console.log($.isArray())
1.5 isFunction() 判断是否是一个函数
console.log($.isFunction())
1.6 parseJSON() 将满足json定义的字符串转换成一个对象或者对象数组
var stu = '["aa","bb","cc"]';
// 通过parseJSON转换
var stuArr = $.parseJSON(stu)

2.jQuery属性和CSS

（1）属性

1.1 attr() 获取某个标签属性的值，或设置某个标签属性的值

//获取
console.log($("#oUl1>li:first").attr("id"))
//设置
$("#oUl1>li:first".attr("id","hh"))

1.2 removeAttr() 删除某个标签属性

$("#oUl1>li:first".removeAttr("id")

1.3 addClass() 给某个标签添加class属性值

$("#oUl1>li:eq(1)").addClass("demo");//demo设置的样式

1.4 removeClass() 删除某个标签class属性值

$("#oUl1>li:eq(1)").removeClass("demo1");

1.5 prop() 和 attr() 类似，区别在于prop用于属性值为Boolean类型的情况下

console.log($("#oUl1>li:first").prop("id"))

1.6 html() 获取某一个标签体内容（该标签体中可以包含子标签）

console.log($("#sid").parent().html())

1.7 text() 获取某一个标签体内容（该标签体不能包含子标签）

console.log($("#sid").parent().text())

1.8 val() 获取或设置表单元素中的value值

console.log($("#sid").parent().val())

（2）CSS

1.1

// 获取表格中第一行tr的背景颜色
// 复合属性：有多个值（背景，是否平铺等等）
console.log($("table>tbody>tr:first").css("backgroundColor"))

1.2位置

offset() 获取指定标签相对整个大容器（body）的一个相对距离（top left）

console.log($("#demo3").offset().left)
console.log($("#demo3").offset().top)

position() 获取指定标签相对于父标签的位置

console.log($("#demo3>div").position().top)
console.log($("#demo3>div").position().left)

scroll() 获取滚动条被滚去的距离

$(document).scroll(function() {
console.log($(this).scrollTop());
});