Ⅰ 前端开发——什么是数组
定义数组的两种方式
vara=new Array()var a=[ ]
数组的长度
vara=["a","b","e"];console.log(a.length)
length是数组的长度 输出结果为 3
添加元素
vara=["a","b","c","d"];a.push("e")
push方法是向数组中最后一个位置添加元素
a.unshift("f");
unshift方法是向数组中第一个位置添加元素
a.splice(a,0,"g")
splice方法可以在数组指定位置添加元素并且可以删除元素，数字2代表位置，数字0代表删除元素的个数，这里表示在元素b后面加一个元素g
删除元素
vara=["a","b","c","d"]; a.pop();
pop()方法删除数组中的元素,删除的是最后一个；
a.shift()
shift方法删除数组中的元素,删除的是第一个；也可以用splice删除，并且可以删除多个元素
数组转换
vara=["a","b","c"];vara1=a.join("#");
join是把数组里的元素变成字符串，用“#”隔开
var a="w,e,g";vara1=a.split(",");
split是把字符串变成数组，数组用“,”隔开
以上就是关于数组的分享，更多前端内容请 点击关注
Ⅱ 前端基础（问答21）
keywords: jQuery、常用方法、Ajax。
$(document).ready() 和 window.onload 的作用类似，都是在页面加载完成后调用绑定的函数，但也有一些区别。
$node.html()： 获取集合中第一个匹配元素的 html 内容，或设置每一个元素的html内容。
$node.text()： 获取匹配元素集合中每个元素的合并文本，包括它们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
ps：.text()方法不能使用在 input 元素或scripts元素上。input或textarea需要使用 .val() 方法获取或设置文本值。得到scripts元素的值，使用.html()方法
作用：将两个或更多对象的内容合并到第一个对象。
用法：
jQuery 的链式调用是指执行完一个方法之后就返回当前对象，被返回的对象继续执行后面的方法。
通过对$.ajax()中传入的cache控制，具体规则如下：
.data()：在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
用法：
DEMO：
1、给元素 $node 添加 class active，给元素 $noed 删除 class active
添加class：$node.addClass('.active')
移除class：$node.removeClass('active')
切换class：$node.toggleClass('active')
2、展示元素$node, 隐藏元素$node
显示：$node.show()
隐藏：$node.hide()
切换显示/隐藏：$node.toggle()
3、获取元素$node的属性: id、src、title， 修改以上属性
获取：$node.attr('id'),$node.attr('src'),$node.attr('title')
修改：
修改一处属性：$node.attr('id','header')
修改多处属性：$node.attr({'id':'header','title':'task16'})
4、给$node 添加自定义属性data-src
$node('data-src','images/01.jpg')
5、在$ct 内部最开头添加元素$node
$ct.prepend($node)
6、在$ct 内部最末尾添加元素$node
$ct.append($node)
7、删除$node
$node.remove()
8、把$ct里内容清空
$node.empty()
$ct.text("")
$ct.html("")
9、在$ct 里设置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>')
10、获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)
获取：1、$node.width()、$node.height()
2、$node.innerWidth()、$node.innerHeight()
3、$node.outerWidth()、$node.outerHeight()
4、$node.outerWidth(true)、$node.outerHeight(true)
11、获取窗口滚动条垂直滚动距离
$(window).scrollTop()
12、获取$node 到根节点水平、垂直偏移距离
水平：$node.offset().left
垂直：$node.offset().top
13、修改$node 的样式，字体颜色设置红色，字体大小设置14px
$node.css({
color:'red',
font-size:ཊpx'
})
14、遍历节点，把每个节点里面的文本内容重复一遍
$node.each(function() {
console.log($(this).text())
})
15、从$ct 里查找 class 为 .item的子元素
$ct.find('.item')
16、获取$ct 里面的所有孩子
$ct.children()
17、对于$node，向上找到 class 为’.ct’的父亲，再从该父亲找到’.panel’的孩子
$node.parent('.ct').children('.panel')
18、获取选择元素的数量
$nodes.length
19、获取当前元素在兄弟中的排行
$node.index()
1、当点击$btn 时，让 $btn 的背景色变为红色再变为蓝色
2、当窗口滚动时，获取垂直滚动距离
3、当鼠标放置到$div 上，把$div 背景色改为红色，移出鼠标背景色变为白色
4、当鼠标激活 input 输入框时让输入框边框变为蓝色，当输入框内容改变时把输入框里的文字小写变为大写，当输入框失去焦点时去掉边框蓝色，控制台展示输入框里的文字
5、当选择 select 后，获取用户选择的内容
效果
效果
Ⅲ html前端复选框多类多个复选框提交怎么封装选中的数据，提交到后台，我后端是php
首先你得有个form表单,还得有个提交按钮吧，form里面有个属性是action=“你要提交的php处理页面” method=“post” ,php处理页面用$_POST['提交的name'] 如'menuMole'，既然是复选框，他的name的值肯定是不一样的
Ⅳ Web前端初学者应该学习的jQuery技巧
今天小编要跟大家分享的文章是关于
Web前端初学者应该学习的jQuery技巧!jQuery在Web前端学习里是很重要的一块知识，很多人都在这阶段学习的时候遇到问题，那么作为刚刚接触web前端的初学者来说都应该学习哪些Web前端初学者应该学习的jQuery技巧呢?让我们一起来看一看吧！
1、关于页面元素的引用
通过jquery的$引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象(集合对象)，不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html;
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
元素的内容。
有如下两种方法：
$("div").eq(2).html;//调用jquery对象的方法
$("div").get(2).innerHTML;//调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
·$("#msg").html;//返回id为msg的元素节点的html内容。
·$("#msg").html("newcontent");
·//将“newcontent”作为html串写入id为msg的元素节点内容中,页面显示粗体的newcontent
·$("#msg").text;//返回id为msg的元素节点的文本内容。
·$("#msg").text("newcontent");
·//将“newcontent”作为普通文本串写入id为msg的元素节点内容中,页面显示newcontent
·$("#msg").height;//返回id为msg的元素的高度
·$("#msg").height("300");//将id为msg的元素的高度设为300
·$("#msg").width;//返回id为msg的元素的宽度
·$("#msg").width("300");//将id为msg的元素的宽度设为300
·$("input").val(");//返回表单输入框的value值
·$("input").val("test");//将表单输入框的value值设为test
·$("#msg").click;//触发id为msg的元素的单击事件
·$("#msg").click(fn);//为id为msg的元素单击事件添加函数
·同样blur,focus,select,submit事件都可以有着两种调用方法
5、集合处理功能
·$.extend({
·min:function(a,b){returna
·max:function(a,b){returna>b?a:b;}
·});//为jquery扩展了min,max两个方法
·使用扩展的方法(通过“$.方法名”调用)：
·alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));
6、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function{alert($(this).html)})
.mouseover(function{alert('mouseoverevent')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});
7、操作元素的样式
主要包括以下几种方式：
·$("#msg").css("background");//返回元素的背景颜色
·$("#msg").css("background","#ccc")//设定元素背景为灰色
·$("#msg").height(300);$("#msg").width("200");//设定宽高
·$("#msg").css({color:"red",background:"blue"});//以名值对的形式设定样式
·$("#msg").addClass("select");//为元素增加名称为select的class
·$("#msg").removeClass("select");//删除元素名称为select的class
·$("#msg").toggleClass("select");//如果存在(不存在)就删除(添加)名称为select的class
8、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function{alert("good")})//为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
(1)hover(fn1,fn2)：一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function{
$(this).addClass("over");
},
function{
$(this).addClass("out");
});
(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function{alert("LoadSuccess")})
//页面加载完毕提示“LoadSuccess”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn):每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为selected的class。
$("p").toggle(function{
$(this).addClass("selected");
},function{
$(this).removeClass("selected");
});
(4)trigger(eventtype):在每一个匹配的元素上触发某类事件。
例如：
$("p").trigger("click");//触发所有p元素的click事件
(5)bind(eventtype,fn)，unbind(eventtype):事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如：
$("p").bind("click",function{alert($(this).text);});//为每个p元素添加单击事件
$("p").unbind;//删除所有p元素上的所有事件
$("p").unbind("click")//删除所有p元素上的单击事件
9、几个实用特效功能
其中toggle和slidetoggle方法提供了状态切换功能。
如toggle方法包括了hide和show方法。
slideToggle方法包括了slideDown和slideUp方法。
10、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari,
opera,msie,mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj,fn)：通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。
如
$.each([0,1,2],function(i,n){alert("Item#"+i+":"+n);});
等价于：
vartempArr=[0,1,2];
for(vari=0;i
alert("Item#"+i+":"+tempArr[i]);
}
也可以处理json数据，如
$.each({name:"John",lang:"JS"},function(i,n){alert("Name:"+i+
",Value:"+n);});
结果为：
Name:name,Value:John
Name:lang,Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings,options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
varsettings=$.extend({},defaults,options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array,fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
vartempArr=$.map([0,1,2],function(i){returni+4;});
tempArr内容为：[4,5,6]
vartempArr=$.map([0,1,2],function(i){returni>0?i+1:null;
});
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge([0,1,2],[2,3,4])//返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim("hello,howareyou?");//返回"hello,howareyou?"
11、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict;方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：jQuery.noConflict;
//开始使用jQuery
jQuery("divp").hide;
//使用其他库的$
$("content").style.display='none'
以上就是小编今天为大家分享的关于Web前端初学者应该学习的jQuery技巧的文章，希望本篇文章能够对正在从事web前端学习的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
Ⅳ 前端开发中父级元素下有不同的子元素,如何从不同的子元素种选择相同的子元素
可以通过对比选择。
先获取所有的子元素，然后对所有子元素进行对比，就可以选出相同的子元素。
如果相同子元素带有相同的类名，或者有相同的内容，也可以通过比较这些内容，选出相同的子元素。
也可以把父层元素的html内容提取出来，再使用正则表达式把相同的子元素匹配出来。
Ⅵ 前端 inline元素的特点，哪些元素属于inline元素
不能设置宽高啊，多个元素能够处于同一行，纵向的margin，padding设置无效等，具体去看HTML5学堂吧，都是前端干货。
Ⅶ Web前端工程师应该如何学习CSS
今天小编要跟大家分享的文章是关于Web前端工程师应该如何学习CSS？很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏幕上显示的结果，所以值得合理去学习。因此，本文旨在概述CSS的关键基础和资源，以便进一步阅读现代CSS开发的关键领域。其中许多资源在Smashing杂志上已经有了，但我也选择了其他一些资源，也有人关注CSS的关键领域。这不是一本完整的初学者指南或旨在涵盖所有知识点。我的目标是覆盖现代CSS的广度，同时重点关注几个关键领域，将帮助你理解CSS的其他部分。下面来和小编一起看一看吧！一、语言基础知识对于CSS的大部分内容，你不需要特意去学习属性和值，你可以在需要时查找它们。然而，CSS中一些基础知识没有掌握好，你将很难去理解它。这些基础知识值得你花时间去理解，从长远看，它会帮你节省很多时间和少走弯路。二、选择器，不仅仅有类选择器的表现如标题所说的，它选择文档的某些部分，以便你可以将CSS规则应用于它。大多数人都熟悉使用class，或在直接使用HTML元素设置样式，比如body，但是还有很多更高级的选择器可以根据文档中的位置选择元素，直接选择位于元素之后的元素，或选择表格中的奇数行。这些选择器是CSS3规范的一部分（你可能听说过它们被称为第3级选择器）具有出色的浏览器支持。有关可以使用的各种选择器的详细信息，请参阅MDN参考。有些选择器的行为就好像你已经将类应用于文档中的某些内容。例如p:first-child就像你在第一个p元素中添加了一个类一样，这些被称为伪类选择器。伪元素选择器就像动态插入一个元素一样，例如::first-line的表现与用span包裹第一行文本类似。但是，如果该行的长度发生变化，它将重新应用，如果插入该元素则不会出现这种情况。这些选择器可能会相当复杂。在下面的CodePen中是一个用伪类链接的伪元素的例子。我们使用:first-child伪类定位第一个p元素，然后::first-line选择器选择该元素的第一行，就好像在第一行周围添加了一个以使其变为粗体和改变颜色。
Veggiesesbonusvobis,
tomatillomelonazukibeangarlic.
Gumbobeetgreenscorn
sokoendivegumbogourd.
.Dandelioncucumberearthnutpea
peanutsokozucchini.
.Celerypotatoscalliondesert
.
cornpea.
.
.
Norigrape
.Bunya
utsblack-.Sea
ícama
salsify.
Ⅷ Web前端开发知识点之CSS的使用方式
今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧！
一、与HTML的结合方式
CSS与HTML的结合方式一共有三种，分别是：外部样式、内部样式和内联样式。
①外部样式
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在文档的头部：
或者可以像下面这样在
②内部样式
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
③内联样式
要使用内联样式，你需要在相关的标签内使用样式(style)属性。
Thisisaparagraph
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
二、CSS语法
CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。两条声明之间被分号分开。
属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
在下面这个例子中，h1是选择器，color和font-size是属性，red和14px是值。
三、选择器
CSS的选择器主要分为两大类，一类基本选择器；一类扩展选择器。
①基本选择器
基本选择器包括id选择器，元素选择器和类选择器。
id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。例如下面代码指定id为red的标签中文本为红色。
#red{color:red;}
元素选择器可以为相应的HTML元素指定特定的样式。元素选择器前面没有任何字符。例如下面代码指定div标签中文本为红色。
div{color:red;}
类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以一个点号显示。例如下面代码指定class为center的标签中文本居中对齐。
.center{text-align:center}
②扩展选择器
扩展选择器是在基本选择器的基础上扩展出来的，下面介绍几种常见的。
*选择器(*
{})可以为HTML的所有元素指定特定的样式。例如下面代码指定HTML页面中所有文本为红色。
*{color:red;}
并集选择器(选择器1,选择器2{})可以为多个选择器指定特定的样式。例如下面代码指定div和span两种标签中文本为红色。
div,span{color:red;}
子选择器(选择器1选择器2{})可以为选择器1中的选择器2指定特定的样式。例如下面代码指定div中span标签文本为红色。
divspan{color:red;}
父选择器(选择器1>选择器2{})可以为含有选择器2的选择器1指定特定的样式。例如下面代码指定含有span的div标签文本为红色。
div>span{color:red;}
属性选择器(元素[属性="属性值"])可以为含有该属性且属性值等于该值的元素指定特定的样式。其中，元素和属性值可以省略。例如下面代码指定align属性等于center的div标签文本为红色。
div[align="center"]{color:red;}
伪类选择器(元素:状态{})可以为该元素处于该状态时指定特定的样式。例如下面的代码指定鼠标悬浮在超链接上时文本为红色。
a:hover{color:red;}
四、盒子模型
所有HTML元素可以看作盒子，在CSS中，"box
model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型：
Margin(外边距)-清除边框外的区域，外边距是透明的。
Border(边框)-围绕在内边距和内容外的边框。
Padding(内边距)-清除内容周围的区域，内边距是透明的。
Content(内容)-盒子的内容，显示文本和图像。默认情况下，标签的width和height属性指的是content(内容)的宽和高，我们在设置边框和边距的时候一定要注意。如果想要让width和height是最终盒子的大小，可以设置下面的代码：
box-sizing:border-box;
以上就是小编今天为大家分享的关于Web前端开发知识点之CSS的使用方式的文章，希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，城市一名优秀的web前端程序员。
文章来源：原创_绲墓适_
Ⅸ Web前端学习基础之HTML&CSS知识介绍
今天小编要跟大家分享的文章是关于Web前端学习基础之HTML&CSS知识介绍。正在学习Web前端知识的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。01、HTML概述全称：HyperTextMarkupLanguage（超文本标记语言），定义页面内容结构，该语言书写的代码通常会被浏览器解析执行。
HyperText(超文本)：不仅包括文本，还可以包括图片、链接、音乐、视频等非文本元素
MarkupLanguage(标记语言)：是一套标记标签，html使用标记标签来描述网页
02、HTML文档结构
文档声明定义：它既不是元素，也不是注释，写在html代码的第一行；用来解析元素，通知浏览器使用哪一个html版本
html元素（又叫根标记），是所有其他元素的祖先元素，最顶层
文档头，它是html元素的第一个子元素，可以嵌套其他元素；里面的内容不会在页面上显示
initial-scale=1.0">SEO搜索引擎优化