js,jquery笔记

1.测试是否安装好jquery

$(document).ready(function(){

　　alert('1');

});

$(function(){

　　alert('1');

});

两个效果一样

2.获取Class名称，或者给予Div的class

$('div li a').attr('class');  获取class

$('div li a').attr('class','nav'); 

$().addClass()

$().removeClass();

组合写法：$('.cat_brand_select a i').removeClass('icon-xia').addClass('icon-shang'); 或$('.cat_brand_select a i').removeClass('icon-shang').addClass('icon-xia');

3.

document.getElementById('user_id').innerHTML = str;

var keywordUser = document.forms['theForm'].elements['keywordUser'].value;  获取form下某个input 的值

 4.js写法

$(document).ready(function(){
    alert(f.call('1'));
});

var f = new Object;    // 这个必须要
f.call = function (obj){
    return obj;
}

 

5.ajax请求过来的html，click与on

 jquery创建对象的时候会先读取父级元素的所有html并创建对象，这样生的html也被创建了节点，其他方式是找不到新生元素节点的，可以用

$("#imgView").on('click','.ajaxPage li a',function(){
            alert($(this).attr('href'))
            $("#imgView").html('1');
            return false;
        })

正常的可以用click

 

6.图片水平，垂直居中（不设置图片width属性）

js

function Thumb(){
        // 获取图片实际宽度
        parent.imgH = document.getElementById("thumb").naturalHeight;
        parent.imgW = document.getElementById("thumb").naturalWidth;

        console.log(h);
        if(imgW>800){
            // 缩放图片比例
            $("#thumb").css({"width":'60%'});
            // 获取图片展示宽度
            var w = $("#thumb").width();
            var h = $("#thumb").height();
            $("#thumb").css({"margin-left":-(w/2),"top":screenH/2-h/2});
        }else{
            $("#thumb").css({"margin-left":-imgW/2,"top":screenH/2-imgH/2});
        }


    }

<div class="col-md-8 main-center" >
        <div class="main-center-img" style="">
            <img alt="" src="{$data.img.thumb}" id="thumb" style="display: inline-block; vertical-align: middle;" />
        </div>
    </div>

<style>
.main-center-img{text-align: center; width: 100%;height:100%;  border: green solid 1px; position: relative}
        .main-center-img img{position: absolute; top: 50%; left: 50%;}
</style>