发表于: 2019-03-11 21:00:20

2 743



今天完成的事情:

1、今天重点学习了jquery的相关知识,看了很多文章和视频,学到了很多东西,不过还是需要仔细学习,还有很多不会的东西。

2、今天跟着视频写了一些简单的demo,也写了任务代码,感觉进度上不是很明显,不过也完成了一个页面。


以下是今天所写的js代码视图:


以下是今天所写的HTML的代码视图:


明天计划的事情:

1、明天首先是计划继续写js2-4的代码,也快要完成了。

2、明天抽时间把之前所学的关于jquery的知识再巩固一下,然后学习新的知识。


遇到的问题:

1、感觉自己在接收新的知识点的时候理解能力有点慢,有些不懂的东西还要问师哥,不过师哥也都一一解答了问题。

2、在学习jquery相关知识上用的时间有些长了,需要再提提速度了。


收获:

1、今天学习了jQuery选择器,jQuery选择器分为基本选择器、层次选择器、过滤选择器和表番选择器。

基本选择器:是jQuery中最常用的选择器,也是最简单的选择器,它是通过id,class和标签名等进行DOM元素查询的,id是唯一的,class可以重复使用;选择器有:#id .class element(根据给定的元素名进行匹配元素) *(匹配所有的元素) div,p......(将每一个选择器匹配到的元素合并后一起返回


层次选择器:如果我们想通过元素之间的关系来获取特定的元素,那么层次选择器是一个非常好的选择。层次选择器的书写规则:【1】$("div span") 集合元素 eg:选取div里面的所有span元素;【2】$("div >span") 集合元素 eg:选取的是div元素名是span的子元素;【3】$(".one+div") 集合元素 eg:选取class为one的下一个div同辈元素;【4】$("#two~div") 集合元素 选取id为two的元素后面所有<div> 同辈元素。{在后面的两个层次选择器在jQuery中可以使用更简便的方法代替:可以使用next()方法来代替$(".one+div")>>>$(".one").next("div"); 可以使用nextAll()方法来代替$("#two~div")>>>$(".two").nextAll("div")。}


过滤选择器:主要是通过特定的过滤规则来筛选出所需要的元素。过滤选择器都是以冒号(:)开头的,按照不同的规则可分为以下中:【1】基本过滤选择器包含 :first 选取第一个元素$("div:first") :last 选取最后一个元素 $("div:last") :not(selector)去除所有与给定选择器匹配的元素$("div:not(.class)") :even选取索引是偶数的元素$("input:even") :odd选取索引是奇数的所有元素$("div:odd") :eq(index)选取索引等于index的元素$("div:eq(1)") :gt(index)选取索引大于index的元素 :lt(index)选取索引小于index的元素 :header选取所有的标题元素(h1,h2,h3......) :animated选取当前正在执行动画的所有元素 :focus选取当前获取焦点的元素【2】内容过滤选择器:$("div:contains(我)")选取含有文本"我"的div元素 $("div:empty")选取不含有子元素的div空元素 $("div:has(p)")选取包含p元素的div元素 $("div:parent")选取拥有子元素的div元素 【3】可见性过滤选择器:可见性选择器是根据元素的可见和不可见的状态来选择相应的元素的。:hidden 选取不可见的元素 :visible选取所有可见元素【4】属性过滤选择器:是通过元素的属性来获取相应的元素的,$("div[id]")选取拥有属性id的元素 $("div[title=text]")选取属性title为"text"的div元素 $("div[title!=text]")选取属性title不等于"text"的div元素,没有属性title的也会被选择 $("div[title^=text]")选取属性title以"text"开始的元素 $("div[title$=text]")选取属性title以"text"结束的元素 $("div[title*=text]")选取属性title含有"text"的元素 $("div[title|=en]")选取属性title等于en或者是以en为前缀的元素 $("div[title~="op"]")选取属性title用空格间隔的值中包含op的元素 $("div[id][title$='text']")选取拥有属性id,并且属性title以"text"结束的元素【5】子元素过滤选择器: :nth-child将为每一个父元素匹配子元素,并且:nth-child(index)中的index是从1开始的而不是0 :first-child为每个父元素匹配第一个子元素 :last-child只返回单个元素,为每个父元素匹配最后一个子元素 :only-child选取是唯一子元素的元素【6】表单对象属性过滤器::enable选取表单内所有可用元素 :disable选取所有不可用元素 :checked选取所有被选中的元素 :selected选取所有被选中的选项元素


表单选择器;能方便的获取到表单的某个或某类型的元素。:input选取所有的input、textarea、select、button元素 :text选取所有的单行文本框 :password选取所有的密码框 :radio选取所有的单选框 :checkbox选取所有的多选框 :submit选取所有的提交按钮 :image选取所有图像按钮 :reset选取所有的重置按钮 :button选取所有的按钮 :file选取所有的上传域 :hidden选取所有不可见元素


2、JS中的匿名函数

定义函数的方式有两种,一种是函数声明,一种是函数表达式(匿名函数)。

一.函数声明(function 语句) 

  要使用一个函数,我们就得首先声明它的存在。而我们最常用的方式就是使用function语句来定义一个函数,如:

function sayHi(){  

  alert("hi"); 

}  


  当然,你的函数也可以是带参数的,甚至是带返回值的。

function abc(x,y){  

  return x+y;  

}  


  但是,无论你怎么去定义你的函数,JS解释器都会把它翻译成一个Function对象。例如,你在定义上面的其中一个例子的函数号,再输入如下代码:

alert(typeof abc);// “function” 

  你的浏览器就会弹出提示框,提示你abc是一个Function对象。那么Function对象究竟是什么呢?

Function 对象 

  Function对象是JavaScript里面的固有对象,所有的函数实际上都是一个Function对象。关于这个方面的讨论,我们留到下一个专题节。我们先看看,Function对象能不能直接运用构造函数创建一个新的函数呢?答案是肯定的。例如: 

  

var abc = new Function("x","y","return x*y;");  

alert(abc(2,3)); // "6"


  相信大家现在对如何声明一个函数应该是有所了解了。那么什么才是匿名函数呢?

二. 函数表达式(匿名函数) 

  顾名思义,匿名函数就是没有实际名字的函数。例如,我们把上面的例子中,函数的名字去掉,再判断一下他是不是一个函数:

alert(typeof function(){});// "function"  

alert(typeof function(x,y){return x+y;});// "function"  

alert(typeof new Function("x","y","return x*y;"))// "function"  


  我们可以很容易地看到,它们全都是Function对象,换言之,他们都是函数,但是他们都有一个特点——没有名字。所以我们把他们称作“匿名函数”。然而,正因为他们没有“名字”,我们也没有办法找到他们。这就引申了如何去调用一个匿名函数的问题了。

匿名函数的调用 

  要调用一个函数,我们必须要有方法定位它,引用它。所以,我们会需要帮它找一个名字。例如:

view plaincopy to clipboardprint? 

var abc=function(x,y){ 

return x+y; 

alert(abc(2,3)); // “5” 

  上面的操作其实就等于换个方式去定义函数,这种用法是我们比较频繁遇到的。例如我们在设定一个DOM元素事件处理函数的时候,我们通常都不会为他们定名字,而是赋予它的对应事件引用一个匿名函数。

  对匿名函数的调用其实还有一种做法,使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)。我们再看一下以下例子:

alert((function(x,y){return x+y;})(2,3));// "5"  

alert((new Function("x","y","return x*y;"))(2,3));// "6"


  很多人或许会奇怪,为什么这种方法能成功调用呢?觉得这个应用奇怪的人就看一下我以下这段解释吧。

  大家知道小括号的作用吗?小括号能把我们的表达式组合分块,并且每一块,也就是每一对小括号,都有一个返回值。这个返回值实际上也就是小括号中表达式的返回值。所以,当我们用一对小括号把匿名函数括起来的时候,实际上小括号对返回的,就是一个匿名函数的Function对象。因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的引用位置了。所以如果在这个引用变量后面再加上参数列表,就会实现普通函数的调用形式。

  不知道以上的文字表述大家能不能看明白,如果还是理解不了的话,再看一下以下的代码试试吧。

var abc=function(x,y){return x+y;};// 把匿名函数对象赋给abc  

// abc的constructor就和匿名函数的constructor一样了。也就是说,两个函数的实现是一样的。  

alert((abc).constructor==(function(x,y){return x+y;}).constructor);  


  PS:constructor是指创建对象的函数。也就是函数对象所代表的函数体。

 var sayHi=function(){alert("hi")};

   sayHi();


如何执行匿名函数?就是给它起个名字,后面加个括号,就可以执行了。那么也就是可以在函数后面直接加括号就可以执行,而不用给它起名了。

  总之,将其(被小括号包含的匿名函数)理解为括号表达式返回的函数对象,然后就可以对这个函数对象作正常的参数列表调用了。(前面这里犯了个错 误,只有函数表达式还是不能直接调用函数的,去掉匿名函数括号必须要伴随将表达式赋值。也就是(function(){alert(1)})()应该是与 a=function(){alert(1)}()等价,不能连a=都去掉。)



返回列表 返回列表
评论

    分享到