web框架之Jqeury基本使用

一 Jquery基本使用

### jq: http://jquery.cuishifeng.cn/ ###

1.1 对象

var $box = $('css3选择器语法')

// js与jq对象相互转化
// jq=>js, 就是通过数组的索引 $box[0]
// js=>jq, 就是将js对象用$()包起来
console.log(box, $(box), $(box)[0]);  // js  jq  js

1.2 选择器

$('css3选择器语法')

1.3 事件

$box.事件名(fn)

$box.on('事件名', fn)

1.4 操作css样式

$box.css('样式名')  // 获取
$box.css('样式名', '样式值')  // 单一设置或修改
$box.css({   // 多项设置或修改
    '样式名1': '样式值1',
    ...
    '样式名n': '样式值n'
})
$box.addClass('类名')  // 添加类名
$box.removeClass('类名')  // 移除类名
$box.toggleClass('类名')  // 切换类名

1.5 操作文本

取: $box.text()   赋: $box.text('内容')
取: $box.html()   赋: $box.html('<b>内容</b>')
取: $inp.val()   赋: $inp.val('内容')

取: $img.attr("全局属性名(src|class|style)")   
赋: $img.attr("全局属性名(src|class|style)", "新值") 

1.6 文档操作

// 1.创建标签
var $box = $('<div class="box"></div>')

// 2.设置
var $p = $('<p></p>')
$p.click(function() {})  // 为jq创建的标签添加事件

// 3.位置操作
$('body').append($box)  // 在body最后插入box
$('body').prepend($box)  // 在body最前插入box
$('body').prepend("<b></b>")  // 在body最前插入b标签

$box.after($p);  // 在box后插入p
$box.before($p);  // 在box前插入p

// 4.自身删除
res = $p.remove()  // p将自己删除,结果res不保留事件
res = $p.detach()  // p将自己删除,结果res保留事件
// 接收操作的返回值,方便下次使用(eg:回档)

1.7 jq动画

// 优点: 1.可以知道动画结束的标识(结束的回调函数); 2.可以利用jq动画插件完成复杂的动画
// box在自己被点击时,自己完成边界圆角变成50%的动画
// 参数: {动画的样式们,是个字典}, 动画持续的时间, 动画结束的回调函数
$box.click(function() {
    $(this).animate({
        borderRadius: "50%"
    }, 1000, function() {
        console.log("动画结束的标识");
    });
});