JQuery学习总结[I]

JQuery学习总结[1]

一：JQuery

1 JQuery知识

*:让我们学习调用JQ插件。其实里面是JS的封装。

*:jquery中有三个文件。

第二个和第三个的内容是一样的，但是第三个压缩了，使得浏览器的访问时间变短了。

我们在使用的时候把Jquery-1.4.2.js和jquery.1.4.2-vsdoc、js放在一起。事实上，vsdoc.js是对前一个的解释，它允许我们在编写代码时操作它。

*:练习《点击按钮弹出对话框的内容》 《点击网页里面的文字使文字一行一行消失》(“$”实际上是一个函数)

head script type=' text/JavaScript ' src=' http : js/jquery-1 . 4 . 2 . js '/script script type=' text/JavaScript ' $(function(){ $(' # BTN ')。单击(function () { alert($('#un '))。val())；});//单击弹出内容$ ('div ')。单击(function () {$ (this))。隐藏('慢')；});//文字消失})；/script/head body输入类型=' text ' id=' un '/输入类型=' button ' id=' BTN '/div body 2j query中的文本内容/div/Ready 《在网页刚开始就弹出内容》

$ (dofunction)。ready (function () {alert("加载完成")；})

其实你也可以这样写

$(function(){alert("加载完成")；});

解决方法：“$”此函数将匿名函数()注册为准备执行。

3 jquery内置函数。map(array，fn)调用fn函数处理数组中的每个元素，fn函数返回处理结果，最终得到一个新的数组。map(array，fn)调用fn函数处理数组中的每个元素，fn函数返回处理结果，最终得到一个新的数组。映射无法处理字典样式的数组。要使用以下$。每一个都要处理。

$.每个(array.fn)调用fn函数处理arr数组的每个元素，没有返回值。

var arr=[3，5，7]；Vararr2=$ map。(arr，函数(item) {return item * 2})函数编程。var arr={“Tom”；“乌木”、“张晓”；“小张”} $。每个(arr，函数(键，值){alert(键"="值)；});4 JQuery对象，Dom对象

Dom只是浏览器的一些标签，比如图层、按钮、标签等。数组是jq的对象。

Jquery对象是通过jquery包装Dom对象后生成的。jquery对象只能调用jquery对象封装的方法。您不能调用Dom对象的方法。

$(function(){$("#id ")。css(“背景”、“红色”)})；

上面的代码是复制的，即背景颜色设置为红色。如果属性在。css是一个，获取值，两个是设置值。

5 jquery选择器

*id选择器

$(“# div”)。html()；

*标签名选择器标签选择器

$(“div”)。点击(函数(){alert("你好，我是P ")；});

在这里，网页中的所有div标签都被选中，点击事件被添加到其中。

* css选择器

同时选择多种风格是制作风格的一个补充。

$(“div”)。点击(function () {alert("这是信息")})；

6多条件选择器/层次选择器

jquery的迭代

也就是说，里面的错误程序不会提示错误，所以我们应该添加if/elae语句来判断自己。

8 jquery的节点遍历

是使用next()，nextall()方法遍历。就好像数组中的遍历是一样的。这里我们只得到它的下一个元素的值。

兄弟():获取所有元素的兄弟元素(兄弟节点)。

*:jquery的链式编程

$(“div”)。单击(function(){$(this))。css('背景'，'红色')。兄弟姐妹(' div ')。css('背景'，'白色')})；通过点运算符很容易操作。

//这里是链式操作，减少了if/else等操作的使用。改变了编程风格。

！DOCTYPE html html lang=' en ' xmlns=' http://www .w3。org/1999/XHTML ' head meta charset=' utf-8 '/title/title script src=' http : js/jquery-1。4 .2-vsdoc。js '/script script src=' http : js/jquery-1。4 .2 .js '/script script type=' text/JavaScript ' $(function())html(' img src=' images/1 . jpg '/').将鼠标悬停在(function(){ $(' # tables TD '))上.html(' img src=' images/1。jpg '/')；$(这个)。nextAll().html(' img src=' images/2。jpg '/')；});});/script/head body table id=' tables ' trtd/tdtd/tdtd/TD TD/tr/table/body/html 9:基本的过滤器

这里可以将其写在一起，比如选择器和过滤器，这样子就会很强大。

不仅可以使用选择器进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素。

案例：

（相对定位)

：这里的元素就是在定位#表tr下的任务描述的定位

10 属性过滤器

例如：

！DOCTYPE html html lang=' en ' xmlns=' http://www .w3。org/1999/XHTML ' head meta charset=' utf-8 '/script src=' http : js/jquery-1。4 .2 .js '/script script src=' http : js/jquery-1。4 .2-vsdoc。js '/脚本标题/title脚本类型=' text/JavaScript ' $(function())显示选中的内容]').单击(函数(){ alert($(' input 3360 checked ')).val())；});});/脚本/流浆池输入类型='复选框'值='上海'/上海br/输入类型='复选框'值='宝鸡'/宝鸡br/输入类型='复选框'值='深圳'/深圳br/输入类型='复选框'值='西安'/西安br/输入类型='复选框'值='北京'/北京br/输入类型='提交'值='显示选中的内容//body/html11元素的每个通过一些过滤器和选择器来遍历每个一些元素。

！DOCTYPE html html lang=' en ' xmlns=' http://www .w3。org/1999/XHTML ' head meta charset=' utf-8 '/script src=' http : js/jquery-1。4 .2 .js '/script script src=' http : js/jquery-1。4 .2-vsdoc。js '/脚本标题/title脚本类型=' text/JavaScript ' $(function())单击(函数(){ var arr=new Array()；$(“输入[name=name]:已选中”).每个（函数（键，值){ arr[键]=$(值)。val()；});$('#msgNames ').文本('共选中' arr.length '项：' arr.join('，')；});});/脚本/流浆池输入类型='checkbox' name='names' value='张辉'/张辉输入类型='复选框'名称='名称'值='妈妈'/妈妈输入类型='复选框'名称='名称'值='妈妈'/妈妈输入类型='复选框'名称='名称'值='妈妈'/妈妈p id=' msgNames '/p/body(9507 . 163.com)

以上就是本文的全部内容，希望对大家有所帮助，下篇文章继续介绍JQuery基本知识- JQuery学习总结【二】,有兴趣的朋友可以看下。谢谢对我们的支持！