JQuery学习(一)

内容概览

  1. JQuery的初步认识
  2. JQuery的选择器
  3. JQuery的过滤器

一、JQuery的初步认识

JQuery概念

  • 一个JavaScript框架。本质上就是一些js文件，封装了js的原生代码而已。简化JS开发。

JQuery能做什么

  • javascript用来干什么的:
    • 操作DOM对象
    • 动态操作样式css
    • 数据访问
    • 控制响应事件
  • jquery作用一样，但是更加快速简洁。

jquery有哪些功能（API）

  • 选择器
  • 过滤器
  • 事件
  • 动画效果
  • ajax

如何引用jquery

  • 引入本地jquery： <script type="text/javascript" src="jquery.js">

  • 引入Google在线提供的库文件（稳定可靠高速）

  • 写第一个JQUery案例

    • 解释:在JQuery库中，'$()'等效于就jQuery()

      //引入jquery文件
<script type=“text/javascript” src=“”></script>
//在html页面编写jq
<script type=“text/javascript”>
   $(function(){
       alert(“jQuery 你好!”);
   });
</script>

讲解$(function(){})

  • ‘$’是jQuery的别名，如‘$()'也可写作jQuery(),相当于页面初始化函数，当页面加载完毕，会执行jQuery()。
  • JQuery操作DOM文档时，必须确保DOM已经载入完毕，此时就需要用到JQuery的ready事件。
  • $(document).ready(function(){})即$(function(){})
    • 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
    • window.onload = function(){};
  • 为方便开发，jQuery简化这样的方法，直接用$()表示
  • JQuery的ready事件不等于Js的load：
    • 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件
    • 用法不同：load只可写一次，ready可写多次

  • window.onload与$(document).ready()对比

    window.onload $(document).ready()
    执行时机 必须等网页中所有内容加载完后(图片)才执行 网页中的DOM结构绘制完后就执行,可能DOM元素相关的东西并没有加载完
    编写个数 不能同时执行多个 能同时执行多个
    简化写法 无 $(document).ready(function(){ //.. }); 推荐写法：$(function(){ });

JQuery对象与JS对象的区别与转换

  • JQuery对象在操作时，更加方便
  • JQuery对象和js对象方法部分不通用
  • 两者相互转换
    • jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
    • js -- > jq : $(js对象)

$()讲解

  • $在JQuery库中,$是JQuery的别名，$()等效于就jQuery().
  • $()是JQuery方法,咱可看作是JQuery的选择器，与css选择器相似（可做对比）
  • 只要是jQuery的对象都这样变量加上一个符号$ 方便识别：var $div = $("#")
function　$(id){
        return document.getElementById(id);
    }

$和document是相等的吗？

<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("a") == $("#a"));//返回结果为false
alert(document.getElementById("a") == $("#a").get(0));//返回true

  • 对象转换($(element))

    • 原生dom对象和jquery代理对象的相互转换
    $(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true

    二、选择器

基本选择器

  • 基本选择器
    • id选择器：$("#id")
    • 类选择器：$(".classname")
    • 元素选择器：$("div")
    • 组合选择器：$("div,p,.classname,#id")
  • 层级选择器:通过DOM的嵌套关系匹配元素
    • 包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。(不受层级限制)
    • 子选择器：$("parent > child") 在给定的父元素下匹配所有子元素。
    • 相邻选择器：$("prev + next") 匹配所有紧接在prev元素后的next元素。
    • 兄弟选择器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。

过滤选择器

基本过滤选择

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

可见过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

子元素过滤选择器

选择器 说明 返回
:nth-child(index/even/odd) 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） 集合元素
first-child() 选取每个元素的第一个子元素 集合元素
last-child() 选取每个元素的最后一个子元素 集合元素
  • :nth-child()选择器是很常用的子元素过滤选择器，如下
    • :nth-child(even)选择每个父元素下的索引值是偶数的元素
    • :nth-child(odd)选择每个父元素下的索引值是奇数的元素
    • :nth-child(2)选择每个父元素下的索引值是2的元素
    • :nth-child(3n)选择每个父元素下的索引值是3的倍数的元素 (n从1开始)

表单对象属性过滤选择器

选择器 说明 返回
$("input:enabled") 选取所有可用元素 集合元素
$("input:disabled") 选取所有不可用元素 集合元素
$("input:checked") 选取所有被选中的元素（单选框、复选框） 集合元素
$("option:selected") 选取所有被选中的元素（下拉列表） 集合元素

表单选择器

选择器 说明
$(":input") 选取所有input textarea select button元素
$(":text") 选取所有单行文本框
$(":password") 选取所有密码框
$(":radio") 选取所有单选框
$(":checkbox") 选取所有多选框
$(:submit") 选取所有的提交按钮
$(":image") 选取所有的图像按钮
$(":reset") 选取所有的重置按钮
$(":button") 选取所有的按钮
$(":file") 选取所有的上传域
$(":hidden") 选取所有的不可见元素

特定位置选择器

  • :first
  • :last
  • eq(index)

指定范围选择器

  • :even
  • :odd
  • :gt(index)
  • :lt(index)

排除选择器

  • :not 非

三、选择器优化

  • 使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器。

    • 多用ID选择器
    • 少直接使用class选择器
    • 多用父子关系，少用嵌套关系

  • 查找

    • 向下查找后代元素
      • children():取得所有元素的所有子元素集合（子元素）（沿着 DOM 树向下遍历单一层级）
      • find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)
    • 查找兄弟元素 siblings()查找当前元素的兄弟

四、JQuery操作属性

1..操作属性：attr()、prop()

  • attr和prop区别：如果属性的值是布尔类型的值 用prop操作，反之attr

    返回属性的值：
$(selector).attr(attribute)

设置属性和值：
$(selector).attr(attribute,value)

使用函数设置属性和值：
$(selector).attr(attribute,function(index,currentvalue))

设置多个属性和值：
$(selector).attr({attribute:value, attribute:value,...})
posted @ 2020-11-30 13:08  沙滩拾贝  阅读(93)  评论(0)  编辑  收藏  举报