筛选器方法

1.筛选同级别下面的元素

 $("#id").next()
 $("#id").nextAll()
 $("#id").nextUntil("#i2")  //往下查找直到i2

2.筛选同级别上面的元素

 $("#id").prev()
 $("#id").prevAll()
 $("#id").prevUntil("#i2")

3.查找父标签元素

 $("#id").parent()
 $("#id").parents() 
 $("#id").parentsUntil()

4.查找子标签或兄弟标签元素

 $("#id").children();// 儿子们
 $("#id").siblings();// 兄弟们(同级别上下所有标签)

5.链式操作

 $('#d1').parent().parent().parent()
 $('#d1').parent().parent().next().parents()

补充知识:一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签。核心: 对象在调用完一个方法之后返回的还是一个对象

jQuery操作标签

1.class操作

语法结构:    $("#i1").addClass();  // jQuery对象可以使用jQuery

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

的方法

2 样式操作

语法结构:      jQuery对象.css('属性名','属性值'); 
案例:      $("p").css("color", "red"); //将所有p标签的字体设置为红色

3.位置操作

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

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

4.文本值操作

方法	用法
html()	取得第一个匹配元素的html内容
html(val)	设置所有匹配元素的html内容
text()	取得所有匹配元素的内容
text(val)	设置所有匹配元素的内容
val()	取得第一个匹配元素的当前值
val(val)	设置所有匹配元素的值
val([val1, val2])	设置多选的checkbox、多选select的值

5.属性操作

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

2.用于checkbox和radio
prop()           获取属性
removeProp()     移除属性

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

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

      1. attr全称attribute(属性)
      2. prop全称property(属性)

总结

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

文档处理操作

1. 添加到指定元素内部的后面

   $(A).append(B)// 把B追加到A
   $(A).appendTo(B)// 把A追加到B

2. 添加到指定元素内部的前面
   $(A).prepend(B)// 把B前置到A
   $(A).prependTo(B)// 把A前置到B

3. 添加到指定元素外部的后面

   $(A).after(B)// 把B放到A的后面
   $(A).insertAfter(B)// 把A放到B的后面

4. 添加到指定元素外部的前面

   $(A).before(B)// 把B放到A的前面
   $(A).insertBefore(B)// 把A放到B的前面

5. 移除和清空元素

   remove()// 从DOM中删除所有匹配的元素。
   empty()// 删除匹配的元素集合中所有的子节点。

jQuery绑定事件

标签对象.on事件名 = function(){事件代码}
 	btnEle.onclick = function(){alert(123)}   2.jQuery绑定事件
方式1
      jQuery对象.事件名(function(){事件代码})
          $btnEle.click(function(){alter(123)})
方式2
  	jQuery对象.on('事件名',function(){事件代码})
      	$btnEle.on('click',function(){alter(123)})

有时使用jQuery的方式1绑定事件如果无法触发,可以切换为方式2。

事件案例

1.克隆事件clone

    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
      <style>
          .c1 {
              border: 3px solid black;
              background-color: orange;
          }
      </style>
  </head>
  <body>
      <button id="d1" class="c1">真男人的传奇,是兄弟就来砍我!!!</button>
      <p>在我上面干嘛123</p>
      <p>在我上面干嘛321</p>
      <p>在我上面干嘛222</p>
      <script>
          $('p').hover(
          function () {
              alert('来啦，老弟')
          },
          function () {
              alert('慢走哦～')
          }
      )




          let $btnEle = $('#d1');
          $btnEle.click(function () {
              // this指代的是当前被操作的标签对象   如果想调用jQuery的方法 需要转换 $()
              $('body').append($(this).clone(true))
          })
      </script>
  </body>
  </html>

2.实时监听input输入值变化

    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <body>
      <input type="text" id="d1">

      <script>
          $('#d1').on('input', function (){
              console.log(this.value)
          })
      </script>
  </body>
  </html>

组织后续事件

能够触发form表单提交数据动作的标签有两个
  1.  <input type="submit">
	2.  <button></button>

两种阻止后续事件方式
	return false; // 常见阻止表单提交等
	e.preventDefault();
	// 给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的。我们也可以让标签之前的事件不执行

    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <body>

  <form action="">
      <p>username:<input type="text" name="username"></p>
      <input type="submit" value="提交"><button>按我</button>

      <script>
          $(':submit').click(function (e){
              alert('一定要细心 千万不要慌!!!')
              // return false
              e.preventDefault()
          })
      </script>
  </form>
  </body>
  </html>

事件冒泡

涉及到标签嵌套并且有相同事件的时候那么会逐级往上反馈并执行

组织事件冒泡:
   <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>阻止事件冒泡</title>
  </head>
  <body>
  <div>
      <p>
          <span>点我</span>
      </p>
  </div>
  <script src="jquery-3.3.1.min.js"></script>
  <script>
      $("span").click(function (e) {
          alert("span");
          e.stopPropagation();
      });

      $("p").click(function () {
          alert("p");
      });
      $("div").click(function () {
          alert("div");
      })
  </script>
  </body>
  </html>

事件委托

创建标签的两种方式

	JS              document.createElement()
  jQuery          $('<标签名>')
 // 事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托

    <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

  </head>
  <body>
  <div>
      <button>点我123</button>
      <button>点我321</button>
  </div>


      <script>
          // $('button').click(function () {
          //     alert('button按钮')
          // })
          $('div').on('click','button',function () {
              alert('交通救援请播122')
          })



      </script>
  </body>
  </html>
  // 上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

Bootstrap框架

1.使用之前需要先导入，bootstrap涉及到js的部分需要使用jQuery www.fontawesome.com.cn/

前端06 筛选器方法，jQuery事件与Bootstrap

筛选器方法

jQuery操作标签

文档处理操作

jQuery绑定事件

事件案例

组织后续事件

事件冒泡

事件委托

Bootstrap框架