JQuery

简介：

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。说白了他就是js的一个库，我们可以向导入js文件一样导入它。

jQuery学习网站：http://jquery.cuishifeng.cn/

jQuery库导入网站来源：https://www.bootcdn.cn/jquery/

导入jq：

在线导入：<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
本地导入：在本地建一个js文件，如jquery.js.向文件中copyjQuery的源代码。
```
<script src="jquery.js"></script>
```

在jQuery中用$符号表示jQuery

基础语法： $(selector).action()

对象获取

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。

通过id 获取：

var $obox = $("#xxx")

通过class获取:

var $obox = $(".xxx")

通过标签获取：

var $obox = $("p")

通过标签加类名或id：

var $obox = $("p.xx") //获取类名xx的<p>元素

通过上下文选择器获取：

var $obox = $("ul li")

直接通过属性名获取：

$("[href]") //选取带有 href 属性的元素

通过标签加属性获取：

$("a[target='_blank']") //选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']") //选取所有 target 属性值不等于 "_blank" 的 <a> 元素

js中innerHTML和innerText在jQuery中使用html()代替，如$obox.html("xxx")，jq解析时自带遍历，会一次修改所有满足的对象。

js和jq的互转

js转加jq：就是在js对象前加$，如$(obox)

jq转js：有两种方式，一种是在jq对象后面加下标，如$obox[0]，或是通过get方法来指定下标，如$obox.get[0]。

jq转特定的jq：如果既想通过下标指定唯一的对象，且继续使用jq的方法，可以将jq转为特定的jq，通过eq方法指定下标，如：$obox.eq(0).html("xxx")

jq操作属性的方法

读取对象类名：

$obox.attr("class")

改对象的类名：

$obox.attr("class","666") //将类名改为666

增加属性：

$obox.attr("id","666") //增加属性名为id，其值为666

移除属性：

$obox.removeAttr("id") //移除id属性

增加类名：

$obox.addClass("aa","bb") //增加类名aa和bb

移除类名：

$obox.removeClass("aa","bb") //移除类名aa和bb，若不传参，则默认移除所有类名

增加类名或移除类名：

$obox.toggleCalss("aa") //有类名aa就删除，没有就增加

设置css属性：

$obox.css({"background-color":"yellow","font-size":"200%"});

$obox.css("background-color"); //返回css属性值

jq的事件

jq里面的事件都是函数形式，虽然大部分都是去掉on的，但原理上都是事件绑定的形式，而不是赋值的形式。事件绑定用on方法，解绑用off方法。

绑定一个事件：

$obox.on("click",function(){
//函数体
//$(this).index()
})

jq对象的index方法能返回其索引。

绑定多个事件：

$obox.on({"click":function () {
    alert($(this).index());
}, "mouseenter":function () {
        console.log(666);
    }
});

去掉on，直接调用事件：

  $obox.click(function () {
        alert($(this).index());
    })

事件解绑：

$obox.off();   //不传参，表示解绑该对象的所有事件
$obox.off("click")   //解绑对象指定的事件，这里是指定解绑点击事件

hover，鼠标移入移出一起执行：

  $obox.hover(function () {
         //一个函数，移入移出执行同一个函数
        console.log(5)
    });

  $obox.hover(function () {
        console.log("鼠标移入");//移入函数
    },function () {
        console.log("鼠标移出");//移出函数
    })

jq效果

jq效果有隐藏、显示、切换，滑动，淡入淡出，以及动画。下面一一介绍它们。

隐藏和显示

show方法用于显示，hide方法用户隐藏，toggle方法用于显示隐藏、隐藏显示。这三个方法，不传参瞬间显示隐藏传一个数字参数，代表毫秒，改变宽、高、透明度）（隐藏是左上角固定，其他三角往回收缩）。

 $obox.hide(2000);
 $obox.show(2000);

   $obox.hover(function () {
        $obox.hide(2000);
    },function () {
        $obox.show(2000);
    })

淡入淡出

fadeIn方法用于淡入，fadeOut用于淡出，fadeTo方法可以指定改变后的透明度值，fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。以上方法默认时间是400毫秒，且fadeTo方法时间参数在第一个，且不能省。

$obox.fadeOut(2000);
$obox.fadeIn(2000);
$obox.fadeTo(2000,0.4)

   $obox.hover(function () {
        $obox.fadeToggle(2000);
    },function () {
        $obox.fadeToggle(2000);
    })

滑动

jQuery 滑动方法可使元素上下滑动。sildUp方法用于划出，sildDown方法用于滑入，类似于生活中的卷帘子。 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换，如果元素向下滑动，则 slideToggle() 可向上滑动它们，如果元素向上滑动，则 slideToggle() 可向下滑动它们。滑动改变的仅是高度，不会改变透明度，默认400毫秒。

$obox.slideUp();
$obox.slideDown();

 $obox.hover(function () {
        $obox.slideUp();
    },function () {
         $obox.slideDown();
    })

动画

jQuery animate() 方法允许您创建自定义的动画。语法：$(selector).animate({params},speed,callback);其中必需的 params 参数定义形成动画的 CSS 属性；可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒；可选的 callback 参数是动画完成后所执行的函数名称。

$obox.animate({
       "width":"100px",
       "height":"200px",
    },1000)

可以用 animate() 方法来操作所有 CSS 属性，但对于复合属性，如margin-left、padding-right等，需要去掉-，且-后面首字母大写。如marginLeft、paddingRight。

可以定义相对值（该值相对于元素的当前值），即在值的前面加上 += 或 -=，如下所示：

  $obox.animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。语法是$(selector).stop(stopAll,goToEnd)，其中可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行；可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。

$obox.stop()

jq遍历

jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

遍历祖先：

$obox.parent()方法返回被选元素的直接父元素。

$obox.parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

遍历后代：

后代是子、孙、曾孙等等。

$obox.children() 方法返回被选元素的所有直接子元素,即儿子。该方法只会向下一级对 DOM 树进行遍历。

$obox.find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。不传参默认不找，传*指查找出所有的后代，也可以指定标签进行查找。

遍历同胞：

$obox.siblings() 方法返回被选元素的所有同胞元素。

$obox.next() 方法返回被选元素的下一个同胞元素。

$obox.nextAll() 方法返回被选元素的所有跟随的同胞元素，从指定元素向下查找。

prev(), prevAll() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

jq添加及删除元素

通过 jQuery，可以很容易地添加新元素/内容。有一下四种方法。

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容，即下一个兄弟元素。
before() - 在被选元素之前插入内容，即上一个兄弟元素。

通过 jQuery，也可以很容易地删除已有的 HTML 元素。

remove() - 删除被选元素（及其子元素），可接受一个参数，允许您对被删元素进行过滤。$("p").remove(".italic")表示删除 class="italic" 的所有 <p> 元素：
empty() - 从被选元素中删除子元素

delay

delay 只对动画有用，具有延时作用。

$obox.delay(2000).slideUp();表示2秒后划出

jq操作样式

获取样式属性：

$obox.width()

$obox.innerWidth() //这个宽度包括padding

$obox.outerWidth() //这个宽度包括padding和border，也就是盒子的真正大小

操作样式：

$obox.css({"width":"200px","height":"250px"}) //一次操作多个样式，样式间逗号隔开

offset()代表元素到浏览器窗口的值，有两个属性，一个是top，另一个是left。

$obox.offset().top

position()代表该对象定位到父级的距离，也有两个属性，分别是top和left/

posted @ 2018-11-24 15:53 龙~白阅读(153) 评论(0) 编辑收藏举报

刷新页面返回顶部