JQuery

最新推荐文章于 2024-07-28 02:34:09 发布

莫默815

最新推荐文章于 2024-07-28 02:34:09 发布

阅读量850

点赞数

文章标签： jquery javascript 前端

原文链接：https://blog.youkuaiyun.com/kallenAB/article/details/126003668

版权

文章目录

jQuery知识及应用

jQuery知识及应用

什么是jQuery？

jQuery：javascript + query。
使用前期，jQuery侧重于快速找到页面上的各种节点。
使用后期，jQuer丰富了事件操作，ajax操作，动画效果，DOM操作等等。jQuery是对javascript封装的一个框架包，它简化了javacript的操作。

javascript代码：获得页面节点对象，ajax元素节点对象实现，事件操作，事件对象。

jQuery代码：无需考虑浏览器兼容问题，代码量少。

重点：（操作元素）

jquery方式操作属性(attribute)：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性
JS方式操作属性(attribute):
itnode.属性名称
itnode.属性名称= 值;
itnode.getAttribute(属性名称);
itnode.setAttribute(属性名称，值);
jQuery 中 attr() 和 prop() 方法的区别：具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

css样式操作

$().css(name，value); //设置

$().css(name); //获取

css()样式操作特点：

① 样式获取，jquery可以获取行内、内部、外部的样式。dom方式只能获得行内样式② 复合属性样式需要拆分为"具体样式"才可以操作例如：

background 需要拆分为 background-color ， background-image 等进行操作 border：
border-left-style ，border-left-width ，border-left-color 等1. 内容过滤选择器1.1 :contains(内容)
包含内容选择器，获得节点内部必须通过标签包含指定的内容

$(“div:contains(beijing)”)
<div>linken love beijing</div>
<div>jack love shanghai</div>1.2 :empty

获得空元素(内部没有任何元素/文本(空) )节点对象

$(“div:empty”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>1.3 :has(选择器)

内部包含指定元素的选择器

  $(“div:has(#apple)”)
<div>hello</div>
<div><p></p></div>
<div><span id=”apple”></span></div>
<div><span class=”apple”></span></div>1.4 :parent

寻找的节点必须作为父元素节点存在(必须是别人的父亲)

$(“div:parent”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>

<div>      </div>

2、对应关系

$(‘#id’)----->document.getElementById(‘id’);

jQuery: $(‘#callen’)；

javascrip：document.getElementById(“callen”);
$(‘tag’)----->document.getElementsByTagName(‘tag’);

jQuery：$(‘a’)；
javascrip：document.getElementsByTagName(‘a’)；

$(‘.class’) class属性选择器：
$(‘.type1’)
$(‘*’) 通配符选择器
$(‘s1,s2,s3’) 联合选择器
$(‘.type1,#callen’);

总结

名称用法描述
ID选择器 $(‘#id’) 获取指定ID元素
全选选择器 $(‘*’) 匹配所有的元素
类选择器 $(‘.class’) 获取同一类class的元素
标签选择器 $(‘div’) 获取同类标签的所有元素
并集选择器 $(‘div,#id,li’) 选取多个元素
交集选择器 $(‘li.type1’) 交集元素

jQuery对象与DOM对象的区别与相互转换：
jQuery对象：包装DOM对象后产生的对象，是jQuery独有的，可以使用jQuery中的方法。

就取得value值的方式而言来看看jQuery对象与DOM对象的区别：
在这里插入图片描述

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理，DOM对象也不能使用jQuery中的方法。

但是这两种对象之间是可以相互转换的：

jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
var list = $(“ in p u t ”); // j Q u ery 对象。 v a r l i s t 2 = l i s t [0]; // D OM 对象。 j Q u ery 本身提供，通过 . g e t (in d e x) 方法，得到相应的 D OM 对象。 v a r l i s t =$ (“input”); //jQuery对象。
var list2=list.get(0); //DOM对象。
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。

var list = document.getElementById(“name”); //DOM对象。
var list2 = $(list); //jQuery对象。
在这里插入图片描述

基本动画

出现消失

<!DOCTYPE html>
<html>
     <head>
           <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
     <script src="../js/jquery-2.1.4.js" type="text/javascript"  charset="UTF-8"></script>
     <script type="text/javascript">
           
           function f1(){
                //隐藏
                $('div').hide(3000,function(){
                     alert('我消失了');
                });
           }
           function f2(){
                //隐藏
                $('div').show(3000,function(){
                     alert('我出现了');
                });
           }
            function f3(){
            $('div').toggle(2000);
        }
     </script>
     <style type="text/css">
           div{
                width:300px;
                 height:200px;
                 background-color:blue;
           }
     </style>
     </head>
     <body>
           <h2>基本动画类型</h2>
           <div></div>
           <input type="button" value="隐藏" onclick="f1()" />
        <input type="button" value="显示" onclick="f2()" />
         <input type="button" value="开关" onclick="f3()" />
     </body>
</html>
hide（3000）表示3秒后隐藏，show（3000）表示3秒后出现。

事件绑定

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <style type="text/css">
                div{
                     width:300px; height:200px;  background-color:lightblue;
                }
           </style>
     </head>
     <body>
     <h2>事件绑定</h2>
     <div></div>
     <script type="text/javascript" src="../js/jquery-2.1.4.js"  ></script>
     <script type="text/javascript">
           $(function(){
                $('div').bind('click',function(){
                      console.log("碰了一下");
                });
                $('div').on('mouseenter',function(){
                      console.log('mouseenter');
                     $(this).css('background-color','lightgreen');
                });
                $('div').on('mouseout',function(){
                     console.log('mouseout');
                      $(this).css('background-color','orangered');
                });
           });
     </script>
     </body>
</html>