JQuery 的简单介绍

来源：互联网发布：淘宝优质网店怎么搜编辑：程序博客网时间：2024/06/02 04:15

JQuery的优势
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
- 体积小，压缩后只有100KB左右
- 在页面中引入jQuery
首先需在页面中引入jQuery.
引入方法：
<script src="js文件路名" type="text/javascript"></script>

jQuery语法结构

$(selector).action() ;
$(document).ready() 等同于 jQuery(document).ready()
- 工厂函数()：“”等同于“jQuery” 将DOM对象转化为jQuery对象
- 选择器selector：获取需要操作的DOM元素（document）
- 方法action()：jQuery中提供的方法，包括绑定事件处理的方法
  示例：

    $("#current").addClass("current");   //  id选择    $("input").addClass("current");  //  标签选择    $(".current").addClass("other");  //  class类名选择

jQuery的一般方法

css(); 为元素设置CSS样式的值
addClass(0;) 为元素添加类样式
html(“HTML代码”)为元素设置innerHTML的值
连续操作直接加点

$("h2").css("background-color", "#CCFFFF").next().css("display", "block");

示例：设置元素样式

<head lang="en">    <meta charset="UTF-8">    <title></title>    <!--引入jQuery,"js/jquery-2.2.4.js"文件-->    <script src="js/jquery-2.2.4.js" type="text/javascript"></script>    <style>        .mm{            border:5px solid #000        }    </style></head><body>    <img class="first" id="img" src="../html/shop_41.png" alt="默认文字" title="悬浮文字"style="width: 200px;"/>    <script>        //js   方法一：Javascript 单击动态添加样式        var m=document.getElementsByClassName("first")[0];        m.onclick=function(){            // 设置图片的边框样式为 5px solid red.            this.style.border="5px solid red";        }        // jQuery，鼠标悬浮后特效        $(".first").mouseover(function(){            $(".first").css("border","5px solid yellow")        })    </script></body>

$(document).ready() 和window.onload 区别

执行时机：
- window.onload必须等待网页中所有的内容加载完毕后（包括图片、flash等）才能执行，
- ready()网页中所有DOM文档结构绘制完毕后即可执行，DOM内容不一定加载完
编写个数：
- onload:同一面不能荣氏编写多个
- ready():同一页面能同时编写多个
ready简写 $(function(){
})

jQuery和DOM的互相转化

Query对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName = $ (".txtName");//jQuery对象var txtName  = $txtName[0]; //DOM对象

通过get(index)方法得到相应的DOM对象

var $txtName = $ (".txtName");//jQuery对象var txtName = $txtName.get(0);//DOM对象

DOM对象转换为jQuery对象:只需要在DOM加$();
1.常使用(this)来获取触发该事件的当前jQuery对象2.jQuery对象命名一般约定以开头

jQuery选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素

//获取并设置网页中所有<h3>元素的背景$( "h3" ).css( "background", "#09F" );

jQuery选择器功能强大，种类也很多，分类如下
- 类CSS选择器
  - 基本选择器：标签、类、ID、并集、交集、、全局选择器
  - 层次选择器：层次选择器通过DOM 元素之间的层次关系来获来获取元素
    - 后代选择器 $(#menu span)
    - 子选择器 $(parent>child)
    - 相邻元素选择器 (preb+next)(“h2+dl”)
    - 同辈元素选择器:$(“prev~sibing”) 选取prev元素之后的所有siblings元素。
  - 属性选择器：
    - 属性选择通过HTML元素的属性来选择元素。
    - [attribute] 选取包含给定属性的元素
    - [attribute=value] 选取等于给定属性是某个特定值的元素
    - [attribute!=value]
    - [attribute^=value] 选取给定属性是以某些特定值开始的元素 $(“input[type^=’te’]”)
    - [attribute$=value] 选取给定属性是以某些特定值结尾的元素
    - [attribute*=value] 选取给定属性是以包含某些值的元素
    - [selector][selector2][selectorN] 选取满足多个条件的复合属性的元素。
- 过滤选择器
  - 基本过滤选择器
    - :first
    - :last
    - :even 选取索引是偶数的所有元素（从index为哦开始）
    - :odd 选取索引号是奇数的所有元素 $(“li:odd”)
    - :eq(index) 选取索引等于index的元素
    - :gt(index) 选取索引大于index
    - :lt(index) 选取索引小于index
    - :not(selector)
    - :header 选取所有标题元素，如h1~h2。
    - :focus 选取当前获取焦点的元素
  - 可见性过滤选择器
    - visible 选取所有可见的元素
    - hidden 选取所有隐藏的元素
- 表单选择器
  - 表单中根据不同类型的表单元素进行选取
  - ：+表单—：input：text、password、radio、submit、checked、selected等
- 内容过滤器
  - :contains(text) 选取所有包含text文本的元素。
  - :empty 选取所有不含子元素或文本的空元素
  - :has(selector) 选取包含选择所匹配的元素的元素
  - :parent 选取含有子元素或者文本的元素。

在选择器中特殊符号需要转移。“\”

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

jQuery中和DOM中写法区别

jQuery DOM val value .html(“”) .innerHTML

jQuery 进行DOM操作

DOM操作分为三类：
- DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
- HTML-DOM：用于处理HTML文档，如document.forms
- CSS-DOM：用于操作CSS，如element.style.color=”green”
  获取元素的属性值
- getConputedStyle(a).width
- element.style.color
jQuery中的DOM操作
- jQuery对JavaScript中的DOM操作进行了封装，使用起来更简便
- jQuery中的DOM操作可分为：
  - 样式操作
  - 内容及value属性值操作
  - 节点操作
  - 节点属性操作
  - 节点遍历
  - CSS-DOM操作
使用CSS()指定的额元素设置样式
$(this).css( "border" , "5px solid #f5f5f5" );
$(this).css( { "border" : "5px solid #f5f5f5" , "opacity" : "0.5" } ); // JSON格式

opacity 0~1之间的数字透明度。对象的名称JSON可以中括号开始和花括号开始
JSON(JavaScript Object Notation)一种轻量级的数据交互格式
点号表示法来获取

实例：

  var json={            "students":[                {"name":"zs","age":"20"},                {"name":"ls","age":"19"}            ]        }        console.log(json.students[0].age)        alert(json.students[1].name);

追加和移除样式
- addClass(“class”) 或 addClass(“class1 class2 .. “)
  -removeClass(“class”) 或 removeClass(“class1 class2 .. “)

多个class用空格分开

<head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="js/jquery-2.2.4.js"></script>    <style>        .bg{            background: cornflowerblue;        }        .color{            color:yellow;        }    </style></head><body>    <div>jQuery追加和移除addClass样式</div>    <script>        //单机追加样式、双击移除样式        $("div").click(function(){            $("div").addClass("bg color");        }).dblclick(function(){            $(this).removeClass("bg color")        })    </script></body>

jQuery的简单操作

HTML代码操作
- html()可以对HTML代码进行操作，类似于原生JavaScript中的innerHTML

//获取html内容$("div.left").html();//设置html内容$("div.left").html("<divclass='content'>…</div>");

文本操作
- text()可以获取或设置元素的文本内容

$("div.left").text();$("div.left").text("<divclass='content'>…</div>");

value值操作
- val()可以获取或设置元素的value属性值

    // 获取value值    - $(input).val();         // 设置value值    - $(input).val("值");

节点操作

- jQuery中节点操作主要分为：查找节点、创建节点、插入节点、删除节点、替换节点、复制节点

- 创建节点元素
- 工厂函数()用于获取或创建节点−(selector)：通过选择器获取节点
- (element)：把DOM节点转化成jQuery节点−(html)：使用HTML字符串创建jQuery节点
- 插入子节点
- 元素内部插入子节点
- (A).append(B)将B追加到A中−(A).appendTo(B) 将A追加到B中
- (A).prepend(B)将B前置插入到A中−(A).prependTo(B) 将A前置插入到B中
- 元素外部插入同辈节点
- (A).after(B)将B插入到A之后−(A).insertAfter(B) 将A插入到B之后
- (A).before(B)将B插入至A之前−(A).insertBefore(B) 将A插入到B之前
- 删除节点
- remove()：删除整个节点
- detach()：删除整个节点，保留元素的绑定事件、附加的数据
- empty()：清空节点内容
- 替换节点
- replaceWith()和replaceAll()用于替换节点
- 复制节点：clone()用于复制节点
- (A).clone(true).appendTo(B);//参数true表示复制其事件∗clone()有个副作用就是会复制id，要么避免对有id的元素克隆，要么使用class代替id的作用∗−属性操作−attr()获取或设置匹配元素的属性值−removeAttr()匹配的元素中删除一个属性−(selector).removeAttr( “属性名称” );

// 获取元素的某属性的值$(selector).attr("属性名");//设置元素的一个属性值$(selector).attr("属性名","值"  );  // 设置多个属性值$(selector).attr( { "属性1" : "值1"  ,  "属性2" : "值2" } );

遍历子元素
- $(A).children()方法可以用来获取元素的所有子元素，不考虑后代元素
遍历同辈元素
- $(A).next() 用于获取紧邻A之后的元素
- $(A).prev() 用于获取紧邻A之前的元素
- $(A).siblings() 用于获取位于A前面和后面的所有同辈元素
- 遍历前辈元素
- $(A).parent()：获取A的父级元素
- (A).parents()：获取A的所有祖先元素，包括父级元素(A).parents(“B”) 所有父级元素中的B级元素
其他
- jQuery遍历 – each()
- 以每一个匹配的元素作为上下文来执行一个函数

    <button>点击显示图片</button>    <p></p>    <img src="" alt=""/>    <img src="" alt=""/>    <script>        $("button").click(function(){           $("img").each(function(i,elem){                this.src="img/index_"+i+".jpg"           })        })    </script>

查找方法 – find()
- 搜索所有与指定表达式匹配的元素
  $(“p”).find(“span”); // 在所有p元素的后代节点中查找span元素
CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度、相对位置等的样式操作方法
- .height() 不带单位
- .width()
- .offset() 返回一以像素为单位的top和left 坐标。此方法仅对可见元素有效。

jQuery的事件

jQuery事件是对JavaScript事件的封装，常用事件分类如下：
- 基础事件
- window事件
- 鼠标事件
- click(fn) 单机鼠标时
- mouseover(fn) 鼠标移过时
- mouseout(fn) 鼠标移除时
- 键盘事件
- keydown() 按下键盘时
- keyup() 释放按键时
- keypress() 产生可打印的字符
- 表单事件
- focus() 获得焦点
- blur() 失去焦点
- submit() 表单提交时
- 复合事件是多个事件的组合
- 鼠标光标悬停
- 鼠标连续点击

示例：简单实现购物车添加删除操作

//<body>      <table border="1" cellpadding="0" cellspacing="0">        <tr>            <td><label><input type='checkbox'/>全选</label></td>            <td>商品信息</td>            <td>单价</td>            <td>数量</td>            <td>操作</td>        </tr>        <tr>            <td><input type='checkbox'/></td>            <td>电脑</td>            <td>5000</td>            <td><input type='text' value='1'></td>            <td><a href="#">删除</a></td>        </tr>    </table>    <button>点击新增</button>    <script>        $("button").click(function(){            // 声明变量，存储新增行，变量中全用单引号，方便拼接。（必须放在单击事件内，否则只能生成一次）            var newnode=$(                    "<tr>"+                    "<td><input type='checkbox'/></td>"+                    "<td>电视</td>"+                    "<td>3000</td>"+                    "<td><input type='text' value='1'></td>"+                    "<td><a href='#'>删除</a></td>"+                    "</tr>"            );            // 新增节点            $("table").append(newnode)        });        // 使用事件委托，删除节点        $("table").on("click","a",function(){            $(this).parents("tr").remove();        })    </script> </body>

事件绑定

bind()事件绑定
unbind()方法 – 解除事件绑定
on()方法事件绑定
$("#form").on( "click" , ".btn" , {} , fn );
off()方法 – 解除事件绑定
(selector).off(events,[selector],[handler])(selector).off(events,[selector])
(selector).off(events)(selector).off()

常用on进行绑定
鼠标光变悬停事件：hover(fn1,fn2)
- 相当于mouseover与mouseout事件的组合
- fn1,鼠标悬停mouseover时的方法
- fn2,鼠标离开mouseover时的方法
鼠标连续click事件（过时）
- toggle()方法可以切换元素
- - toggleClass() 改变class

Query的动画效果

jQuery提供了很多动画效果，如：
- 控制元素显示与隐藏
- 控制元素淡入淡出
- 改变元素高度
显示及隐藏元素
- show([duration]，[complete])
- hide([duration]，[complete])
  $(".tipsbox").show("slow");
淡入淡出效果
- fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
明度实现淡入淡出效果
toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态
$("li:gt(5):not(:last)").toggle();
示例：

<body>        <button>显示</button>        <button>隐藏</button>        <button>淡入</button>        <button>淡出</button>        <div>        Lorem ipsum dolor sit amet, consectetur adipisicing         </div>        <script>            $("button").eq(0).click(function(){                $("div").show("slow")            })            $("button").eq(2).click(function(){                $("div").fadeIn("slow")            })            $("button").eq(1).click(function(){                $("div").hide("slow")            })            $("button").eq(3).click(function(){                $("div").fadeOut("slow")            })        </script>

改变元素的高度
- slideDown() 可以使元素逐步延伸显示
- slideUp()则使元素逐步缩短直至隐藏
自定义动画:animate()
- 方法用于创建自定义动画的函数
  $(selector).animate( params[,speed][,easing][,fn]);
  params:规定产生动画效果的CSS样式和值
  speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
  easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”。
  fn:在动画完成时执行的函数，每个元素执行一次。

0 0