JQuery 的简单介绍

最新推荐文章于 2022-09-15 11:54:03 发布

Wonf

最新推荐文章于 2022-09-15 11:54:03 发布

阅读量1.4k

点赞数 1

分类专栏： jquery 文章标签： jquery 样式-设置

本文链接：https://blog.csdn.net/wushuang3625/article/details/61670852

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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
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:在动画完成时执行的函数，每个元素执行一次。

Wonf

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery 的简单介绍

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

扫一扫