jQuery方法和工具
//1. $.each(): 遍历数组或对象中的数据
var obj = {
name: 'Tom',
setName: function (name) {
this.name = name
}
}
$.each(obj, function (key, value) {
console.log(key, value)
})
//2. $.trim(): 去除字符串两边的空格
//3. $.type(obj): 得到数据的类型
console.log($.type($)) // 'function'
//4. $.isArray(obj): 判断是否是数组
console.log($.isArray($('body')), $.isArray([])) // false true
//5. $.isFunction(obj): 判断是否是函数
console.log($.isFunction($)) // true
//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}' // json对象: {}
// json对象===>JS对象
console.log($.parseJSON(json))
json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
// json数组===>JS数组
console.log($.parseJSON(json))
/*
JSON.parse(jsonString) json字符串--->js对象/数组
JSON.stringify(jsObj/jsArr) js对象/数组--->json字符串
7：
var $contents = $("#container>div")
var currentindex = 0//当前显示的下标
$("#tab>li").click(function () {
//隐藏当前显示的DIV
$contents[currentindex].style.display="none"
//显示当前被点击元素
//获取当前被点击元素的index
var index=$(this).index()
$contents[index].style.display="block"
//更新当前显示的下标
currentindex=index
})
8：
1. 操作任意属性
attr()//对于属性值为非boolean的操作
removeAttr()
prop()//对于属性值为boolean的操作例如 checked
2. 操作class属性
addClass()
removeClass()
3. 操作HTML代码/文本/值
html()
val()
////////////////练习代码如下
//1. 读取第一个div的title属性
// console.log($('div:first').attr('title')) // one
//2. 给所有的div设置name属性(value为atguigu)
// $('div').attr('name', 'atguigu')
//3. 移除所有div的title属性
// $('div').removeAttr('title')
//4. 给所有的div设置class='guiguClass'
//$('div').attr('class', 'guiguClass')
//5. 给所有的div添加class='abc'
//$('div').addClass('abc')
//6. 移除所有div的guiguClass的class
//$('div').removeClass('guiguClass')
//7. 得到最后一个li的标签体文本
//console.log($('li:last').html())
//8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
//$('li:first').html('<h1>mmmmmmmmm</h1>')
//9. 得到输入框中的value值
//console.log($(':text').val()) // 读取
//10. 将输入框的值设置为atguigu
//$(':text').val('atguigu') // 设置 读写合一
//11. 点击'全选'按钮实现全选
// attr(): 操作属性值为非布尔值的属性
// prop(): 专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function () {
$checkboxs.prop('checked', true)
})
//12. 点击'全不选'按钮实现全不选
$('button:last').click(function () {
$checkboxs.prop('checked', false)
})
13 设置css样式/读取css值
css() $(“div”).css()//读写合一
$("p:eq(1)").css({
"color" :"#ff0011",
"background" : "blue",
"width" : 300,
"height" :30
})