jQuery运用（1）

一、选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素    
$('.myClass') // 选择class为myClass的元素    
$('li') //选择所有的li元素    
$('#ul1 li') //选择id为为ul1元素下的所有li元素    
$('input[name=first]') // 选择name属性等于first的input元素

二、css操作

var res = $('ul>li');
    console.log(res);
    // 赋值\取值
// 赋值
// 给jQuery对象中每个标签设置一个或者多个样式
// parameter1:key,属性名称；
// para2.value,string类型，属性值
res.css('color', 'red');

// para1:对象类型，多个key-value构成样式对象
res.css({ 'color': 'red', 'font-size': '20px' });

// para1:key,string类型，属性名称
// para2:function
     // para1:该元素的索引
	 // para2：该元素该样式的旧值
// 返回值就是设置的样式的新值
res.css('font-size', function (index, value) {
    console.log(index);
    console.log(value);
    return 15 * (index + 1);
})

// 取值
// para1：string类型，样式名称
// 返回值：jQuery对象中第一个标签元素的该样式的值
var value = res.css('font-size');
console.log(value);

// para1：Array类型，多个样式名称构成的数组
// 返回值：对象，样式key-value形成的对象
var value2 = res.css(["font-size", "border", 'width']);
console.log(value2);

三、尺寸及位置

// width/height:内容content
// innnerWidth/innerHeight: 内容+内边距   content+padding
// outerWidth/outerHeight：内容+内边距+边框 content+padding+border
// 取值
var res = $('div');
console.log(res.height());
console.log(res.innerHeight());
console.log(res.outerHeight());

// 赋值
res.height(300);
res.innerHeight(300);
res.outerHeight(300);

// para1:function：
    // para1:标签的索引
    // para2:标签的原高度
// 返回值是设置的新高度
// res.height(function (index, value) {
//     return value + index * 50;
// })

// 取值
// 返回值是一个对象，包含left|top
// left：标签和文档左边缘之间的距离
// top： 标签和文档上边缘之间的距离（注意外边距合并（塌陷））
var offset = $('p').offset();
console.log(offset);

// 赋值
$('p').offset({ left: 200, top: 200 });
$('p').offset(function () { });

// 取值
// 返回值是一个对象，包含left|top
// left：标签和定位父标签左边界之间的距离
// top： 标签和定位父标签上边界之间的距离
// 只有取值没有赋值
var position = $('p').position();
console.log(position);

function getScokkDistance() {
    // 获取标签的滚动距离
    // scrollTop:竖直方向的滚动距离
    // scrollLeft:水平方向的滚动距离
    var scrollTop = $('section').scrollTop();
    console.log(scrollTop);

    // 赋值
    // 设置标签的滚动距离
    $('section').scrollTop(0);
}

四、事件操作