（3）jQuery——————jQuery的快速复习之旅（一）

最新推荐文章于 2021-05-01 05:55:05 发布

Tommey01

最新推荐文章于 2021-05-01 05:55:05 发布

阅读量341

点赞数

分类专栏： web 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_41530004/article/details/105967753

版权

web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1，系统性学习jQuery

2，了解jQuery

2.1，什么是jQuery？
2.2，为什么用jQuery?
2.3，如何使用jQuery？

3，jQuery的2把利器

3.1，jQuery函数：$ / jQuery
3.2，jQuery对象

4，选择器

4.1，基本选择器
4.2，层次选择器
4.3，过滤选择器
4.4，表单选择器

5，工具方法

6，属性 / 文本

7，CSS模块

7.1，style样式
7.2，位置坐标
7.3，尺寸

8，筛选模块

8.1，过滤
8.2，查找

9，jQuery使用案例和文档处理(CUD)模块

9.1，复选框的使用案例
9.2，文档处理(CUD)模块
9.3， jQuery删除添加记录

系统性学习jQuery

想要既快速又系统的学习JavaScript，具体可参照W3cshool进行学习，点击此处开始学习

了解jQuery

1，什么是jQuery？

是一个 JavaScript 库：write less， do more，jQuery 极大地简化了 JavaScript 编程
封装简化DOM操作(CRUD) / Ajax

2，为什么用jQuery?

强大选择器：方便快速查找DOM元素
隐式遍历(迭代)：一次操作多个元素
读写合一：读数据/写数据用的是一个函数
链式调用：可以通过不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容

3，如何使用jQuery？

引入jQuery库

①，本地引入（下载并引用）与CDN远程引入（直接引用，需要有网络）

②，测试版与生产版(压缩版)

使用jQuery

①，使用jQuery函数：$ / jQuery

②，使用jQuery对象：$ xxx（执行$()得到的）

jQuery的2把利器

1， jQuery函数：$ / jQuery

jQuery向外暴露的就是jQuery函数，可以直接使用
当成一般函数使用人： $(param)
param是function：相当于window.onload = function(文档加载完成的监听)
param是选择器字符串：查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象

$(function(){
		$('#btn').click(function(){
		alert($(this) instanceof Object);
	})
})

param是DOM元素：将DOM元素对象包装为jQuery对象返回 $(this)
案例：

<div>
<button id="btn">测试</button>
</div>

<script type="text/javascript">
$(function(){
	$('#btn').click(function(){
		alert($(this).html());
		$('<input type="text" />').appendTo('div');
	})
})
</script>

param是标签字符串：创建标签DOM元素对象并包装为jQuery对象返回
当成对象使用：$.xxx
each(obj/arr, function(key, value){})

var array = [1,9,8]
$.each(array, function(index, item) {
	console.log(index,item);
});

trim(str)

var str = '  Tommery 周  '
console.log('--'+$.trim(str)+'--')

2， jQuery对象

包含所有匹配的n个DOM元素的伪数组对象
执行$()返回的就是jQuery对象：

var $buttons = $('button')

基本行为：

length/size()：得到dom元素的个数

console.log($buttons.length)

[index]：得到指定下标对应的dom元素

console.log($buttons[1].innerHTML,$buttons.get(1).innerHTML)

each(function(index, domEle){})：遍历所有dom元素

$buttons.each(function() {
	console.log(this)
})

index()：得到当前dom元素在所有兄弟中的下标

$buttons.each(function(index, doEle) {
	console.log(index,doEle.innerHTML,this)
})

选择器

有特定语法规则(css选择器)的字符串，用来查找某个/些DOM元素： $(selector)

1，基本选择器

id
tagName/*
.class
selector1,selector2,selector3：并集
selector1selector2selector3：交集

2，层次选择器

找子孙后代，兄弟元素
selector1>selector2：子元素
selector1 selector2：后代元素

3，过滤选择器

在原有匹配元素中筛选出其中一些
:first（第一个）案例：$('.name :first').css('backgroud','red')
:last（最后一个）
:eq(index)（指定索引值）
:lt（小于指定索引值）
:gt（大于指定索引值）
:odd（奇数）
:even（不等于）
:not(selector)（不等于）
:hidden（隐藏的）
:visible（显示的）
[attrName]（有attrName值的）
[attrName=value]（attrName值等于value的）

4，表单选择器

:input 输入
:text 文本
:checkbox 多选
:radio单选
:checked: 选中的

案例

  //显示城市的名称
  var cityName = $('select>option:selected').html()
  //显示城市的value
  var vityValue = $('select').val()

工具方法

$.each()：遍历数组或对象中的数据
$.trim()：去除字符串两边的空格
$.type(obj)：得到数据的类型
$.isArray(obj)：判断是否是数组
$.isFunction(obj)：判断是否是函数
$.parseJSON(json)：解析json字符串转换为js对象/数组
JSON.parse(jsonString)：json字符串 —> js对象/数组
JSON.stringify(jsObj/jsArr)：js对象/数组 —> json字符串

属性 / 文本

操作标签的属性, 标签体文本
attr(name) / attr(name, value): 读写非布尔值的标签属性 cons在这里插入代码片ole.log($('div').attr('name','Tommey周'))
prop(name) / prop(name, value): 读写布尔值的标签属性
removeAttr(name)/removeProp(name): 删除属性
addClass(classValue): 添加class
removeClass(classValue): 移除指定class
val() / val(value): 读写标签的value
html() / html(htmlString): 读写标签体文本

CSS模块

1， style样式

css(styleName): 根据样式名得到对应的值
css(styleName, value): 设置一个样式 $('p').css('color','red')
css({多个样式对}): 设置多个样式

2，位置坐标

offset(): 读/写当前元素坐标(原点是页面左上角)

案例：

//获取元素坐标
$('.div').offset() 
console.log(offset.left)

//设置元素坐标
  $("#11").click(function(){
	$('.div2').offset({left:50,top:100})
  });

position(): 读当前元素坐标(原点是父元素左上角)
scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标

//获取滚动条坐标
console.log($(document.documentElement).scrollTop() +$(document.body).scrollTop())//兼ie和谷歌

//设置滚动条坐标
$('div').scrollTop(200)
$('html,body').scrollTop(300)

  $('#to_top').click(function () {
    // 瞬间滚到顶部
    //$('html,body').scrollTop(0)

    // 平滑滚到顶部
      // 总距离
    var $page = $('html,body')
    var distance = $('html').scrollTop() + $('body').scrollTop()
      // 总时间
    var time = 500
      // 间隔时间
    var intervalTime = 50
    var itemDistance = distance/(time/intervalTime)
      // 使用循环定时器不断滚动
    var intervalId = setInterval(function () {
      distance -= itemDistance
      // 到达顶部, 停止定时器
      if(distance<=0) {
        distance = 0 //修正
        clearInterval(intervalId)
      }
      $page.scrollTop(distance)
    }, intervalTime)

  })

3，尺寸

width()/height()：width/height （内容尺寸）
innerWidth()/innerHeight()：width + padding （内部尺寸）
outerWidth()/outerHeight()：width + padding + border （外部尺寸）

筛选模块

1，过滤

在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回

first()

<ul>
  <li>AA</li>
  <li title="hello"><span>BB</span></li>
</ul>

  var $lis = $('ul>li')
  $lis.first().css('background', 'red')
  //$lis[0].style.background = 'red'

last()
eq(index)
filter(selector): 对当前元素提要求

$lis.filter('[title!=hello]').filter('[title]').css('background', 'red')

not(selector): 对当前元素提要求, 并取反
has(selector): 对子孙元素提要求

  <ul>
    <span>span文本1</span>
    <li>AA</li>
    <li><span>span文本2</span></li>
    <li id='bb'>BB</li>
  </ul>
  
  $lis.has('span').css('background', 'red')

2，查找

查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回

children(selector): 子元素

  var $ul = $('ul')
  //1. ul标签的第1个span子标签
    $ul.children('span:eq(0)').css('background', 'red')

find(selector): 后代元素
preAll(selector): 前的所有兄弟
//4. id为bb的li标签的前面的所有li标签

  var $li = $('#bb')
  $li.prevAll('li').css('background', 'red')

siblings(selector): 所有兄弟
parent(): 父元素

jQuery使用案例和文档处理(CUD)模块

1，复选框的使用案例：

在这里插入图片描述

<form>
  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script type="text/javascript">
  var $checkedAllBox = $('#checkedAllBox')
  var $items = $(':checkbox[name=items]')

  // 1. 点击'全选': 选中所有爱好
  $('#checkedAllBtn').click(function () {
    $items.prop('checked', true)
    $checkedAllBox.prop('checked', true)
  })

  // 2. 点击'全不选': 所有爱好都不勾选
  $('#checkedNoBtn').click(function () {
    $items.prop('checked', false)
    $checkedAllBox.prop('checked', false)
  })

  // 3. 点击'反选': 改变所有爱好的勾选状态
  $('#checkedRevBtn').click(function () {
    $items.each(function () {
      this.checked = !this.checked
    })
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })

  //4. 点击'提交': 提示所有勾选的爱好
  $('#sendBtn').click(function () {
    $items.filter(':checked').each(function () {
      alert(this.value)
    })
  })

  // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
  $checkedAllBox.click(function () {
    $items.prop('checked', this.checked)
  })

  // 6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
  $items.click(function () {
    $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length===0)
  })
</script>
</body>

2，文档处理(CUD)模块

①，新增

append() / appendTo()：插入后部
preppend() / preppendTo()：插入前部
before()：插到前面
after()：插到后面

  <li>AA</li>
  <li class="b">BB</li>
  <li>CC</li>
 
  var $ul1 = $('#ul1')
  // 在id为ul1的ul下的li(class为b)的后面添加span
  $ul1.children('li[class=b]').before('<span>after()添加的span</span>')

②，删除

remove()：将自己及内部的孩子都删除
empty()：掏空(自己还在)

$('#ul1').empty()
$('#ul1>li').remove()

③，更新

replaceWith()

 // 将在id为ul1的ul下的li(class为b)全部替换为p
$('#ul1>li[class=b]').replaceWith('<p>replaceAll()替换的p</p>')

3， jQuery删除添加记录

在这里插入图片描述

<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>Tommey</td>
    <td>Tommey@139.com</td>
    <td>4500</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Tommey周</td>
    <td>Tommey周@139.com</td>
    <td>12000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>Tom@139.com</td>
    <td>15000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>

</table>
<hr></hr>
<div id="formDiv">

  <h4>添加新员工</h4>

  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName"/>
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email"/>
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.js"></script>
<script type="text/javascript">
  //添加，删除
  $('#addEmpButton').click(function () {
    //1. 收集输入的数据
    var $empName = $('#empName')
    var $email = $('#email')
    var $salary = $('#salary')
    var empName = $empName.val()
    var email = $email.val()
    var salary = $salary.val()

    //2. 生成对应的<tr>标签结构, 并插入#employeeTable的tbody中
    var $xxx = $('<tr></tr>')
      .append('<td>'+empName+'</td>') // 拼串
      .append('<td>'+email+'</td>')
      .append('<td>'+salary+'</td>')
      .append('<td><a href="deleteEmp?id="'+Date.now()+'>Delete</a></td>')
      .appendTo('#employeeTable>tbody')

    //3. 清除输入
    $empName.val('')
    $email.val('')
    $salary.val('')
  })

  // 通过table实现对所有a的click事件委托
  $('#employeeTable').delegate('a', 'click', clickDelete)

  //点击删除的回调函数
  function clickDelete () {
    var $tr = $(this).parent().parent()
    var name = $tr.children(':first').html()
    if(confirm('确定删除'+name+'吗?')) {
      $tr.remove()
    }

    return false
  }
  
</script>
</body>
</html>

下一章，（4）jQuery——————jQuery的快速复习之旅（二）

Tommey01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
（3）jQuery——————jQuery的快速复习之旅（一）

1，系统性学习jQuery2，了解jQuery2.1，什么是jQuery？2.2，为什么用jQuery?2.3，如何使用jQuery？3，jQuery的2把利器3.1，jQuery函数：$ / jQuery3.2，jQuery对象4，选择器系统性学习jQuery想要既快速又系统的学习JavaScript，具体可参照W3cshool进行学习，点击此处开始学习了解jQuery1，什么是jQuery？是一个 JavaScript 库：write less， do mor
复制链接

扫一扫

专栏目录