搜索
CSS讲解部分•CSS精华部分个人感觉有两部分第一部分：DIV的使用跟SPAN的使用第二部分：CSS选择器的使用简单说下DIV跟SPAN的使用学习CSS首先推荐一个DHTML的文档。从这个文档里可以可以清楚的知道，DIV有哪些属性等内容，以及具体用法。之后的SPAN的使用等可以参考这个文档。CSS选择器的使用•CSS选择器-九种武器•它又可以分为简单跟组合两种•简单选择器：•类型选择器•属性选择器•ID选择器•类选择器•通配选择器•组合选择器：•后代选择器•子选择器•兄弟选择器•群主选择器CSS选择器的使用•CSS选择器由于各种浏览器的关系，并不是所有的都支持，所以在这只介绍几种常用的。感兴趣的可以同事可以网上自己查点资料。•常用的选择器有类型选择器，ID选择器，类选择器，子选择器，兄弟选择器，类型选择器•类型选择器选择的一般就是HTML中的常用的标签，比如说tdtable等给他定义一些CSS属性。•实例：•style•body•{•bgColor:red;•}•/styleID选择器•ID选择器是通过#号的方式来获得的，在HTML页面中注意下一个页面中只能有一个ID为某一个值的情况。•例如：tdid=“id1”之后就不能再命名ID为id1的任何标记，这个是默认规则，如果你命名两个相同的id页面不会报错，但是你js中使用的时候会获得不到这个对象。•类选择器实例•style•#id1{bgcolor:red;}•/style类选择器•类选择器是通过一个.来表示的。实际类选择器就是某个标签中定义的class属性。•比如：•style•.notes{•font-size:14px;•}•/style•divclass=“notes”•这个实例实际就是给div定义了一个notes的类，•定义了字体的大小为14像素的。子选择器•子选择器使用方式是:EF即元素E的儿子F。•实例：•a.col{color:red}•此选择器的作用即把连接为a形式的类为col的颜色置为红色后代选择器•后代选择器即EF{css规则}元素E的任意后代元素F•实例：•.linksa{color:red}•此实例的结果是把类为links的后代a的颜色置为红色群主选择器•把一些选择符一起定义同样的样式•实例：•td，p，div,a{font-size:14px；}•把这几个选择标签的字体样式置为14像素。控制标签的显示与隐藏•控制标签的显示方式是利用Display属性。前面的章节中我们也零星遇到过它，比如，将一个块元素转化为行内元素的方法：display:inline。本小节将介绍display属性其他的选择。同时，CSS还有一个专门用来控制标签隐藏的属性，我们将对它们进行比较。Display属性•我们可能对类似的英文Displayer更熟悉一些，它是显示器的意思。Display是用来控制标签的显示方式的，它可以设置的参数值部分如下：•Block：像块元素一样显示。•none：标签不显示。•inline：像行内元素一样显示。•inline-block：像行内元素一样显示，但其内容像块类型元素一样显示。•list-item：像块元素一样显示，并添加样式列表标记。•table-header-group：类似theader的作用，令标签显示在任何表格行和行组合之前，在头部标题之后。•table-footer-group：类似tfooter的作用，令标签显示在任何表格行和行组合之后，在底部标题前。Visibility属性•利用Display:none可以将标签设置为不可见，其实，CSS还有一个专门的属性用来控制标签的显示与否，这就是Visibility属性。它可以设置的值有三个，分别如下：•Visible：标签可见。•Hidden：标签不可见。•Collapse：标签应用于表格标签中的某一列或者某一行时，当前行或者列将消失。不过IE不支持此设置。下来串下readOnly跟disabled•首先介绍他们相同点，他们两个的属性都是有•true跟false两个值来控制。•readOnly注意这个O的大写尤其是Js中，如果你不注意则添加不上只读的属性。•disabled注意如果是form提交，则不会提交属性是disabled的标签。•比如tddisabled=“true”id=“cust_name”type=“text”•则这个值在from.submit之后不会提交。如果你想from提交应该把这个值设置成readOnly。如果实在想设置成disabled，你可以通过document.getElementById(“cust_name”)这种方式来获得值，把值写到URL中提交。通过上面的串讲咱开始转到JS方面的知识•JS的语法规则学过编程的基本都能了解，但是我要强调两点：•一、JS定义的变量没有块作用域，即函数中声明的所有变量，在整个函数中他们都是有定义的。实例：•Functiontest(o)•{•vari=0;•if(typeofo==“object”)•{•varj=0;•for(k=0;k10;k++)•{•document.write(k);•}•}document.write(j);•}JS方面的知识•二、如果在使用未声明的变量，程序会隐式的声明成全局变量，引起不必要的麻烦。•实例：•Functiontest()•{•for(k=0;k10;k++)•{•document.write(k);•}document.write(k);•}JS方面的知识•JS匹配正在表达式•匹配模式有exec(),search(),replace(),match(),test(),split()等，其中列举的这几种是常用的匹配模式，比如校验是否是移动号码的校验：•varg_activateTab=“15034062439”varpatrn=/^((\(\d{3}\))|(\d{3}\-))?([12][03458])|(03)\d{9}$/;•alert(g_activateTab.search(patrn));•正则表达式我提供了一个doc文档,在svn上。JS方面的知识下来介绍下Js获得对象的常用的两个方法：一种是:varid=document.getElementById(“id名”);这样获得的是一个对象。另一种是:varname=document.getElementByName（”name值”）;这样获得的是一组对象，因为name可以重复。还有一种是document.form.name(这的name跟上面那个name一样)这种的弊端就是如果td或者别的标签有disabeld属性的时候获得不到。Jquery方面的知识JS方面的知识，基本就这些了。下来串点Jquery的知识。上面那个是Jquery1.2的API。实际工作可以经常参考这个还有一些实例我上传到SVN上了。Jquery方面的知识Jquery的基础之一选择器。Jquery的选择器跟CSS的选择器是一个性质的。基本方法同CSS选择器，这就不具体介绍了。下来介绍下，Jquery的DOM操作。Jqyery对象不同于js对象，定义Jquery对象实例：Var$para=$(“p”)；获得标签为p的Jquery对象，记得Jquery对象一定不要跟js对象搞混，因为Jquery对象一般取出的都是数组的形式。Jquery方面的知识下来介绍小Jquery对象转化为Js对象的方法：实例：Var$para=$(“p”)；Varp=$para.get(0);Jquery方面的知识下来介绍下DOM操作。1、查找元素节点及属性。查找节点是通过选择器来查找，找到节点后，通过text()方法来获得值，通过attr来获得元素的属性。实例：var$li=$(“ulli:eq(1)”);//获取ul第二个li节点alert($li.text());//获取li的值alert($li.attr(“title”));//获取li的title属性Jquery方面的知识2、创建节点。即把一些HTML代码添加到你想要的节点上。实例：var$li=$(“optionvalue=“1”aoption”);;$(“#select1”).append($li);//这个操作就把一个option添加到了ID为select1的节点中了。插入节点有很多方法，可以看API。Jquery方面的知识下面介绍下Jquery的事件说到Jquery事件，不得不说的就是ready()方法，read()方法的产生是为了替换传统的window.onload()。ready()的优点：(1)它执行在DOM结构加载完毕的时候，而不像window.onload()函数执行在页面所有的东西包括图片等内容加载完毕才执行。(2)它可以多次使用，它采用的是追加的方式。而window.onload在一个页面中只能有一个。Jquery方面的知识Jquery的事件方法：基本跟js的类似。Jquery的事件表示形式，基本是把js事件的on去掉，即JS中事件是onclick而在Jquery中是click。需要注意的地方就是在Jquery事件中，会出现冒泡的问题，即给某个元素绑定了一个事件，而给它的子元素绑定了另一个事件，这样它的子元素绑定了两事件，而实际咱可能只要它自己的事件，Jquery也提供了防止这种情况的方法，即在子元素事件中添加event.stopPropagation();这个方法会帮你解决这个问题。