jQuery进阶

十三. jq书写代码的3种位置

"""js中等待页面加载完毕"""
# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

十四. 动画效果

十五. jq实现类始于js中数组对象方法.forEach()或者.map()的.each方法: 2种.each方法实现方式

    
    
    


1
2
3
4
5
6
7
8
9
10

十六. jq实现隐藏的标签属性

/*
$('div').data('info', 'value');
$('div').first().data('info');
$('div').last().removeData('info')
*/

$('div').data('info', '回来吧，我原谅你了!');  // 设置让标签帮我们存储数据 并且用户肉眼看不见
$('div').first().data('info');      // 查看
$('div').last().data('info');
$('div').last().removeData('info')  // 移除
$('div').last().data('info');

总结

# jq书写代码的3种位置:
    第一二重: head中, 需要预加载
        $(document).ready(function () {})
        $(function () {})

    第三种: body底部可以直接书写

# 动画效果:  最后display会等于none
    隐藏: jq对象.hide(mesc)
    展现: jq对象.show(mesc)
    上卷: jq对象.slideUp(mesc)
    下展: jq对象.slideDown(mesc)
    淡出: jq对象.fadeIn(mesc)
    淡入: jq对象.fadeOut(mesc)
    透明度渐变: jq对象.fadeTo(mesc, opacity)

# jq实现类始于js中数组对象方法.forEach()或者.map()的.each方法:  2种.each方法实现方式
    第一种:
        $('div').each(function (index, obj) {})
        $([1, 2, 3]).each(function (index, obj) {})
    第二种:
        $.($('div'), function (index, obj) {})
        $.([1, 2, 3], function (index, obj) {})
    提示: 2者对任意类型的对象, 都可以进行遍历, 使用each就替代掉了for循环遍历取值
    参数: index表示获取到的标签对象obj索引位置. obj就是索引对象. 其中index,和obj参数都是可选的.

# jq实现隐藏的标签属性:
    设置: .data(attrName, attrValue)
    获取: .data(attrName)
    删除: .removeData(attrName)

十七. js里定义的$ 和jquery的$冲突解决

// 1. 解决多个库变量名冲突的方法: 将jQuery的$变量控制权交给index.js
jQuery.noConflict(); // Conflict,中文:冲突,读音:[/ˈkɒnflɪkt/]
console.log($);

// 2. JQuery使用自制性函数: 将jQuery对象当作形参赋值给$符
(function($) {
	$(document).ready(function() {
		console.log($);
		// 使用id选择器: 使用jquery下的css方法,为box文本设置红色字体
		$('#box').css('color','red');
	});
})(jQuery);