jQuery

导入jQuery文件 

        两种方式：网页复制或者本地导入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

<!--  <script type="text/javascript" src="js/jquery-1.12.3.js"></script>-->

1. jQuery核心函数
  * 简称: jQuery函数($/jQuery)
  * jQuery库向外直接暴露的就是$/jQuery
  * 引入jQuery库后, 直接使用$即可
    * 当函数用: $(xxx)
    * 当对象用: $.xxx()
2. jQuery核心对象
  * 简称: jQuery对象
  * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
  * 使

 1. 作为一般函数调用: $(param)
  1). 参数为函数 : 当DOM加载完成后，执行此回调函数
  2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
  3). 参数为DOM对象: 将dom对象封装成jQuery对象
  4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
  1). $.each() : 隐式遍历数组
                
  2). $.trim() : 去除两端的空格

例

/*
 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
 需求2. 遍历输出数组中所有元素值
 需求3. 去掉"  my atguigu  "两端的空格
 */
/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
//1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
$(function () { // 绑定文档加载完成的监听
  // 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
  $('#btn').click(function () { // 绑定点击事件监听
    // this是什么? 发生事件的dom元素(<button>)
    // alert(this.innerHTML)
    // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
    alert($(this).html())
    // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
    $('<input type="text" name="msg3"/><br/>').appendTo('div')
  })
})

/*需求2. 遍历输出数组中所有元素值*/
var arr = [2, 4, 7]
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
  console.log(index, item)
})
// 2). $.trim() : 去除两端的空格
var str = ' my atguigu  '
// console.log('---'+str.trim()+'---')
console.log('---'+$.trim(str)+'---')

1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标

1. 是什么?
  - 有特定格式的字符串
2. 作用
  - 用来查找特定页面元素
3. 基本选择器
  - #id : id选择器
  - element : 元素选择器
  - .class : 属性选择器
  - * : 任意标签
  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)

层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. 空格    ancestor descendant
  在给定的祖先元素下匹配所有的后代元素
2. 大于号   parent>child
  在给定的父元素下匹配所有的子元素
3. +号      prev+next
  匹配所有紧接在 prev 元素后的 next 元素
4.  ~号     prev~siblings
  匹配 prev 元素之后的所有 siblings 元素

在原有选择器匹配的元素中进一步进行过滤的选择器
  * 基本
  * 内容
  * 可见性
  * 属性

例：

 1. 选择第一个div
 2. 选择最后一个class为box的元素
 3. 选择所有class属性不为box的div
 4. 选择第二个和第三个li元素
 5. 选择内容为BBBBB的li
 6. 选择隐藏的li
 7. 选择有title属性的li元素
 8. 选择所有属性title为hello的li元素
 */
//1. 选择第一个div
// $('div:first').css('background', 'red')

//2. 选择最后一个class为box的元素
//$('.box:last').css('background', 'red')

//3. 选择所有class属性不为box的div
// $('div:not(.box)').css('background', 'red')  //没有class属性也可以

//4. 选择第二个和第三个li元素
// $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
//$('li:lt(3):gt(0)').css('background', 'red')

//5. 选择内容为BBBBB的li
// $('li:contains("BBBBB")').css('background', 'red')

//6. 选择隐藏的li
// console.log($('li:hidden').length, $('li:hidden')[0])

//7. 选择有title属性的li元素
// $('li[title]').css('background', 'red')

//8. 选择所有属性title为hello的li元素
$('li[title="hello"]').css('background', 'red')

表单选择器
  1). 表单
  2). 表单对象属性例

例

需求:
 1. 选择不可用的文本输入框
 2. 显示选择爱好 的个数
 3. 显示选择的城市名称
 */
//1. 选择不可用的文本输入框
// $(':text:disabled').css('background', 'red')

//2. 显示选择爱好 的个数
console.log($(':checkbox:checked').length)

//3. 显示选择的城市名称
$(':submit').click(function () {
  var city = $('select>option:selected').html() // 选择的option的标签体文本
  city = $('select').val()  // 选择的option的value属性值
  alert(city)

工具方法：

1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象数组

1. 操作任意属性
   attr() 设置
   removeAttr() 删除设置
   prop() 
2. 操作class属性
   addClass() 添加class属性
   removeClass() 删除class属性
3. 操作HTML代码/文本/值
   html() 
   val()

例

需求:
 1. 读取第一个div的title属性
 2. 给所有的div设置name属性(value为atguigu)
 3. 移除所有div的title属性
 4. 给所有的div设置class='guiguClass'
 5. 给所有的div添加class='abc'
 6. 移除所有div的guiguClass的class
 7. 得到最后一个li的标签体文本
 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
 9. 得到输入框中的value值
 10. 将输入框的值设置为atguigu
 11. 点击'全选'按钮实现全选
 12. 点击'全不选'按钮实现全不选
 */
//1. 读取第一个div的title属性
// console.log($('div:first').attr('title')) // one

//2. 给所有的div设置name属性(value为atguigu)
// $('div').attr('name', 'atguigu')

//3. 移除所有div的title属性
// $('div').removeAttr('title')

//4. 给所有的div设置class='guiguClass'
//$('div').attr('class', 'guiguClass')

//5. 给所有的div添加class='abc'
//$('div').addClass('abc')

//6. 移除所有div的guiguClass的class
//$('div').removeClass('guiguClass')

//7. 得到最后一个li的标签体文本
//console.log($('li:last').html())

//8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
//$('li:first').html('<h1>mmmmmmmmm</h1>')

//9. 得到输入框中的value值
//console.log($(':text').val()) // 读取

//10. 将输入框的值设置为atguigu
//$(':text').val('atguigu') // 设置      读写合一
//11. 点击'全选'按钮实现全选
  // attr(): 操作属性值为非布尔值的属性
  // prop(): 专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function () {
  $checkboxs.prop('checked', true)
})

//12. 点击'全不选'按钮实现全不选
$('button:last').click(function () {
  $checkboxs.prop('checked', false)
})