zoukankan      html  css  js  c++  java
  • Jquery初识及选择器

    1.jQuery的初步认识

    (1) jQuery的定义

    jQuery是一个优秀的js库,jQuery凭借简洁的语法和跨平台的兼容性,极大的简化了javascript开发人员遍历html文档、操作DOM、处理事件、执行动画和开发ajax的操作。

    (2) jQuery的优势

    ① 1、轻量级

    ② 2、强大的选择器

    ③ 3、出色的DOM操作的封装

    ④ 4、可靠的事件处理机制

    ⑤ 5、完善的ajax

    ⑥ 6、不污染顶级变量  jQuery的入口函数

    ⑦ 7出色的浏览器兼容  jQuery中将所有的兼容都做好了,因此不需要开发者手动兼容(只有1.x版本的jQuery能完美兼容)

    ⑧ 8链式操作方式(链式编程)

    ⑨ 9隐式迭代

    ⑩ 10、行为层和结构层的分离

    ⑪ 11、丰富的插件支持 jquery有很多的官方插件和民间插件 还可以自己开发插件

    ⑫ 12、完善的文档

    ⑬ 13、开源

    (3) jQuery的引入

    ① 本地引入

    1) jQueryjs文件 下载到本地 在使用的时候 直接script引入即可

    2) 

    ② 网络引入

    1) 直接从远程服务器引入jQuery文件

    2) 

    (4) jQuery入口函数

    ① 写法:

    ② 

    ③ jQuery入口函数的特点1:写在jQuery入口函数中的代码 会在页面上结构和样式加载完之后 执行

    ④ jQuery入口函数特点2:一个script标签中可以写任意多个jQuery入口函数,不会覆盖

    ⑤ 简写形式:$(function(){ jQuery代码 })

    (5) jQuery对象和DOM对象

    ① jQuery对象:$(‘选择器’)

    1) jQuery对象是一个伪数组 伪数组中的数组项 是所有满足选择器条件的DOM元素

    ② jQuery对象和DOM对象之间的方法不能互相使用。

    1) Jquery的代码 和 原生js的代码 可以随意包含 因此有的时候,我们使用原生方法更简洁 有时使用jQuery方法更简洁

    ③ Jquery对象和DOM对象之间的互转

    1) Jquery--->DOMjQuery对象[索引]

    2) DOM--->jquery$(DOM元素)

    (6) Jquery多库共存问题

    ① jQuery自身有一个方法 jQuery.noConflict()  这个方法一调用 就会将jQuery中的$给让出来,让给别的库使用

    2.jQuery的选择器

    (1) 基础选择器:

    标签 类名 id

    (2) 层级选择器:子代 后代

    ① $(‘a元素+b元素’)  获取紧跟在a元素后面的b元素 只能获取紧跟在后的元素

    ② $(‘a元素~b元素’)  获取a元素后面的所有b元素 可以获取间接跟在后面的元素

    (3) 基本过滤选择器

    ① $('li:first'):获取第一个li元素

    ② $('li:last'):获取最后一个li元素

    ③ $('li:not(.box)'):获取所有的li,除了class名为box

    ④ $('li:even'):获取索引为偶数的li元素

    ⑤ $('li:odd'):获取索引为奇数的li元素

    ⑥ $('li:eq(2)'):获取索引值为2li元素

    ⑦ $('li:gt(2)'):获取索引大于2li元素

    ⑧ $('li:lt(2)'):索引小于2li元素

    (4) 内容过滤选择器

    ① $(“li:contains(指定文本内容)”)  获取包含指定文本内容的li

    ② $(“li:has(指定标签名)”)  获取包含指定标签的li

    ③ $(“li:empty”)  获取内容为空的li

    (5) 可见性过滤选择器

    ① $(“li:hidden”)  获取隐藏的元素 获取的元素不仅限于displaynone 其他各种隐藏手段 隐藏起来的元素都可以获取到

    ② $(“li:visible”)  获取显示的元素

    (6) 属性过滤选择器

    ① $(“li[指定的属性名]”) 选中拥有指定属性的li

    ② $(“li[指定的属性名=指定值]”) 选中拥有指定属性 且值为指定值的li

    ③ $(“li[指定的属性名^=指定值]”) 选中拥有指定属性 且值以指定值开头的li

    ④ $(“li[指定的属性名$=指定值]”) 选中拥有指定属性 且值以指定值结尾的li

    ⑤ $(“li[指定的属性名*=指定值]”) 选中拥有指定属性 且值包含指定值的li

    ⑥ $(“li[指定的属性名!=指定值]”) 选中拥有指定属性 且值不为指定值的li

    (7) 子元素选择器

    ① $(“li:nth-child(序号)”)  获取指定序号的li

    ② $(“li:nth-child(even/odd)”)  获取索引为偶数或奇数的li

    ③ $(“li:nth-child(2n+1)”)   获取的是第2n+1li  按照序号进行查找

    ④ $(“li:first-child”)  获取第一个li

    ⑤ $(“li:last-child”)  获取最后一个li

    (8) 表单对象过滤选择器

    ① $(“表单元素:disabled”)  获取被禁用的表单元素

    ② $(“表单元素:checked”)  获取被选中的表单元素

    ③ $(“下拉列表项:selected”)  获取被选中的列表项元素

    (9) 表单选择器

    ① 

    3.jQuery基础操作

    (1) jQuery操作dom节点

    ① jQuery获取子元素:jQuery元素.children()  注意:只能获取到直接的子元素。至于后代元素则获取不到

    ② $('.title').next().css('background', 'red'); // 当前元素的下一个兄弟节点

    ③ $('.title').nextAll().css('background', 'red'); // 当前元素的下面所有的兄弟节点

    ④ $('.title').prev().css('background', 'red'); // 当前元素的上一个兄弟节点

    ⑤ $('.title').prevAll().css('background', 'red'); // 当前元素的上面所有的兄弟节点

    ⑥ $('.title').siblings().css('background', 'red'); // 当前元素的兄弟节点

    ⑦ jQuery元素.parent()  获取直接父元素

    ⑧ jQuery元素.parents()   获取所有父元素(找到html为止)

    1) 这个方法中可以传入一个参数  是一个选择器

    ⑨ jQuery父元素.find(选择器)  获取父元素中满足选择器条件的子元素

    ⑩ jQuery元素.filter(“选择器”)  获取jQuery元素中满足选择器条件的元素

    ⑪ jQuery元素.not(“选择器”)  获取jQuery元素中 不满足选择器条件的元素

    (2) jQuery操作属性

    ① Attr方法可以操作元素属性

    1) 获取属性值:jQuery元素.attr(“属性名”)

    2) 设置属性:jQuery元素.attr(“属性名”,”属性值”)

    3) 移除属性:jQuery元素.removeAttr(“属性名”)

    ② Prop方法也可以操作元素属性

    1) 获取属性:jQuery元素.prop(“属性名”)

    2) 设置属性:jQuery元素.prop(“属性名”,”属性值”)

    ③ Prop的使用环境

    1) 1、只添加属性名称该属性就会生效,应该使用prop操作

    2) 2、只存在true/false属性,应该使用prop操作

    (3) jQuery操作类名

    ① addClassjQuery元素.addClass(“要添加的类名”)

    ② removeClassjQuery元素.removeClass(“要移除的类名”)

    ③ toggleClassjQuery元素.toggleClass(“要切换的类名”)

    ④ hasClassjQuery元素.hasClass(“指定的类名”) 判断当前元素中是否有指定类名 有返回值为true 没有返回值为false

    (4) jQuery操作样式

    ① 获取样式:jQuery元素.css(“属性名”)  任意属性都可以获取和操作

    ② 设置样式:jQuery元素.css(“属性名”,”属性值”) 设置样式会统一设置为行内样式

    ③ 批量设置样式:jQuery元素.css({属性名:属性值,属性名:属性值....})

    ④ 批量获取:jQuery元素.css([属性名1,属性名2....])

    1) 得到的结果如下

     

    (5) jQuery操作内容

    ① Html

    1) jQuery元素.html()获取元素的html内容

    2) jQuery元素.html(“指定内容”) 设置html内容

    ② Text

    1) jQuery元素.text()获取元素的文本内容

    2) jQuery元素.text(“指定内容”) 设置文本内容

    ③ Val

    1) jQuery元素.val()获取表单元素的文本内容

    2) jQuery元素.val(“指定内容”) 设置表单元素文本内容

     

  • 相关阅读:
    初步认识,合并集(树)
    20180918-1 词频统计
    20181011-1 每周例行报告
    2018091-2 博客作业
    项目第六天
    项目第五天
    项目第四天
    项目第三天
    总结随笔
    测试报告
  • 原文地址:https://www.cnblogs.com/shihaiying/p/13813189.html
Copyright © 2011-2022 走看看