首页 > 其他分享 >jQuery

jQuery

时间：2023-07-25 22:22:44浏览次数：30  
标签：jQuery function 标签 元素 div c1

目录

简介

jQuery是对js的一个高度封装,jQuery它的内部封装了很多的js代码，并且额外增加了很多功能,它就是js 的一个类库。
'''在python中，我们有模块这个概念，js中没有模块的概念，与类库的概念，类库就相当于是我们的模块'''

jQuery的优势
1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

# 学习jQuery内容：
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax(放在Django中学---》重要)


# jQuery版本
● 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
● 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
● 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本

# jQuery文件去哪里下载？
1. 去官网：https://jquery.com/
2. 第三方：https://jquery.cuishifeng.cn/index.html
3. bootcdn网站下载：https://www.bootcdn.cn/jquery/
4. 使用jquery文件有两种方式：
	1、 把文件下载下来，离线使用
    	1.1、将文件另存为到电脑中
        1.2、将文件复制到pycharm后引用文件即可使用
          <script src="jquery.js"></script>
            在pycharm中配置Editor->File and Code Templates->选择HTML FILE将<script src="jquery.js"></script>配置
        
    2、 不下载，直接通过cdn链接使用(你的电脑必须有网)
    	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>


# jquery基本使用
jQuery("selector").action()
jQuery("#d1").css('color', 'red');
# jQuery 简写$
$("#d1").css('color', 'red')；相当于jQuery("#d1").css('color', 'red');

# 学习jQuery的步骤：
1. 先学会如何查找标签
2. 找到标签之后在进行操作标签

标签对象和jQuery对象

1. jQuery对象:jQuery对象就是通过jQuery包装DOM对象后产生的对象
    		# 如果你是jQuery对象，那么就可以使用jQuery提供的很多方法
2. 标签对象:就是通过各种选择器得到的标签
    		# 标签对象不能够直接使用jQuery库提供的很多方法

两个对象之间可以进行互相转换
#jquery对象转为标签对象:直接通过下标取值
var h1=document.getElementsByTagName('h1')[0];

#标签对象如何转为jquery对象：通过$包起来
document.getElementById('id')
$(document.getElementById('id'));

'''记住如果是jquery对象的话，可以使用jquery给你封装的好多好多的方法'''

基本选择器

id、class、标签选择器

1. id			$("#id")
2. class		$(".className")
3. 标签选择器     $("tagName")


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<h1 id="h1" class="c1">hello</h1>
<script>
    //js写法
    // var h1=document.getElementsByTagName('h1')[0];
    // h1.style.color='red'
    
    //jQuery写法
    // class选择器
    var h1=$('.c1')
    h1.css('color','red');
    //标签选择器
    var h1=$('h1');
    h1.css('color','red');
    // id选择器
    var h1=$('#h1');//相当于var h1=document.getElementsByTagName('h1')[0];
    console.log(h1[0]);//<h1 id="h1" class="h1">hello</h1>

</script>
</body>
</html>

其他选择器

$(".c1")-------------->具有class=c1的所有标签
$("div.c1")-------------->具有class=c1的div标签


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div class="c1" id="d1"></div>
<span class="c1"></span>
<p class="c1"></p>

<script>
    // var c1 = $('.c1');
    // var c1 = $('div.c1');
    // var c1 = $('div#d1');
    // console.log(c1);
    // var c1=$('*');//所有标签
    // $('#d1,.c1,p') // 逗号分开代表的是并列关系
    // $('div span')  // # 后代
    $('div>span')  //  儿子

</script>
</body>
</html>

组合选择器

$('#d1,.c1,p')  # 并列+混用
$('div span')  # 后代
$('div>span')  # 儿子
$('div+span')  # 毗邻
$('div~span')  # 弟弟


<body>
<div id="d1">div
<span>div下的span
<p></p>
</span>
</div>
<span class="c1">span</span>
<script>
    var res=$('#d1,.c1,p').css('color','red')
    var res1=$("div span").css('color','green')
</script>
</body>

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<ul>
  <li>11111</li>
  <li>2222</li>
  <li class="c1">3333</li>
  <li>44444</li>
  <li>555555</li>
</ul>

<script>
    // $("ul li:first").css('color', 'red');
    // $("ul li:last").css('color', 'green');
    // equalgt
    // $("ul li:eq(3)").css('color', 'brown');
    // $("ul li:even").css('color', 'brown');
    // $("ul li:odd").css('color', 'red');
    // $("ul li:gt(1)").css('color', 'red');
    // $("ul li:lt(3)").css('color', 'red');
    // $("ul li:not('.c1')").css('color', 'red');

</script>
</body>
</html>

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type='password']");
$(':password') //等同于上面
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option


$(':checked')  # 它会将checked和selected都拿到
$(':selected')  # 它不会 只拿selected
$('input:checked')  # 自己加一个限制条件

筛选器方法

下一个元素：
$("#id").next() //查找当前元素的下一个元素
$("#id").nextAll() //查找当前元素后的所有元素
$("#id").nextUntil("#i2") // 查找当前元素后的所有元素，直到遇到匹配的那个元素为止。


上一个元素：
# previous
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：
# js: parentElement.parentElement.parentElement.parentElement
# jq:
$("#id").parent();
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。



儿子和兄弟元素：
# 儿子元素：children, siblings
# jq: 
$("#id").children()[0];// 儿子们
$("#id").siblings();// 兄弟们



查找(掌握)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
$("div").find("p")----------------->等价于$("div p")
$("div p").find("a")----------------->等价于$("div p a")
$("#d1 .c1").find("a")----------------->等价于$("#d1 .c1 a")



筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")


补充写法：
.first() // 获取匹配的第一个元素
  	$('div span:first')-------------->$('div span').first()
.last() // 获取匹配的最后一个元素
      $('div span:last')----------------->$('div span').last()
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
      $('div span:not("#d3")') --------------->$('div span').not('#d3')
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

$("ul li:eq(2)")--------------------------->$("ul li").eq(2);
$("div span:eq(2)")--------------------------->$("div span").eq(2);



* 例
<body>
<div class="c1">div
<p>
    <span class="c2"></span>
</p>
</div>
<p class="p1">p</p>
<span class="s1">span</span>
<span class="s1">span</span>
<span class="s1" id="i2">span</span>
<span class="s1">span</span>
<script>
    console.log($(".c1").next());
    console.log($(".c1").nextAll())
    console.log($(".c1").nextUntil('#i2'))
    console.log($(".p1").prev())
    console.log($(".c2").parent())
    console.log($(".c2").parent().parent()) //jq支持链式操作
    console.log($(".c1").children())
    console.log($(".c1").siblings())
    console.log($("div").find('p'))
    console.log($("div").filter('.c1'))
</script>
</body>
  • 例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>左侧菜单示例</title>
  <style>
    .left {
      position: fixed;
      left: 0;
      top: 0;
      width: 20%;
      height: 100%;
      background-color: rgb(47, 53, 61);
    }

    .right {
      width: 80%;
      height: 100%;
    }

    .menu {
      color: white;
    }

    .title {
      text-align: center;
      padding: 10px 15px;
      border-bottom: 1px solid #23282e;
    }

    .items {
      background-color: #181c20;

    }
    .item {
      padding: 5px 10px;
      border-bottom: 1px solid #23282e;
    }

    .hide {
      display: none;
    }
  </style>
</head>
<body>

<div class="left">
  <div class="menu">
    <div class="item">
      <div class="title">菜单一</div>
      <div class="items">
        <div class="item">111</div>
        <div class="item">222</div>
        <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单二</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
    <div class="item">
      <div class="title">菜单三</div>
      <div class="items hide">
      <div class="item">111</div>
      <div class="item">222</div>
      <div class="item">333</div>
    </div>
    </div>
  </div>
</div>
<div class="right"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(".title").click(function (){  // jQuery绑定事件
    // 隐藏所有class里有.items的标签
    // $(".items").addClass("hide");  //批量操作
    // $(this).next().removeClass("hide");
    
    // jQuery链式操作
    $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')
  });
</script>

操作标签

样式操作

js操作                            jq操作
classList.add()------------------>addClass();// 添加指定的CSS类名。
classList.reomve()----------------->removeClass();// 移除指定的CSS类名。
classList.containes()------------------>hasClass();// 判断样式存不存在
classList.toggle()--------------->toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。


addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加


* 例
<body>
<div class="c1" id="d1">div</div>
<script>
// document.getElementById('d1').classList.add("c2")
$("#d1").addClass("c2")
$(".c1").addClass('c3')
$(".c1").removeClass("c3")
$(".c1").toggleClass("c4")
</script>
</body>

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。


$(window).scrollTop() //滚动条基于浏览器顶部的距离

CSS操作

$("p").css("color", "red"); 
$("p").css("color", "red").css('','').css('','');

尺寸

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

文本操作(掌握)

HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值



设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])



* 例
<body>
<div class="c1" value="789">lalala</div>
<input type="text" id="d1" value="mmmm">
<input type="checkbox" name="gender">男
<input type="checkbox" name="gender">女

<script>
    document.getElementsByClassName('c1')[0].innerHTML="<h1>oo</h1>"
    console.log($(".c1").text("123"))
    console.log($(".c1").text("<h>345</h>"))
    console.log($(".c1").html("<h1>345</h1>"))
    console.log(document.getElementById('d1').value) //mmmm
    console.log($("#d1").val()) //mmmm
    console.log($("#d1").val('gggg'))
</script>
</body>

属性操作

用于ID等或自定义属性：
    attr(attrName)// 返回第一个匹配元素的属性值
    attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
    attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
    removeAttr()// 从每一个匹配的元素中删除一个属性
    
用于checkbox和radio:
prop() // 获取属性
removeProp() // 移除属性

prop和attr的区别：
attr全称attribute(属性) 
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的



注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

总结：
1. 对于标签上有的能看到的属性和自定义属性都用attr()
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop()


* 例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<input type="checkbox" id="d2">
<input type="radio" id="d3" username="kevin">
<script>
  $('#d1').attr('username','kevin');//设置属性
  console.log($('#d1').attr('username'));//kevin
  $('#d1').removeAttr('username');//删除属性
  $('#d2').prop('checked',true);//设置属性
</script>
</body>
</html>

文档处理

# js中如何创建一个标签出来
var a = document.createElement('a');

# jquery中如何创建一个标签
var a = $('<a>');

添加到指定元素内部的后面
$(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()// 从DOM中删除所有匹配的元素
empty()// 删除匹配的元素集合中所有的子节点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<script>
    var a=$('<a>');//创建a标签 <a></a>
    //增加属性
    a.text('你好啊 草莓要不要来几个?')//增加文本
    a.attr('href', 'http://www.baidu.com')//设置属性
    var div=$('#d1');//获取div
    div.append(a)//把a放到div中
</script>
</body>
</html>

克隆

 <style>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
      // clone括号中没有true这个参数，克隆的时候只可能标签样式等，如果加上true这个参数，就会连事件也一块克隆
  });
</script>
</body>

事件

常用事件

click(function(){...})#当用户点击某个对象时调用的事件句柄
hover(function(){...})#鼠标移上时间
blur(function(){...})#元素失去焦点
focus(function(){...})#元素获得焦点
change(function(){...})#文本域改变
keyup(function(){...})#键盘事件
input监控

绑定事件

事件绑定
1. .on( events [, selector ],function(){})
● events： 事件
● selector: 选择器（可选的）
● function: 事件处理函数
    
移除事件
1. .off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
● events： 事件
● selector: 选择器（可选的）
● function: 事件处理函数



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<button id="btn">点击</button>
<script>
    //js中绑定方式
        var btn=document.getElementsByClassName('btn')[0];
        btn.onclick=function(){
            alert(123)
        }
        
	//jq绑定方式一
     $('#btn').click(function () {//匿名函数
         alert(123);
     })

    // jq绑定方式二：on这种绑定方式功能更加强大，它支持:事件委托
    $('#btn').on('click', function () {
        alert(123);
    })
    
    //jq绑定方式三支持事件委托
    $("body").on("click","#btn",function (){
        alert(123)
    })
</script>
</body>
</html>



注意：
像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

hover事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>
        p{
            border:3px solid goldenrod;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
<p id="p1"></p>
<script>
  $('#p1').hover(function (){     
    alert(123);
  },function (){
    alert(345);
  })
// 两个function函数分别为鼠标移上触发的动作、鼠标移走触发的动作
</script>
</body>
</html>

实时监听input事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<input type="text" id="d1">
<script>
  $('#d1').on('input', function () {
        // console.log($("#d1"))
        // console.log($(this)) //this为当前标签[input#d1],等同于上面代码
        console.log(this.value);
        // 发起ajax请求，朝后盾发起请求，做验证      
  })
</script>
</body>
</html>

阻止后续事件执行

阻止后续事件执行方法：
1. return false; // 常见阻止表单提交等
2. e.preventDefault();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<form action="">
  <span class="s1"></span>
  <input type="submit" id="btn" value="提交">
</form>
<script>
    //第一种阻止后续事件执行preventDefault()
  // $('#btn').click(function (e){
  //   $('.s1').text('你好啊');
  //   e.preventDefault();//阻止后续事件执行
  // })
    //第二种阻止后续事件执行return false
  $('#btn').click(function (){
      $('.s1').text('你好啊');
      return false;
  })
</script>
</body>

阻止事件冒泡

#如果一个div内多个后代标签都有事件(嵌套关系)，那么就会出现冒泡事件。 执行完当前子标签的事件后自动执行父标签的事件。
1.阻止事件冒泡 return false;
2.阻止事件冒泡stopPropagation();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div>
  <p>
    <span>点我</span>
  </p>
</div>
<script>
  $('p').click(function (){
    console.log('pppp');
  });

  $('span').click(function (e){
    console.log('spanspan')
    //第一种方式阻止事件冒泡  
    e.stopPropagation();
  });

  $('div').click(function (){
    console.log('divdiv');
  //第二种方式阻止事件冒泡    
  return false;
  });

 
</script>
</body>
</html>

页面加载

# 等待页面加载完毕之后再执行的代码
# js中如何做的?
window.onload = function () {}

# 在jquery中以下三种方式：
1. 
$(document).ready(function(){
	// 在这里写你的JS代码...
})

2. 缩略写法
$(function(){
	// 你在这里写你的代码
})

3.把你的js代码放在body的最下面，最后加载就可以了

事件委托

#正常情况下，我们给按钮绑定了一个点击事件，在终端里手动添加一个按钮那么此按钮无法绑定事件。
#事件委托可以帮助我们 给动态创建的标签也可以使用绑定的事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<button class="btn">按钮</button>
<div>
    <p>
    </p>
</div>
<script>
    // 给body中的所有button按钮绑定一个点击事件
    $('.btn').click(function () {
        console.log('触发了'); // 这种绑定事件的方式不能影响动态创建的标签
    });
    // 可利用事件委托影响动态
    $('body').on('click', '.btn', function () {
        console.log('触发了'); // 在指定的区域中(body)委托事件的执行
    })
</script>
</body>
</html>

补充

each

each#建简易版本for循环

#第一种each用法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

<script>
	//第一种方式
  $('div').each(function(index){console.log(index)})//一个参数值为索引
  $('div').each(function(index,value){console.log(index,value)})//两个参数分别为索引和对应的元素													  										

	//第二种方式
  $.each([11,22,33],function (index,value){
    console.log(index,value)//0 11
                           // 1 22
                           // 2 33
  })
</script>
</body>
</html>



# BBS项目中用
 var arr = [1, 2, 3, 4, 5];
    $.each(arr, function (index, value) {
        console.log(index, value);
})

data


$('div').data('username', 'kevin');//给所有div标签都保存一个名为username，值为kevin
//S.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: S.fn.init(1)]
$('div').first().data('username');
//'kevin'
$('div').last().data('username');
//'kevin'
$('div').first().removeData('username');//移除存放在元素上的数据
//S.fn.init [div, prevObject: S.fn.init(10)]
$('div').first().data('username');

标签：jQuery,function,标签,元素,div,c1
From： https://www.cnblogs.com/Super-niu/p/17581210.html

相关文章

  • 04_jQuery
    一.jQuery介绍1.jQuery概述jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。2.jQuery......
  • 使用jQuery在文本框中按Enter键
    使用jQuery在文本框中按Enter键jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax等操作。在网页开发过程中，经常需要对用户的输入进行处理，并对用户的操作做出相应的响应。在这篇文章中，我们将介绍如何使用jQuery来检测用户在文本框中按下Enter键的操作，并......
  • 无涯教程-jQuery - remove( expr )方法函数
    remove(expr)方法从DOM中删除所有匹配的元素。这不会将它们从jQuery对象中删除，而是允许您进一步使用匹配的元素。与empty()方法进行比较。remove(expr)-语法selector.remove(expr)这是此方法使用的所有参数的描述-expr   - 这是一个可选的jQuery表达式，用于......
  • jQuery快速入门
    我们最好称之为是jQuery库更好一些，不要称之为是框架#库就类似于是Python中的模块，简称为jq#jQuery就是js、css等的封装版本，只要一封装，写法肯定会简单jQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。#他就是一个封装好的js文件，几十KB大小#前端的最大问题就......
  • jQuery快速入门
    jQuery库一般称之为jQuery库，不要称为框架，库类似于Python中的模块，简称jqjQuery就是js、css等的封装版，只要已封装，写法肯定简单一些 jQuery介绍jQuery是一个轻量级的、兼容多浏览器的JavaScript库。#他就是一个封装好的js文件，几十KB大小前端的最大问题就是兼容性问......
  • 15款提高表格操作的jQuery插件
       table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家......
  • jQuery水印插件 - Watermark 和 FormWatermark
    FormWatermark是一个跨浏览器的可以给表单文本框和文本区域增加水印的插件，使用FormWatermark给表单增加水印提示功能，这有助于提高用户交互和友好度，如果配合jQuery插件Validation可提供强大的用户体验，FormWatermark使用简单，效果图如下： 使用说明需要使用jQuery库文件和Form......
  • 30+ 新鲜惊奇的 jQuery 插件与教程
    在网络发展领域，由于jQuery简单易学，易于使用和易于扩展的特点，因此正慢慢变得无处不在。以下是从一些jQuery相关文章中整理出来的30+新鲜与惊奇的jQuery插件与教程。如果你正在寻找最新的jQuery信息，这些内容值得一读。教程1.Howtoaddpreloaderwithloadingimagein......
  • 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
    DEMO: http://sources.ikeepstudying.com/menu-mail-qq/ 一、这是什么样的一个插件我们都知道，默认状态下，我们右键web页面，会出现一个上下文菜单，例如下图：【jQuery】smartMenu右键自定义上下文菜单插件(似webQQ)但是，浏览器默认的右键选项有时候并不是我们所需要的，......
  • html 之 jQuery库
    一、jQuery介绍1、库就类似于是Python中的模块，简称为jq2、jQuery就是js、css等的封装版本，只要一封装，写法较简单3、jQuery是一个轻量级的、兼容多浏览器的JavaScript库，封装版本的js。4、jq的优势简化DOM操作：jQuery提供了简单易用的选择器和DOM操作方法，使得在HTML文......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99