JQuery常用知识点及示例皇牌天下投注网:

来源:http://www.prospettivedarte.com 作者:计算机教程 人气:168 发布时间:2019-07-06
摘要:   学过了Javascript(姜昊),JQuery和ajax后,又将北风的视频过了一遍,就是一种充实的感觉。就像一个水杯中开始放了一些石块,然后又加入了水,将空隙填补了一样。在BS整个学习的

    学过了Javascript(姜昊),JQuery和ajax后,又将北风的视频过了一遍,就是一种充实的感觉。就像一个水杯中开始放了一些石块,然后又加入了水,将空隙填补了一样。在BS整个学习的过程中Javascript既是基础也是核心。这篇博客先从一些常用符号说起,不知道大家有没有这种感受,没有系统地学习过之前,看代码中的这些符号比如“$”常常摸不着头脑,从网上查也不容易,现在我总结了我在学的过程中一些疑惑点。

1、JQuery 名称解释

$

   在JQuery的使用中常常能看到“$”这个符号。$到底有哪些使用呢?

1.$()的作用就是将传入括号的东西转换为JQuery对象。那么什么东西可以传入呢?各种选择器和过滤器。这里只介绍几种基础选择器。

1.根据标签名进行选择 var input_query=$("input"); 2.根据id值选 var text11_query=$("#text11");  3.根据class值进行选 var text11_query=$(".text11");  4.同时选择多个符合条件的JQuery包装集用,号分隔条 var text_query=$("#text11,.text12");  5.选择所有DOM元素 var all_query=$("*"); 

   其他还有层次选择器,基本过滤器等。详细内容可参见链接:JQuery选择过滤器

   其实到这里我们自然想到getElementByID()这个方法。这个方法只能通过id选择器选择DOM节点。而JQuery中的这个$作用就不是这样了。它的选择器可以很多种。这也充分体现了JQuery这个框架的便利。还要强调一点就是getElementByID返回的是DOM对象,而$返回的JQuery对象(数组),这个点也有助于帮助理解连缀的写法。这里给连缀举个实例:

$('div')//找到div元素      .find('h3')//选择其中的h3元素     .eq(2)//选择第3个h3元素      .html('Hello'); //将它的内容改为Hello

  能够连缀是因为find,eq,html都是JQuery对象的方法,而find和eq的返回值也是JQuery对象。

2.$(funciton(){      })  这里的$的是什么意思?整个方法是什么意思?

   其实$(funciton(){      })是 $(document).ready(function(){      })的缩写形式。$(document)是选择整个文档对象。JQuery中默认参数是“document”。ready方法是表示在文档结构已经加载完毕时所触发的函数。合起来就是表示在整个文档结构已经加载完毕时要执行ready括号里的方法体。有没有觉得很像onload方法。这两个方法还是有区别的,onload方法表示页面包含图片等文件在内的所有元素都加载完成后才执行。

   一般情况下一个页面响应加载的顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。那么Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。

3.$在JQuery中代表对JQuery对象的引用,

  一说起JQuery,我们都把它看做Javascript的一个架构来对待,但是在具体操作时JQuery是一个对象。如:.ajax()。

JQuery是封装了常用JS操作函数的一个库文件
JQuery = Javascript Query (查询)
Jquery意思即指: 强大的DOM节点查询

( )

   在Javascript中,()是一种运算符,跟在function后面可以使function自动运行。比如我们会常见这样的写法:$(funciton(){      }) ();这样就可以真正实现文档结构加载完毕后,函数体中的方法直接执行了。如果还不太理解看下面的代码:

function box() { var age = 100; age   ;  return age; } alert(box);   //这种情况下输出的是 function box(){var age = 100;age   ; return age;} alert(box()); //这种情况下输出的是101。

 

字面量

   字面量是以一种更直接的方式来表示数据类型。比如:int类型,100就是int类型的。可以说100就是数字字面量。下面还列举了一些:

100    //数字字面量 'jane'   //字符串字面量 false     //布尔字面量 /js/gi   //正则表达式字面量 null    //对象字面量 {x:1, y:2}      //对象字面量表达式 [1,2,3,4,5]   //数组字面量表达式 

  另外字面量在创建数组时可以和传统方式对比:

1.使用new 关键字创建数组 var box = new Array(); //创建了一个数组 var box = new Array(10); //创建一个包含10 个元素的数组 var box = new Array('dog',4); //创建一个数组并分配好了元素

2 使用字面量方式创建数组 var box = []; //创建一个空的数组 var box = ['dog',4]; //创建包含元素的数组

  在创建对象时可以和传统方式对比:

1.使用new 运算符创建Object var box = new Object(); //new 方式 box.name = 'dog'; //创建属性字段 box.age = 4; //创建属性字段  

2.使用字面量方式创建Object var box = { //字面量方式 name : 'dog', //创建属性字段 age : 4 }; 

总结:这些都是一些细小的点,下篇博客讲我理解的JS基于原型的面向对象。

版权声明:本文为博主原创文章,未经博主允许不得转载。


2、官网:http://jquery.com/

JQuery2.*不再支持IE6、7、8,上线环境使用压缩版可以省带宽

 

3、基本选择器

同CSS选择器

<body>
<div id="test1">id test1</div>
<div class="test2">class test2</div>
<div class="test2">class test2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
<script>
// id选择器
$('#test1').css('background' , 'gray');
// 标签选择器
$('p').css('background' , 'blue');
// 类选择器
$('.test2').css('background' , 'green');
// *
$('*').css('background','pink');
</script>

 

 

4、层次选择器

<p>
<input type="text" />
1
2
</p>
<p>
<input type="text" />
3
4
</p>
<p>
<input type="text" />
5
6
</p>
<div>7</div>
<script>
// div下的span
$('div span').css('background' , 'orange');
// 每个prev元素之后的1个next元素被选中
//$('input   span').css('background' , 'gray');
// 每个prev元素之后的所有同辈siblings元素
$('input ~ span').css('background' , 'gray');
</script>

 

 

5、属性选择器

<body>
<p>Email:<input type="text" name="email" /></p>
<p>密码:<input type="text" name="password" /></p>
<p>重复密码:<input type="text" name="repassword" /></p>
<p>学号:<input type="text" name="stunum" /></p>
<p>学分:<input type="text" name="stuscore" /></p>
</body>
<script>
$('input[name="email"]').css('background' , 'gray');
$('input[name!="email"]').css('background' , 'blue');
//找包含password的属性
$('input[name*="password"]').css('background' , 'pink');
//找开头是stu的属性
$('input[name^="stu"]').css('background' , 'orange');
//找以word结尾的属性
$('input[name$="word"]').css('background' , 'red');
</script>

 

 

6、基础过滤器(配合选择器使用)

<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
<li>导航5</li>
<li>导航6</li>
</ul>
</body>
<script>
$('li:first').css('background','red'); // 找第1个
$('li:odd').css('background','blue'); // 找奇数个,从0计数
$('li:even').css('background','blue'); // 找偶数个,从0计数
$('li:eq(2)').css('background' , 'purple'); // 找第2个,从0计数
</script>

 

 

7、内容过滤器

<body>
<table border="1">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张飞</td>
<td>男</td>
<td>26</td>
</tr>
<tr>
<td>孙尚香</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>赵云</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>花木兰</td>
<td></td>
<td>22</td>
</tr>
</table>
<p><br /></p>
<p>a</p>
<p></p>
</body>
<script>
$('td:contains("女")').css('background' , 'blue'); // 含有"女"的td
$('td:empty').css('background' , 'green'); // 空的td
$('td:has(span)').css('background' , 'pink'); // 含有span的td
$('p:parent').css('background' , 'black'); // 有内容的p标签,(当爹的p标签)
</script>

 

 

前面介绍的都是找对象的方法,接下来我们来操作对象

8、操作普通属性

attr一个参数是获取属性,两个参数是赋值

<body>
<img src="on.jpg" alt="皇牌天下投注网 1" onclick="bian()" />
</body>
<script>
function bian() {
if($('img').attr('src').indexOf('on') > -1) {
$('img').attr('src' , 'off.jpg');
} else {
$('img').attr('src' , 'on.jpg');
}
}
</script>

 

 

9、操作css属性

css()传一个值是获取属性值,传两个是赋值

因为width和height操作频繁,jquery给我们封装了width()和height()方法直接获取宽高

<style>
div {
width: 300px;
height: 300px;
border: 1px solid blue;
}
</style>
<body>
<h1>jQuery操作CSS属性</h1>
<div onclick="bian();">点击宽高 10px</div>
</body>
<script>
function bian() {
var w = parseInt( $('div').css('width') );
var h = parseInt( $('div').css('height') );
var b = parseInt( $('div').css('borderBottomWidth') );
$('div').css('width' , w 10 'px');
$('div').css('height' ,h 10 'px');
$('div').css('borderBottomWidth' ,b 1 'px');
}
/*
function bian() {
var w = $('div').width();
var h = $('div').height();
var b = parseInt($('div').css('borderBottomWidth'));
$('div').css('width' , w 10 'px');
$('div').css('height' , h 10 'px');
}*/
</script>

 

 

10、删除节点(remove)

       增加节点(append)

       a.after(b)  在a后增加b

       a.before(b)在a前面加b

<body>
<input type="button" value="清空ul" onclick="qing()" />
<input type="button" value="删除ul" onclick="shan()" />
<input type="button" value="增加li" onclick="zeng()" />
<input type="button" value="再增" onclick="zeng2()" />
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li onclick="alert('当')">导航4</li>
</ul>
</body>
<script>
function qing() {
$('ul').empty();
}
function shan() {
$('ul').remove();
}
function zeng() {
//$('<li>导航五</li>').appendTo($('ul'));  //加在ul后
$('ul').append($('<li>导航6</li>'));
}
function zeng2(){
$('ul').after($('<ol><li>哈哈</li></ol>')); 
$('ol').append($('ul li:last'));
}
</script>

 

 

11、节点包裹

<body>
<h1>jQuery包结点</h1>
<input type="button" value="用p标签包住每个input" onclick="wp()" />
<input type="button" value="用p标签包住所有input" onclick="wpa()" />
<input type="button" value="li中的文字加粗" onclick="cu()" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
<script>
//给input标签分别加上p标签
function wp() {
$('input:text').wrap('<p></p>');
}
//给input标签整体加上一个p标签
function wpa() {
$('input:text').wrapAll('<p></p>');
}
//将li变粗
function cu() {
$('li').wrapInner('<b></b>');
}
</script>

 

本文由皇牌天下投注网发布于计算机教程,转载请注明出处:JQuery常用知识点及示例皇牌天下投注网:

关键词:

上一篇:Apache运行机制剖析皇牌天下投注网:

下一篇:没有了

最火资讯