JQuery

最新推荐文章于 2023-02-23 18:15:52 发布

Hhxx_bzay

最新推荐文章于 2023-02-23 18:15:52 发布

阅读量120

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/Hhxx_bzay/article/details/126701288

版权

jQuery入门导读

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

jQuery是一个主流的优秀的JavaScript类库，是由John resig在2006年1月创建的。

jQuery库包含核心库、UI、插件和jQuery Mobile等模块。（LayUI）

jQuery凭借着强大的选择器、链式操作以及出色的浏览器兼容性，极大的简化访问和更新HTML页面、DOM操作、事件处理以及执行动画等操作。

“写得少，做的多“

JavaScrit库

jQuery 库包含以下功能：

HTML 元素选取 √
HTML 元素操作 √
CSS 操作 √
HTML 事件函数 √
JavaScript 特效和动画
HTML DOM 遍历和修改 √
AJAX √
Utilities

jQuery概述

通过封装JS代码的方式简化操作

jQuery基本使用-文档就绪事件

$(document).ready(function(){

   //代码内容

});

还有更简洁的做法

$(function(){

   // 开始写 jQuery 代码...

});

jQuery顶级对象$

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$(“#test”).hide() - 隐藏 id=“test” 的元素

DOM对象和jQuery对象

1、jQuery获取的对象，不能直接使用DOM中的方法

2、JQuery获取的对象加上[] 后可以使用DOM中的内容（包括使用get() 方式）

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、同一函数实现set和get

$("#msg").html();                      //  返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>");  // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text();                      //  返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>");  // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("#msg").height();                    // 返回id 为msg 的元素的高度
$("#msg").height("300");             // 将id 为msg 的元素的高度设为300
$("#msg").width();                     // 返回id 为msg 的元素的宽度
$("#msg").width("300");              // 将id 为msg 的元素的宽度设为300
$("input").val(");                       //  返回表单输入框的value 值
$("input").val("test");                 // 将表单输入框的value 值设为test
$("#msg").click();                     //  触发id 为msg 的元素的单击事件
$("#msg").click(fn);                   // 为id 为msg 的元素单击事件添加函数

4、集合处理

使用each 配合函数可以做集合的遍历和处理

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})   // 为索引分别为0 ，1 ，2 的p 元素分别设定不同的字体颜色。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})   // 实现表格的隔行换色效果
$("p").click(function(){alert($(this).html())})     // 为每个p 元素增加了click 事件，单击某个p 元素则弹出其内容

5、扩展 JQuery对象

$.extend({
   min: function(a, b){return a < b?a:b; },
   max: function(a, b){return a > b?a:b; } 
});   // 为jquery 扩展了min,max 两个方法

6、链式写法

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

7、元素操作

$("#msg").css("background");          // 返回元素的背景颜色
$("#msg").css("background","#ccc") // 设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");      // 设定宽高
$("#msg").css({ color: "red", background: "blue" });// 以名值对的形式设定样式
$("#msg").addClass("select");        // 为元素增加名称为select 的class
$("#msg").removeClass("select");   // 删除元素名称为select 的class
$("#msg").toggleClass("select");    // 如果存在（不存在）就删除（添加）名称为select 的class

jQuery常用AI导读

JQuery中文手册

jQuery基本和层级选择器

基础选择器的使用

复合选择器的使用

jQuery隐式迭代

 let arr = document.querySelectorAll('li')
 for(let i = 0;i < liArr.length;i++) {
         arr[i].onclick = function () {
            console.log('原生循环');
        }
     }

 // 隐式迭代实现
 $(function () {
         $('li').on('click',function () {
            console.log('隐式迭代');
        })
     })
 //可以用无序列表体验一下

jQuery筛选选择器

属性筛选选择器
[att=val] 选取att属性等于val的标记

[att] 选择有att属性的标记

[att|=val] 选取att中以val开头的属性

[att~=val] 选取att中包含val的属性

[att^=val] 选取att中以val开头的属性

[att*=val] 选取att中包含val的属性

[att$=val] 选取att中以val结尾的属性

[att!=val] 选取att中不包含val的属性

jQuery筛选方法-选取父子元素

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，
比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),
但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只
会返回直接的孩子节点，不会返回所有的子孙节点

jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是
从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从

p元素开始找,等同于$("p span")

新浪下拉菜单

jQuery其他筛选方法

在jQuery对象数组中，过滤出一部分元素 ：
1)、首先获取ul中所有的li子元素，即会产生一个li数组uls
var uls =$("ul>li");

2)、first()：获取数组uls中的第一个元素，即第一个li标签.
ls.first().css({"background":"pink"});

3)、last()：获取数组uls中的最后一个元素，即最后一个li标签.
=uls.last().css({"background":"pink"});

4)、eq(index):从数组uls中找到下标为2的元素.
                 uls.eq(2).css({"background":"pink"});
                    4.1)、从数组uls中找到倒数第2个元素.
                 uls.eq(-2).css({"background":"yellow"});
5)、filter(selector)：匹配到类名为sa的元素。
uls.filter(".sa").css({"background":"yellow"});
    5.1)、匹配到有属性title，并且值为a的元素.
    uls.filter("[title=a]").css({"background":"yellow"});
5.2)、匹配到属性title的值不为a的元素
                     uls.filter("[title!=a]").css({"background":"yellow"});
                    5.3)、匹配到有title属性，且属性值不为a的元素.
                     uls.filter("[title][title!=a]").css({"background":"yellow"});
                    5.4)、从数组uls中过滤出有title属性的元素集合.
                     uls.filter("[title]").css({"background":"blue"});
                6)、has(selector)：从数组uls中过滤出有<span>标签的元素集合.
                 uls.has("span").css({"background":"blue"});
                7)、从数组uls中过滤出没有title属性的元素集合.
                 uls.not("[title]").css({"background":"blue"});

jQuery排他思想

1、siblings

    语法：siblings(selector)

    用法：$(".frist").siblings(“li”)

说明：查找兄弟节点，不包括自身元素

2、排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

16-淘宝服饰精品案例

jQuery链式编程

jQuery修改样式css方法

css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width()	设置或返回匹配元素的宽度。

jQuery修改样式操作类

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

tab栏切换案例

jQuery类操作和className区别

jquery 相当于类名的追加

className相当于覆盖

jQuery显示与隐藏效果

show()

hide()

jQuery滑动效果以及事件切换

jQuery停止动画排队stop

jQuery淡入淡出以及突出显示案例

jQuery自定义动画animate方法

王者荣耀手风琴案例布局分析

王者荣耀手风琴案例制作

jQuery属性操作

方法	描述
attr()	设置或返回匹配元素的属性和值。
removeAttr()	从所有匹配的元素中移除指定的属性。

购物车模块-全选（上）

购物车模块-全选（下）

jQuery内容文本值

$("#msg").html();                      //  返回id 为msg 的元素节点的html 内容。
$("#msg").html("<b>new content</b>");  // 将“<b>new content</b>” 作为html 串写入id 为msg 的元素节点内容中, 页面显示粗体的new content
$("#msg").text();                      //  返回id 为msg 的元素节点的文本内容。
$("#msg").text("<b>new content</b>");  // 将“<b>new content</b>” 作为普通文本串写入id 为msg 的元素节点内容中, 页面显示<b>new content</b>
$("input").val(");                       //  返回表单输入框的value 值
$("input").val("test");                 // 将表单输入框的value 值设为test

购物车模块-增减商品数量

购物车模块-修改商品小计

jQuery遍历对象each方法

$('div').each(function(){
    if($(this).is(':hidden')) return;//跳过隐藏的元素

    //对可见的元素操作
});

jQuery遍历数据$.each

var myArray = ["apple", "mango", "orange", "grapes", "banana"];
$.each(myArray, function (index, value) {
  console.log(index+' : '+value);
});

购物车模块-计算总件数和总额

创建、添加、删除元素

创建元素

$("<li></li>"); // 动态创建了一个li标签

内部添加

// 把内容放入到元素的最后面
element.append("内容");
// 把内容放入到元素的最前面
element.prepend("内容");

外部添加

// 把内容放到元素最后面
element.after("内容");
// 把内容放到元素最前面
element.before("内容");

删除元素

// 删除匹配元素本身 自杀
element.remove(); 
// 删除匹配元素中所有的子节点 也就是删除孩子
element.empty();
// 清空匹配的元素内容 也是删除孩子
element.html("");

购物车模块-清理购物车

购物车模块-选中商品添加背景颜色

jQuery尺寸方法

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery位置方法

$(".btn1").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

事件方法

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件

事件处理on绑定一个或者多个事件

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法
语法格式：$(selector).on( events [, selector ] [, data ], handler )
参数介绍：
- 第一个参数：events，事件名
- 第二个参数：selector,类似delegate
- 第三个参数: 传递给事件响应方法的参数
- 第四个参数：handler，事件处理方法
  
  例如：
  //绑定一个方法
  $( “#dataTable tbody tr” ).on( “click”, function() {
  console.log( $( this ).text() );
  });
  //给子元素绑定事件
  $( “#dataTable tbody” ).on( “click”, “tr”, function() {
  console.log( $( this ).text() );
  });
  //绑定多个事件的方式
  $( “div.test” ).on({
  click: function() {
```
$( this ).toggleClass( "active" );
```
  }, mouseenter: function() {
```
$( this ).addClass( "inside" );
```
  }, mouseleave: function() {
```
$( this ).removeClass( "inside" );
```
  }
  });

one绑定一次事件的方式

.one( events [, data ], handler )

例如：
```
$( "p" ).one( "click", function() {

     alert( $( this ).text() );

});
```
delegate方式（推荐，性能高，支持动态创建的元素）
- 语法格式：$(selector).delegate( selector, eventType, handler )
- 语法说明：
  - 第一个参数:selector，子选择器
  - 第二个参数：事件类型
  - 第三个参数：事件响应方法
    
    例如：
```
  
$(".parentBox").delegate("p", "click", function(){

//为 .parentBox下面的所有的p标签绑定事件

});
```
*优势：效率较高

off解绑事件

$("button").click(function(){
    $("p").off("click");
});

$(selector).undelegate(selector,event,function)

jQuery自动触发事件

<div class="login-btn">
    <input type="button" value=“登录” onclick="checkLogin"/>
</div>
$("login-btn input").trigger("click")

Hhxx_bzay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

关于jQuery
复制链接

扫一扫