jquery 创建 jquery创建文件夹

转载

mob64ca13ff9303 2024-01-08 15:44:30

文章标签 jquery 创建 html 选择器 a标签 文章分类 jQuery 前端开发

一、js与jquery的区别　

js是一种脚本语言，而jquery对它进行了封装使得js开发起来更简单。

二、新建web项目步骤

1、新建web项目时选择第二个,取一个项目名称。　　　

2、系统生成的多余文件夹删掉，仅留下Scripts和Web.config：

3、修改Scripts文件夹为js，新建文件夹css和image，并在对应位置添加需要的页面，css样式文件与js文件。

4、将.min.js文件拖动到html中，将自己新建的js文件拖动到它下方　　

*这里引入js有先后顺序，先引用jquery文件，再引用js。

　　将Script文件夹中的第一个js文件（_references.js），拖动到自己新建的js文件里的最上面　　

　　*此步骤作用：让jq显示智能提示，方便写代码。

　　完成以上步骤，即可开始正常程序编写。

三、jquery执行过程与写法

1、jq执行过程分为下面5个步骤：

a、对页面进行加载：$(function(){ });

b、找到对象，如id标签：$(“#btn”)

c、执行对象相应事件：click();

d、声明事件：function(){ }

e、执行事件内容：alert();

jquey写法

例：给html中id名称为btn的执行一个点击事件，执行事件的内容是弹出aaaa;

html:

js:

$(function () { $("#btn").click(function () { alert("aaaa"); });

});

js写法

$(function () {

document.getElementById("btn").onclick = function () { alert("aaaa");

});

2、Js对象转jquery对象

var v=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象转换后，就可以任意使用jQuery的方法了。

例子：

html:

js:

var obj = document.getElementById("btn"); //DOM对象 var $obj = $(obj); //jQuery对象 $obj.click(function () { alert("aaaa"); });

3、jquery对象->js

$("#btn") //jQuery对象 $("#btn")get(0) //jQuery对象->原生的DOM对象

例：jquery对象->js就，就可以执行js事件了

html:<input type="button" value="jq按钮" id="btn"/>

js: var obj = $("#btn").get(0); obj.onclick = function () { alert("aaa"); }

优先级问题：当css和jq中同时设置了样式时，遵循就近原则，此时的jq写法，类似于在html标签内加一个style样式来写，所以优先jq。

四、jq选择器

　　$(“tr:odd”)，选择所有位于奇数行的< tr >标记

　　$(“tr:even”) ，选择所有位于偶数行的< tr >标记

【例】表格隔行换色的效果

$(function(){

　　$(“tr:odd”).css(“background”,”#f8f3d2”);　　　 //偶数行的背景颜色为#f8f3d2

　　$(“tr:even”).css(“background”,”#ffcdcd”);　　　　//奇数行的背景颜色为#ffcdcd

});

2、eq(n)选择器：$("X:eq(n)")

　　对X标签的第n+1个X标签进行选择，也可以写作$(“X”).eq(n)。

　　如：$(“tr”).eq(2)，是指tr标签的第三行进行选择。

3、特殊

nth-child(n)选择器：$(“X:nth-child(n)”)

　　对X标签的第n个X标签进行选择。

　　如：$(“td:nth-child(3)”) ，是指第3列；　　$(“li:nth-child(4)”)，就是第4个li标签。

$(“li>a”) 返回<li>标记的所有子元素<a>,不包括孙标记。

(“a[href$=pdf]”)选择所有超链接，并且这些超链接的href属性是以“pdf”结尾；

4、功能函数

$trim(sString); 去掉前后空格；

去掉中间空格：

用正则：

var sString = "hello world"; String.prototype.NoSpace = function() { return this.replace(/\s+/g, ""); } alert(sString.NoSpace());

转换为数组：【

例】去掉字符串中间空格：（把字符串变成字符数组，然后把空格替换成无）

var s="das das";

var aChar=s.split("");　　　　　　　　//将字符串变为字符数组

for(var i=0; i<aChar.length;i++)

{

if(aChar[i]==" ")　　　　　　//当遇到某个字符是空格时

{

s=s.replace(" ","");　　//将此空格替换成无（从空格替换到连空格都不是）

}

alert(s);　　　　　　　　　　　　　　　//打印s

5、创建DOM元素

var oNewP = $("<p>这是一个感人肺腑的故事</p>"); //创建DOM元素 oNewP.insertAfter("#btn"); //insertAfter()方法

将dom元素p插入#btn标签后面

6、属性选择器

6.1 所有标签写法$(“某标签[某属性]”)：选出带有某种属性的某标签。

6.1.1$(“a[title]”).addClass(“myClass”) 给a标签的title属性增加myClass样式

6.1.2 $(“a[href=’10-9.html’]”).addClass(“myClass”) 给a标签的href=’10-9.html’属性增加myClass样式

6.2.3 $(“a[href^=http://]”).addClass(“myClass”) 所有以http://开头的a标签

6.2.4 $(“a[href$=html]”).addLClass(“myClass”) 所有以html结尾的a标签

6.2.5 $(“a[href*=isaac]”).addClass(“myClass”) 所有href中含有isaac的a标签

7、包含选择器

　　$(“某标签:has(某属性)”)：选出包含某属性的所有某标签。如：$(“li:has(a)”) 包含超链接的所有li标记

8、位置选择器

　　$(“某标签:某位置”) ：选出某特定位置的某标签。如：

1）$(“p:first”) 选择页面中的第一个p标签

2）$(“p:last”) 选择页面中的最后一个p标签

3）$(“p:first-child”) 选择所有的p标记，且这些p标记是其父标记的第一个标记。

4）$(“p:last-child”) 选择所有的p标记，且这些p标记是其父标记的最后一个标记。

5）$(“p:nth-child(odd)”).addClass(“myClass”) 选择所有的p标记，且这些p标记是其父标记的偶数行。

6）$(“p:odd”).addClass(“myClass”) 整个页面的偶数行p标记

7）$(“p:eq(4)”).addClass(“myClass”) 第五个p标记增加class样式

　　$("p").eq(4).addClass(“myClass”)

　　$("p").eq(4).css("color","red") 相当于style

8）$(“p:gt(n)”).addClass(“myClass”) 第n个（从0开始，不包括n本身）p标记之后的所有p标记，也就是从第n+2个标记开始算，如$(“p:gt(2)”)就是从第四个p开始。

9、过滤选择器

过滤选择器

　　*备注：$(":file") 等价于$(“input[type=file]”)

$(“:button”)	所有按钮
$(“:checkbox”)	所有复选框,等同于$(“input[type=’checkbox’]”)
$("div:contains(' foo ')")	所有包含了文本“foo”的元素
$(“:disable”)	所有被禁用的元素（此写法有问题，代替写法：$("input[disabled=disabled]").attr("value", "aaa");）
$(“:enable”)	所有没有被禁用的元素
$(“:file”)	所有上传文件
$(“:input”)	所有表单元素
$(“:selected”)	所有下拉菜单中被选中的项
$(“:visible”)	所有可见的元素
$(“:submit”)	所有提交按钮