jquery_(工具属性CSS)_综合

jquery_(工具&属性&CSS)

本期类容

在这里插入图片描述

$工具方法

$each();遍历数组、对象、对象数组中的数据

//定义数组 1

var name=["小一","小二","小三","小四"];

//遍历数组 1

$.each(name,function(i,n){
    //里面的i（下标）n（元素） console.log(n)//输出元素
})

//定义对象 2

var stu={
    "name":"小三","age":18};

//遍历对象 2

$.each(stu,function(a,b){
    //里面的a（下标）b（元素）console.log(b)//输出元素
})

$trim();去除字符串两边的空格

var str=" zking "；console.log(str.length)//7个字节console.log($.trim(str).length)//5个字节

//这个方法不能除中间空格

$.type得到数据的类型

console.log(12);//得到number
console.log("aa");//得到string

$.isArray判断是否是数组

var stu={
      "name":"aa","age":18}
console.log($.isArray(stu))//falsh

$.isFunction判断是否是函数
```
console.info($.isFunction(myf))
```

$.parseJSON()解析json字符串转换为js对象/数组

//解析对象字符串
var str='{"name":"aa","age":18}'
console.log($.type(str))//string
var stu=$.parseJSON(str)
conlose.log($.type(str))//object
//遍历
$.each(str.function(a,b){
      
conlose.log(b)
})

2.jquery属性

attr获取某个标签属性的值，或者设置某个标签属性的值

//取值
var a=$("#baidu").attr("href");//获取href属性所对应的值
console.log(h)
//设值
$("#baidu").attr("href","http://www.baidu.com")//给href属性设置相应属性值

removeAttr()删除某个标签属性

$("#baidu").removeAttr("href")

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

$("#baidu").addClass("bai")//会进行样式的叠加

removeClass删除某个标签class属性值

$("#baidu").removeClass()//只移除值class仍然在

prop与attr的区别:全选/取消全选案列

爱好: <input type="checkbox" class="xx" value="eat" />吃饭<input type="checkbox" class="xx" value="sleep" />睡觉<input type="checkbox" class="xx" value="playDD" />打豆豆<input type="button" id="all" value="全选" /><input type="button" id="notall" value="取消全选" />

效果: 在这里插入图片描述

prop语法和attr类似，列如:

$("#baidu").attr("name","aa")
$("#baidu").prop("name","bb")

区别在于prop多用于属性值为boolean类型的情况:列如全选/取消全选

$("#all").click(function(){
      
$(".xx").prop("checked",false);
})

3.jQuery CSS

单个属性

元素.CSS("属性名","属性值")列如:$("p").css("background","yellow")

多个属性

元素.CSS({
        "属性名":"属性值","属性名":"属性值"})列如:$("p").CSS({
        "backgeoung":"pink","color":"blue"})

offset相对整个大容器的相对位置

var a=$("#big").offset()//大容器
console.log(a.top,a.left)--50 50

scroLLXX滚动条到顶部/左侧距离

$("#returnTop").click(function(){
        
//获取滚动条的位置
var s=$("body,html").scrollTop();
console,info(s);
//设置滚动条的位置(返回顶部)
$("body,html").scrollTop(0);
})

谢谢浏览