jQuery笔记一

一 jQuery的基本使用

二了解jQuery函数与jQuery对象

（1）jQuery核心函数

（2）jQuery核心对象

一 jQuery的基本使用


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.0">
    <title>title>
 
    
    
    
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
    <script>
        //绑定文档加载完成的监听
 // 2.使用jQuery核心函数($/jQuery)
        $(function(){
/* 3.使用jQuery核心对象:执行$()返回的对象
        var $btn2 = $('#btn2')
        $btn2. click(function(){
            })
            */
            $('#btn2').click(function(){//给btn2绑定点击监听
                var username=$('#username').val()
                alert(username)
            })
        })
    script>
head>
<body>
    用户名：<input type="text" id="username">
    <button id="btn2">确定(jQuery版)button>
body>
html>

二了解jQuery函数与jQuery对象


<script type= "text/javascript" >
console. log(jQuery===$) // true
//2. jQuery对象:执行jQuery函数得到它
console.1og($() instanceof Object) // true
/*
(function (window) {
var jQuery = function () {
return new xxx()
}
window.$ = window.jQuery = jQuery
})(window)
*/
script>

（1）jQuery核心函数

简称: jQuery 函数($/jQuery)
jQuery库向外直接暴露的就是$/jQuery
引入jQuery库后，直接使用$即可

作为一般函数调用: $(param)
1).参数为函数:当DOM加载完成后，执行此回调函数
2)参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
3).参数为DOM对象:将dom对象封装成jQuery对象
4).参数为html 标签字符串(用得少):创建标签对象并封装成jQuery对象

作为对象使用: $.xxx()
1). $.each() :隐式遍历数组
2). $.trim() :去除两端的空格


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.0">
    <title>title>
    <script type="text/javascript" src="js/jquery.min.js">script> 
  <script type="text/javascript">
// 需求1.点击按钮:显示按钮的文本，显示一 -个新的输入框
  //1.1).参数为函数:当DOM加载完成后， 执行此回调函数
$(function () { //绑定文档加载完成的监听
 // 1.2). 参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
   $('#btn').click(function () { //绑定点击事件监听
    // this是什么?发生事件的dom元素( 
    // alert(this. innerHTML)
    // 1.3).参数为DOM对象: 将dom对象 封装成jQuery对象
        alert($(this).html())
    // 1.4). 参数为html标签字符串(用得少):创建标签对象并封装成jQuery对象
        $('
' ).appendTo('div')
})
})
   /*需求2. 遍历输出数组中所有元素值*/
        var  arr=[1,3,5,7,9]
     // 1).$.each() :隐式遍历数组
          $.each(arr, function (index, item) {
          console.log(index,item)
          })
     // 2). $.trim() :去除两端的空格
          var str ='my school'
     // console.log('--- '+str. trim()+'---')
          console.log('---'+$.trim(str)+'---')
 
  script>
head>
<body>
<div>
    <button id="btn">点一下button>
    <br/>
    <input type="text" msg="msg1"/><br/>
    <input type="text" msg="msg2"/><br/>
body>
html>

（2）jQuery核心对象

简称: jQuery对象
得到jQuery对象:执行jQuery函数返回的就是jQuery对象j

jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
使用jQuery对象: $obj.xxx()

基本行为：
size()/length:包含的DOM元素个数
[index]/get(index):得到对应位置的DOM元素
each():遍历包含的所有DOM元素
index():得到在所在兄弟元素中的下标


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.0">
    <title>title>
head>
<body>
<button>测试一button>
<button>测试二button>
<button id="btn3">测试三button>
<button>测试四button>
 
 <script type="text/javascript" src="js/jquery.min.js">script> 
  <script type="text/javascript">
 //需求1.统计一共有多少个按钮
var $buttons = $('button')
/*size()/length:包含的DOM元素个数*/
console. log($buttons.size(), $buttons.length)//4 4
//需求2.取出第2 个button的文本
/*[index]/get(index):得到对应位置的DOM元素*/
console.log($buttons [1] .innerHTML, $buttons.get(1).innerHTML)
//需求3.输出所有button 标签的文本
/*each():遍历包含的所有DOM元素*/
/*$buttons.each(function (index, domELe) {
console.log(index, domELe.innerHTML,this)
//此处this是
})*/
$buttons.each(function () {
console.log(this.innerHTML)
})
//需求4.输出'测试三'按钮是所有按钮中的第几个
console.log($('#btn3').index()) //2
script>
body>
html>

伪数组：object对象，有length属性和数值下标属性；没有数组特别的方法如forEach(), push(), pop()， splice()等

三选择器

选择器本身只是一个有特定语法规则的字符串，没有实质用处

只有调用$()，并将选择器作为参数传入才能起作用

$ (selector)作用：根据选择器规则在整个文档中查找所有匹配的标签的伪数组，并封装成jQuery对象返回

（1）基本选择器

（2）层次选择器

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

（3）过滤选择器

定义：在原有选择器匹配的元素中进--步进行过滤的选择器


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.0">
    <title>title>
head>
<body>
    <div id="div1" class="box" >class为box的div1div>
<div id="div2" class="box" >class为box的div2div>
<div id="div3" >div3div>
<span class="box">class为box的span
<br/>
<ul>
<li>AAAAAli>
<li title="hello">BBBBBli>
<li class= "box">CCCCCli>
<li title= "hello" >DDDDDli>
<li title= "two">BBBBBli>
<li style="display:none">我本来是隐藏的li>
ul>
<script type="text/javascript" src="../js/jquery.min.js">script> 
  <script type="text/javascript">
    //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')
     //4. 选择第二个和第三个li元素（//多个过被选择器不是同时执行， 而是依次)
      //$('li:gt(0):lt(2)'). css('background', 'red')
      //$('li:lt(3):gt(0)'). css('background', 'red')
    //5.选择内容为BBBBB的Li
        // $('li:contains("BBB") ').css( 'background', 'red')
     //6.选择隐藏的li
        // console.log($('li:hidden').length, $('li:hidden')[e])
     //7.选择有title属性的li元素
       //$('li[title]' ).css('background', 'red')
     //8.选择所有属性title为hello的Li元素
     $('li[title= "hello"]').css('background', ' red')
 
 script>
body>
html>

（4）菜单选择器


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.0">
    <title>title>
head>
<body>
    <form>
   用户名: <input type="text"/><br>
  密码:<input type="password"/><br>
爱好:
<input type=" checkbox" checked=" checked"/>篮球
<input type=" checkbox"/>足球
<input type=" checkbox" checked=" checked"/>羽毛球<br>
性别:
<input type=" radio" name= "sex" value= ' male'/>男
<input type= "radio" name="sex" value= 'female' />女<br>
邮箱:<input type="text" name="email" disabled="disabled"/><br>
所在地:
<select>
<option value="1">北京option>
<option value="2" selected="selected" >天津option>
<option value-="3" >河北option>
se1ect><br>
<input type="submit" value="提交"/>
form>
<script type="text/javascript" src="../js/jquery.min.js">script> 
<script type="text/javascript">
    //1.选择不可用的文本输入框
// $(':text:disabled').css( 'background', 'red')
//2.显示选择爱好的个数
console.log($(':checkbox:checked').length)
//3.显示选择的城市名称
$(':submit').click(function () {
var city = $('select>option:selected' ).html() //此时city值为天津
city = $('select').val() //选择的option的value属性值
alert(city)
})
 
    script>
body>
html>

四 $工具方法

$.each():遍历数组或对象中的数据
$.trim():去除字符串两边的空格
$. type(obj):得到数据的类型
$. isArray(obj):判断是否是数组
$. isFunction(obj):判断是否是函数
$. parseJSON(json) :解析json字符串转换为js对象/数组
var json = '{"name" :"Tom", "age":12}' // json对象: {}
// json对象===>JS对象
console.1og($.parseJSON(json) )
json ='[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
// json数组===>JS数组
console.1og($.parseJSON(json))
/*
JSON. parse(jsonString) json 字符串--->js对象/数组
JSON. stFingify(js0bj/jsArr) js对象/ 数组--->json字符串
*/

五属性

操作任意属性
attr()、removeAttr()、prop()
操作class属性
addClass()、removeClass()
操作HTML代码/文本/值
html()、val()


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.0">
    <title>属性title>
head>
<body>
    <div id="div1" class="box" title= "one" >class为box的div1div>
<div id="div2" class="box" title= "two" >class为box的div2div>
<div id="div3">div3div>
<span class="box">class为box的spanspan>
<br/>
<ul>
<li>AAAAA
<li title="hello" class="box2" >BBBBBli>
<li class="box">CCCCCli>
<li title="hello">DDDDDli>
<li title="two"><span>BBBBBspan>
ul>
<input type="text" name="username" value="hi"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中button>
<button>不选中button>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
<script>
    //读取第-个div的title属性
      //console. log($( 'div:first').attr('title')) // one
    //给所有的div 设置name属性(value为Jack)
     // $('div'). attr( 'name', 'Jack')
    //移除所有div的title属性
     // $('div'). removeAttr('title')
    //得到最后-个Li的标签体文本
     //console.log($('li:Last ').htm())
     // 设置第-个li的标签体为" mmmmmmmm
     //$( 'li:first'). html('mmmmmmmmm
 ')
    //得到输入框中的value值
    //console.log($(':text').val())
    //得到输入框中的value值
    //console.log($(':text').val()) //读取
     //将输入框的值设置为atguigu
     //$(':text').val( 'atguigu') /设置 读写合一
     //点击'全选'按钮实现全选
       // attr(): 操作属性值为非布尔值的属性
       // prop(): 专门操作属性值为布尔值的属性
 
    var $checkboxs = $(':checkbox')
    $('button:first'). click(function () {
    $checkboxs . prop('checked', true)
    })
    //12..点击'全不选' 按钮实现全不选
    $('button:last'). click(function () {
    $checkboxs. pro( 'checked ',false)
    })
 
    script>
body>
html>

相关阅读:
计算机图形学-算法总结
 carsim 2020 安装说明及多个版本冲突问题解决
 计算机毕业设计——基于SpringBoot框架的网上购书系统的设计与实现
 【云原生之Docker实战】使用Docker部署excalidraw白板绘图工具
 uni-app 实现拍照后给照片加水印功能
 力扣每日一题网络信号最好的坐标
 归并排序-成绩输出-c++
中国医疗器械在“一带一路”国家贸易状况及贡献度分析
 高并发之线程池
 [附源码]Python计算机毕业设计Django面包连锁店管理系统
原文地址：https://blog.csdn.net/qq_62401904/article/details/126086131

jQuery笔记一

一 jQuery的基本使用

二 了解jQuery函数与jQuery对象

（1）jQuery核心函数

（2）jQuery核心对象

三 选择器

（1）基本选择器

（2）层次选择器

（3）过滤选择器

（4）菜单选择器

四 $工具方法

五 属性

mmmmmmmm

mmmmmmmmm

二了解jQuery函数与jQuery对象

三选择器

五属性