js与jq基础笔记（持续添加）

1：高亮效果

//高亮效果：active为高亮效果
 $("li").click(function () {
        $(this).addClass("active");
        $(this).siblings().removeClass("active");

    });

2：鼠标附近显示提示框

//鼠标附近显示提示框,tourInterview为需要显示位置的名称，tishi为需要显示的内容，可以换成图片做成图片放大的效果
       function mousePosition(ev) {
        ev = ev || window.event;
        if (ev.pageX || ev.pageY) {
            return { x: ev.pageX, y: ev.pageY };
        }
        return {
            x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y: ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }//获取鼠标当前的位置
    $(".tourInterview").mouseover(function (e) {
        $(".tishi").text($(this).text());
        var mousePos = mousePosition(e);
        var xOffset = -100;
        var yOffset = 0;
        $(".tishi").css("display", "block").css("position", "absolute").css("top", (mousePos.y - yOffset) + "px").css("left", (mousePos.x + xOffset) + "px");
    });
    $("#tourCity,#tourInterview").mouseout(function () {
        $("#tishi").empty();
        $("#tishi").css("display", "none");
    });

3：跟随屏幕滑动的导航栏

//bookstrap 加jquery制作跟随屏幕滑动的导航栏,可以不使用bookstrap将removeClass("navbar-fixed-top topNav");改css为置顶部就好
    $(document).ready(function () {
        $(window).scroll(function () {
            var a = document.getElementById("eq").offsetTop;
            if (a + 400 >= $(window).scrollTop() && a + 400 < ($(window).scrollTop() + $(window).height())) {
                $("#scrolNav").removeClass("navbar-fixed-top topNav");
            }
            else {
                $("#scrolNav").addClass("navbar-fixed-top  topNav");
                $("#nav-last").css("padding-left", "0");
            }
        });
    });

4:限制输入的字数，并且对当前的数字的长度进行读取

//限制输入的字数，并且对当前的数字的长度进行读取,check100为当前剩余数字
   function checkcheckLength()
    {
        var a = $("#qatitle").val().length;

        if (keyDown == 8&&$("#check100").text()<=100)
        {

            if ($("#qatitle").val().length < 100) {
                $("#check100").text(100 - parseInt($("#qatitle").val().length));
            }

        }

        else if ($("#qatitle").val().length >= 0 && $("#qatitle").val().length < 101 && $("#check100").text()>0)
        {
            $("#check100").text(100 - parseInt($("#qatitle").val().length));

        }
        if ($("#qatitle").val().length == 0) {
            $("#check100").text(100);
        }


    }

5：jq判断checkbox选中

//jq判断checkbox选中

//方法一：
if ($("#checkbox-id").get(0).checked) {
    // do something
}
//方法二：
if($('#checkbox-id').is(':checked')) {
    // do something
}
//方法三：
if ($('#checkbox-id').attr('checked')) {
    // do something
}

//方法四：至少有一个选中
$("input:checkbox[name='Transfer']:checked").length > 0

6：js判断当前播放器播放状态：

//js判断当前播放器播放状态：
  $(".play").click(function () {
            var myvideo = document.getElementById("myvideo");
            if (myvideo.paused==false) {
                myvideo.pause();
                $(this).attr("class", "glyphicon glyphicon-play");
            }
            else
            {
                myvideo.play();
                $(this).attr("class", "glyphicon glyphicon-pause")
            }

        });

7

jq属性选择器
$("input[name='Transfer']")

js特定字符替换
string.replace(".","");

console.log（）直接在控制台显示值便于调试

jq 滑动回顶部的动画效果
  var speed=200;//滑动的速度（越大越慢）
        $('body,html').animate({ scrollTop: 0 }, speed);

8:设置select的选中

1、设置value为pxx的项选中
     $(".selector").val("pxx");
2、设置text为pxx的项选中
    $(".selector").find("option[text='pxx']").attr("selected",true);
    这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。
3、获取当前选中项的value
    $(".selector").val();
4、获取当前选中项的text
    $(".selector").find("option:selected").text();

9：js鼠标指针：cursor：

js鼠标指针：cursor：
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（北/西）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

10：js 使用useagent判断当前的浏览器设备

//js 使用useagent判断当前的浏览器设备

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

11:js获取当前的天数

js获取当前的天数
var mydate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

将字符串日期转化为日期格式ymd 年月日，d日，md月日

function getymd(dateStr, type) {
    if (dateStr != null) {
        var date = new Date(Date.parse(dateStr.replace(/-/g, "/")));
        var mm = date.getMonth() + 1;
        //月
        var dd = date.getDate();
        //日
        var yy = date.getFullYear();
        //年
        if (type == "d") {
            return dd;
        } else if (type == "md") {
            return mm + "-" + dd;
        } else if (type == "ymd") {
            return yy + "-" + mm + "-" + dd;
        }
    }
    else
    {
        return dateStr;
    }

}