jQuery

本文详细介绍了使用jQuery的基本步骤,包括引入库、选择元素、属性操作、样式修改、值的获取与设置、元素操作以及事件绑定。重点讲解了jQuery的选择器类型,如基础、层次、属性、表单和过滤选择器,并对比了attr与prop的区别。此外,还涵盖了元素的添加、删除、遍历和事件监听,为初学者提供了全面的jQuery入门知识。
摘要由CSDN通过智能技术生成

使用jQuery步骤:

  1.引入jquery文件
  2.获取jq对象  $(选择器)
     是jsDOM对象的封装,是类数组的封装对象

  注意:
    1.jq对象与js对象不同 ,是对js节点的封装
    2.调用jq功能只能 通过jq对象,不能通过 js对象
    3.js对象与jq对象之间转换问题
        js-> jq
          $(jsDOM)
        jq->js
          jq[索引] -> 推荐
          jq.get(索引)->了解

jQuery选择器

基础选择器  
        #id
        #class
        元素
        *统配
    群组选择器
        选择器1,选择器2...

    层次选择器
        后代选择器    父选择器 子选择器   所有子元素(直接|间接)
        子选择器      父选择器>子选择器   只有直接子元素
        相邻兄弟      父选择器+子选择器
        普通兄弟      父选择器~子选择器
    属性选择器
    表单选择器
    过滤选择器

注意:
    jsDOM中获取DOM对象如果没有获取到返回null
    jquery获取jq对象,如果没有获取到返回一个空jq对象,根据length判断是否等于0
属性选择器 []
    [属性名]  具有这个属性的元素
    [属性名=属性值] 具有这个属性,并且等于指定属性值被选中

表单选择器 :
    :input 选中所有的input,select,textarea,button都能被选中
    :radio
    :checkbox

过滤选择器 (配合其他选择器一起使用)
    :checked 被选中的
    :selected 被选中的option
    :eq(index) 获取指定索引位置的元素
    :gt(index) 获取大于指定索引的元素
    :lt(index) 获取小于指定索引的元素
    :even  偶数索引
    :odd   奇数索引

操作属性

操作属性:
    固有属性 :  src,href,id,class...
    自定义属性 : 程序猿为元素添加的自定义属性
    boolean属性 : checked  selected  disabled

    获取元素的属性值
        $().attr("属性名")   可以获取固有属性的值,可以获取自定义属性,boolean结果为对应的值
        $().prop("属性名")   可以获取固有属性的值,不可以获取自定义属性,boolean属性结果为true|false

    为元素设置属性值
         $().attr("属性名","属性值")   可以操作固有属性,自定义属性,boolean属性对应属性值为确定的值
        $().prop("属性名","属性值")    只能操作固有属性,boolean属性,值为true|false
    删除元素属性
         $().removeAttr("属性名")  移出属性

attr,prop两者之间区别
    1.attr可以操作所有属性
    2.prop只能操作固有属性
    3.attr操作boolean属性,value为定值,prop操作boolean,value为true|false
    4.boolean属性建议使用prop,其他属性建议使用attr
操作元素的样式
        attr(“class”)获取class属性的值,即样式名称
        attr(“class”,”样式名”)修改class属性的值,修改样式 ->属性值的覆盖
        addClass(“样式名”)添加样式名称 ->属性值的追加
        css()添加具体的样式
        removeClass(class)移除样式名称

操作值

非表单元素标签对的内容
    获取值
        html() -> innerHTML  识别标签对中的内容包括元素结构
        text() -> innerText  值识别存文本
    设置值:
        html("")
        text("")

表单元素的值
    val()  获取    ->value
    val("值")  设置

添加元素

创建元素:
    $(‘元素内容’);

插入到指定位置:
    prepend(content)在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
    $(content).prependTo(selector)把 content 元素或内容加入 selector 元素开头
    append(content)在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。
    $(content).appendTo(selector)把 content元素或内容插入selector 元素内,
    before()在元素前插入指定的元素或内容:$(selector).before(content)
    after()在元素后插入指定的元素或内容:$(selector).after(content)


删除元素

        remove()删除所选元素或指定的子元素,包括整个标签和内容一起删。
        empty()清空所选元素的内容

遍历元素

each()    $(selector).each(function(index,element)) :遍历元素

事件绑定

ready加载事件  -> window.onload
    1.$(function(){

    })

    2.jQuery(funciton(){

    })

    3.$(document).ready(function(){})


bind事件绑定
 jq对象.bind("事件名",函数)
 链式绑定
  jq对象.bind("事件名",函数).bind("事件名",函数).bind("事件名",函数)...
 绑定多个事件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值