JavaScript随手笔记

最新推荐文章于 2023-04-11 21:16:08 发布

sonox_m

最新推荐文章于 2023-04-11 21:16:08 发布

阅读量161

点赞数

分类专栏：学习笔记 JavaScript&jquery

本文链接：https://blog.csdn.net/qq_39757501/article/details/80253341

版权

学习笔记同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript&jquery

1 篇文章 0 订阅

订阅专栏

创建以及定义对象

    var user=new Object();
        user.firstName="brad";
        user.lastName="daylery";
        user.getFullName=makeFullName;
        function makeFullName(){
            return this.firstName+" "+this.lastName;
        }
        var user2={'firstName':'test','lastName':'testName','getFullName':makeFullName};
        //定义对象模式
        function User(first,last){
            this.first=first;
            this.last=last;
            this.getFullName=function(){
                return this.first+" "+this.last;
            }
        }
            function Userp(first,last){
            this.first=first;
            this.last=last;
        }
        //使用原型对象创建,可以给已经创建的对象增加属性
        Userp.prototype={
            getFullName:function(){
                return this.first+" "+this.last;
            }
        }
        var user3=new User('userfirstName','userlastName');
        var user4=new Userp('userPro','userlastPro');
            document.write(user.getFullName()+user2.getFullName()+" "+user3.getFullName()+user4.getFullName());

对于函数来说,比如makeFullName:代表函数本事,makeFullName():代表函数返回值
DOM对象常用属性与方法

判断对象为DOM对象还是Jquery对象
判断是否是jquery对象使用if(obj,jquery)判断对象是否具有jquery属性

判断是否是DOM对象使用if(obj,nodeType)判断对象是否具有nodeType属性

Jquery对象与DOM对象之间进行转换
使用get()方法返回jquery对象的js版本
var dom=jquery.get();
将DOM对象包装成Jquery对象:
var jquery=$(dom);
在js中访问Dom对象
1.根据ID查找DOM
var con=document.getElementById(“domID”);
2.根据类名查找DOM
var cons=document.getElementsByClassName(“domID”); //返回一个数组
3.根据标签名查看DOM
var cons=document.getElementsByTagName(“div”);
Jquery选择器

$(selector)
如$("#myElement"):获取id为myElement的DOM对象
对于特殊字符需要使用转义字符如id为:my.Element 获取为$("#my\\.Element")
1.基本选择器:
    $("*"):选择所有html元素
    $(".class"):根据类选择元素
    $("#id"):根据id选择元素
    $("element"):根据标签选择元素
    $("element1,element2...."):选择多个标签元素,使用逗号分隔
    $("element.class"):根据标签和类选择元素
2.属性选择器
    $([attr=value]):选择属性为value的元素
    例:
$("input[value=0]")选择value为0的所有<input>元素
    $([atrr*=value])   :选择属性包含value的属性
    例:
    $("p[class*=Content]") :选择class属性中包含Content的所有<p>元素
    $("attr^=value"):选择属性以value开头的元素
    $("imag[src^='icons\\/']"):选择img中src以icons开头的元素
    ....省略
    3.内容选择器:
    ....
    4.层次选择器:
    ...
    5.表单选择器
    ..
    6:可视性选择器
    ..
    7.筛选选择器
    ..
    jquery中each方法:
    .each(fuction):可以遍历jquery对象中的所有元素,并且对每个元素执行指定操作
    例:
    $("p").each(function(idx){    //idx为索引号
        $(this).html("this is a paragraph"+idx)
    })

    jquery中的map方法:方法map也迭代jquery中的每个元素,方法与each类似,但是存在一个不同是:.each返回他的jquery操作对象,而.map返回一个新的jquery对象,其中包含每次迭代返回值

js中有Screen对象,可以通过screen.width;screen.height来获取屏幕尺寸
获取可供网页操作的实际使用区域:
var pageWidth=window.innerWidth;
var pageHeight-window.innnerHeight;

动态添加网页元素
1.js添加网页元素

1.修改html内容
domObj.innerHTML+="<p>this is paragraph 1</p>";
domObj.innerHTML+="<p>this is paragraph 2</p>";
2.添加元素
var newp=createElement("p");
var newt=createTextNode("this is paragraph 1");
newp.append(newt);
domObj.appendChild(newp);

2.使用jquery添加网页元素

1.修改html内容
$("#myDiv").html("<p>this is paragraph 1</p>");
2.添加元素
var newp=$("<p></p>");
newp.html("this is paragraph 1");
$("#myDiv").append(newp);

删除网页中元素:
js通过removeChild方法
jquery通过remove方法;

使用jquery插入元素:

在文档第3个p元素后面插入一个新的段落
$("p:eq(2)").after($("<p>new paragragh </p>"))
在文档第3个p元素前面插入一个段落
$("p:eq(2)").before($("<p>new paragragh </p>"))

切换可视性:

Jquery方式:
例如:div
隐藏元素
    $("div").hide();   //隐藏之后不占据空间
    $("div").css("opacity","0");    //隐藏之后依旧占据空间
显示元素:
    $("div").show();
    $("div").css("opacity","1");

js方式:
将元素的style.display设置为none:隐藏元素
设置为"" :显示元素

window对象的一些属性与方法
alert():打开一个对话框,在其中显示一条消息和一个ok按钮
blur();让当前窗口失去焦点
close():关闭当前窗口
confirm();弹出一个确认对话框
open():打开一个新的浏览器窗口
prompt():提示用户输入框
setInterval():每隔n毫秒调用指定函数或者表达式
setTimeout():n毫秒之后调用指定函数或者表达式
例
var timerId=setTimeOut(myTimer,10000); //设置10秒后执行函数myTimer
clearTimeout(timerId); //清楚定时器
interval类似

history对象:
history.go(3):沿着历史记录向前前进3步
history.go(-n):沿着历史记录后退n步
history,back;返回上一步

jquery进行表单验证:

html:
<form id="myForm">
    <input type="text" name="emailField" />
</form>
Jquery:
$(doucument).ready(function(){
$("#myForm").validate({    //validate函数是检测表单的函数
    emailField:{
    required:true,
    email:true
    }
})

Jquery验证规则以及用途:

 <div>
    <form id="formA">
        <label>
            input a word
        </label>    
        <input type="text" name="word" title="请输入一个长度大于5的字符串">

    </form>
 </div>
 <script type="text/javascript">
     $("document").ready(function(){
         var vali=   $("#formA").validate({
             rules:{
                 word:{required:true,
                      minlength:5}
             }
         })
     })
    </script>