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( );        //获取日期与时间