【前端】jQuery 学习笔记（重要）

myaijarvis

已于 2023-02-01 17:24:01 修改

阅读量361

点赞数

分类专栏：前端文章标签： jquery

于 2021-04-16 14:56:01 首次发布

本文链接：https://blog.csdn.net/Jruo911/article/details/115760925

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

动态生成的元素绑定事件

// 假如<p>new</p>是新生成的
<div>
	<p>a</p>
	<p>b</p>
	<p>new</p>
</div>

// 绑定事件
$("div").on("click","p",function(event){
	$(this).text();  // this指向p这个DOM节点
})

$(selector).on(events,childSelector,function) 委托注册
on()：适用于当前及未来的元素（比如由脚本创建的新元素）
使用方法：
1、先选中动态生成元素的父元素
2、然后绑定事件
原理：事件冒泡

事件委托

$(‘父元素’).on(‘事件名’,‘哪个子元素触发’,传给回调函数的参数，事件触发时的回调函数);

参数1：事件名，代表要绑定什么事件，但是记得不用加on，也就是说如果你想加点击事件，只要写’click’即可，注意是字符串！所以要打单引号或者双引号

参数2：只能由哪个子元素触发，例如我写 “li”，就代表只能由这个父元素里面的li触发事件，其他子元素不会触发。需要注意的是，这也是字符串，并且，参数2可以不写，那就代表仅仅只是给父元素加一个点击事件，并且所有子元素都能触发到这个事件（因为事件冒泡）

参数3：其实一般不会用，就是如果想事件触发时，自己给回调函数传一些值就写，这个参数也可以不写！

参数4：事件触发时的回调函数

总结：参数1和参数4是必须的，其他是可选的，如果你要用事件委托，请写上参数2
在这里插入图片描述

选择器

层次选择器

$(" #id > .classname “) //子元素选择器
$(” #id .classname “) //后代元素选择器
$(” #id + .classname “) //紧邻下一个元素选择器
$(” #id ~ .classname ") //兄弟元素选择器

data-xxx

选中元素

$("button[data-title='目录']").text()

在这里插入图片描述

获取信息

<a class="user_vip" data-type="2" data-name="我的名字" href="#">
  点击
</a>;
$(".user_vip").on("click", function () {
  // 方法一、
  var type = $(this).data("type");
  var name = $(this).data("name");

  //方法二、
  var type = $(this).attr("data-type");
  var name = $(this).attr("data-name");
});

自定义属性

<div class="myclass" tip = "thistip"></div>
<div class="myclass" tip = "twotip"></div>
<div class="myclas" tip = "threetip"></div>


$(".myclass").siblings(".myclass[tip = "thistip"]");
或者
$("div[tip = "thistip"]");

高版本

toggle

1.9版本 .toggle(function, function, … ) 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

在高版本的jquery中做为事件使用的toggle(func1，func2);方法已经被弃用。只保留交替显示/隐藏的toggle()方法

解决方案一：https://www.cnblogs.com/h5monkey/p/6169485.html（推荐）

$.fn.toggle = function( fn, fn2 ) {
    var args = arguments,guid = fn.guid || $.guid++,i=0,
    toggle = function( event ) {
      var lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
      $._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
      event.preventDefault();
      return args[ lastToggle ].apply( this, arguments ) || false;
    };
    toggle.guid = guid;
    while ( i < args.length ) {
      args[ i++ ].guid = guid;
    }
    return this.click( toggle );
  };

解决方案二
https://www.cnblogs.com/ZM-ONE/p/8567307.html


<script language="javascript">
  $(function(){
   let count = 1;
   $("#aijquery1").click(function(){
       if(count++ % 2){
          alert(1)
       }else{
           alert(2)
       }
   });
});
</script>

select

<select class="selector">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


1、设置value为pxx的项选中
$(".selector").val("pxx");

2、设置text为pxx的项选中    $(".selector").find("option[text='pxx']").attr("selected",true);

这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value
$(".selector").val();

4、获取当前选中项的text
$(".selector").find("option:selected").text();
这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。

check


$(`input[name=名称][value=${变量}]`).prop("checked", true);

设置选中
下边两种写法没有任何区别 只是少了些代码而已
<input id="cb1" type="checkbox" checked />
<input id="cb2" type="checkbox" checked="checked" />

$(element).prop('checked', true/false);
$(element).attr('checked', true/false);

判断checked的三种方法
.attr('checked'):   //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
.prop('checked'): 	//16+:true/false
.is(':checked'):    //所有版本:true/false，别忘记冒号哦


获取未选中的checkbox
 $('input[type=checkbox]').not("input:checked");  
获取选中的checkbox
$('input[type=checkbox]:checked');

触发事件


// 1. 触发点击事件
$("xxx").trigger("click"); 

$("xxx").click(); 


// 2. 触发自定义事件
						// "zdy",'参数1','参数2'
$('xxx').on('zdy',function(event, a, b){ 
	console.log(a,b)
})

$("xxx").trigger("zdy",['参数1','参数2']);

位置

offset()

只对可见元素有效。
在这里插入图片描述

position()

只对可见元素有效。
不能设置
在这里插入图片描述

scrollTop

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

<div class="back">返回顶部</div>
<div class="container"></div> // 初始状态离顶部有400px

toTop() // 页面初始化调用一次
$(window).scroll(function() { 
     toTop() // 页面滚动时再调用
});
function toTop() {
    var boxTop = $(".container").offset().top; // 获取初试状态下 该元素与文档顶部的距离
    console.log($(document).scrollTop());
    if ($(document).scrollTop() >= boxTop) {
        $(".back").fadeIn();
    } else {
        $(".back").fadeOut();
    }
}
// 返回顶部
$(".back").click(function() {
    $("body, html").stop().animate({ // 页面滚动不要用$(document)
        scrollTop: 0
    })
})

API

end()

回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
"破坏性"就是指任何改变所匹配的jQuery元素的操作

<div>
	<p>
		<span>Hello</span>
	</p>
</div>

$("div").find("span").end().width(100) // div的宽度为100px

each() 数组

【参考：Jquery的foreach .each方法详解 - 蓝色信仰 - 博客园】


1.选择器+遍历
$('div').each(function (index,domEle){
   index就是索引值
  domEle 表示获取遍历每一个dom对象
  $(this) 代表的是当前被操作的jQuery一个对象。this代表的是当前被操作的dom对象

});

2.更适用的遍历方法 ***  (js jq 通用)

1）先获取某个集合对象
2）遍历集合对象的每一个元素

var d=$("div");
$.each(d,function (index,domEle){
  d是要遍历的集合
  index就是索引值
  domEle 表示获取遍历每一个dom对象（也可使用 "this"指代）
});

如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略

// 遍历js对象
let arr = { name: "x", age: "18", salary: 10000 };

$.each(arr, function (index, value) {
  console.log(value)
});

remove([expr])

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

<p class="hello">Hello</p> 
<p>world!</p>

$("p").remove(); // 全部移除
$("p").remove(".hello");

detach([expr])

从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$(“p”).detach();
$(“p”).detach(“.hello”);

add()

这里的add(“p”)相当于和的意思
https://blog.csdn.net/zm2714/article/details/8119554

children()

只查找亲儿子元素

find()

查找所有后代

parents()

查找所有祖先

parent()

只查找亲生父亲

closest()

从当前节点向上查找第一个符合条件的祖先元素

实例

$(function(){
   var $body = $("body"),
   	   // 创建元素
       $btn = $("<button id='btn' class='btn'>点我按钮</button>"),
       $div = $("<div class='div'>我是川川</div>"),
       onOff = true;
      // 挂载
      $body.append($btn);
      $body.append($div);                 

      $btn.click(function(){
          if(onOff){
               $(this).addClass('activeBtn');
               $div.css("display","none");
          }else{
                          
               $(this).removeClass('activeBtn');;
               $div.css("display","block");
          }
          onOff = !onOff;
      })
})

//js
MVP:模式,原生js操作dom         
1. 获取dom元素节点,创建元素
2. 添加元素dom操作
3. 添加事件操作,逻辑处理

*/
window.onload = function(){
  var  oBody = document.getElementsByTagName("body")[0], // 获取dom节点
      oDiv  = document.createElement("div"), // 创建div元素
      oBtn  = document.createElement("button"),// 创建button元素
      onOff =  true; // 切换状态
      oDiv.setAttribute("class","content"); // 给div元素添加一个content类
      oBtn.setAttribute("id","btn"); // 给button按钮添加一个id为btn

                
      oBtn.innerHTML = "点我按钮"; // dom操作,添加内容
      oDiv.innerHTML = "我是川川"; // 同上
      oBody.appendChild(oBtn);// 把节点元素添加到dom中
      oBody.appendChild(oDiv);
                  
      // 添加事件
      oBtn.onclick = function(){// 添加事件,改变样式,执行逻辑
              if(onOff){
                 this.style.backgroundColor="red";
                 oDiv.style.display = "none";
                 // hide()
               }else{
                  this.style.backgroundColor="green";
                  oDiv.style.display = "block";
                  // show()
               }
                 //onOff==true?hide():show();
                  onOff = !onOff; 
               }

              // 可以把里面的代码封装一下
              // 隐藏
             /*function hide(){
                     oBtn.style.backgroundColor="red";
                     oDiv.style.display = "none";
            }
           // 显示
           function show(){
                 oBtn.style.backgroundColor="green";
                 oDiv.style.display = "block";
          }*/
                 
     }

效果

回到顶部

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }
       .content { height: 2000px; border: 1px solid red; }
       #goToTop { position: fixed; bottom: 20px; right: 10%; }
      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }
     </style>
</head>
<body>
    <div class="container">
        <div class="header"> 我是头部</div>
        <div class="content">我是主内容，高度是2000px</div>
        <div class="footer">我是在最底部</div>
        <div id="goToTop"><a href="javascript:;">点我返回顶部</a></div>
    </div>
    <script>
    // 改进版
    $(function(){
        $('#goToTop').hide();        //隐藏go to top按钮
        $(window).scroll(function(){
            // console.log($(this).scrollTop());
            //当window的scrolltop距离大于1时，go to
            if($(this).scrollTop() > 100){
                $('#goToTop').fadeIn();
            }else{
                $('#goToTop').fadeOut();
            }
        });
        $('#goToTop a').click(function(){
            $('html ,body').animate({scrollTop: 0}, 300);
            return false;
        });
    });
    </script>
</body>
</html>

对象拷贝 extend

在这里插入图片描述

jq对象与dom对象

jQuery对象其实是一个JavaScript的数组,这个数组对象包含125个方法和4个属性
4个属性分别是

jquery 当前的jquery框架版本号
length 指示该数组对象的元素个数 .
context 一般情况下都是指向HtmlDocument对象 .
selector 传递进来的选择器内容

jquery对象就是通过jQuery包装DOM对象后产生的对象。

二者对比

	<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

let arr = $("ul li");

console.log(arr.get(0)); //dom对象
console.log(arr.eq(0));  // jq对象

jq对象其实一个类数组对象（本质是对象，但具有某些数组的特性，比如取下标，长度等等）
在这里插入图片描述

jq数组内部的元素是dom对象

	<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>

let $arr = $("ul li");  //$arr就是一个jq对象数组
console.log($arr);
$arr.css("color", "red")  // 字全部变红

console.log(document.getElementsByTagName("li"));

jq对象
在这里插入图片描述
dom对象

二者内部元素都是dom节点对象

参数传递dom对象

	<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    
let arr = $("ul li");
demo(arr);

function demo($obj) {
  console.log($obj); //$obj就是一个jq对象数组
  $obj.css("color", "red");  // 字全部变红
}

myaijarvis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端】jQuery 学习笔记（重要）

选中selectKaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲region").find(`…{变量}]`).prop(“selected”,true);
复制链接

扫一扫