jQuery学习笔记

练习代码

随看随记

• append 和 appendTo的不同
  • $(content).appendTo(selector)
  • $(selector).append(content)
• $ (".div1") 表示获取类名为div1的元素，例如获取< div class=“div1”></ div >
  $ (".div1").onclick表示类名为div1的div点击事件
  jquery中 $.，例如 $ .post()， $.get()， $.ajax()等这些都是jquery这个对象的方法
• “ selector>a” 表示只对其子元素一级的a标签进行操作 “ selector a”表示对所有的后代元素的a标签及进行操作
• js中的selector在HTML中就是一个节点 一个node
• 通过jQuery进行元素添加 var pElement=$("< p id=‘dialog’>别点我</ p>");
  • 配合append 或appenTo添加到指定位置
• jquery 添加文本是用“$(selector)”.text()

引入jQuary

• jQuary下载

jQuary语法

• 基础语法 $(selector).action() 针对哪标签进行什么动作
• $定义jQary (selector) “查找”和查询HTML元素 action()对该元素执行操作
  • 例如$(“p”).click(function(){}) 当点击元素时 进行函数操
  • 针对id 将p修改成#pid即可
  • 针对class 将p修改成.pclass即可
• jQuary事件
  • bind on / unbind off 绑定与解绑定 off可以解绑bind的事件 unbind也可以解绑on的事件 推荐使用on 举例$("#clickMe").on(types:“click”, function); 是function名字而不是执行 因此不要加() 练习项目 L_21
  • 事件的冒泡 练习项目 L_22
    • event.stopPropagation() 阻止向父级冒泡
    • event.stopImmediatePropagation() 阻止所有监听同一事件的其他监听器

HTML

• HTML捕获
  • $(selector).text(); 获取标签内容 不包括标签
  • $(selector).html(); 获取文章内部的内容，包括标签
  • $(selector).val(); 获取所选元素的value值 通常用在input中
  • $(selector).attr(“属性”); 获取属性、
• HTML设置 练习项目L_23
  • 在HTML捕获的()中加入相应的属性值即可修改相应设置
  • attr 可以增加属性和属性值
  • 上述都有回调函数$("#p2").text(function (i,oldContent) {
    return “old:”+qwe+" new:这是新的内容"+i;});//回调函数的两个变量 i：选元素列表中当前元素的下标 oldContent：以及原始（旧的）值 return：返回新值
• HTML添加和删除元素
• 添加元素 既可以添加元素内容 也可以添加标签
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHCi9y17-1595075734631)(%E6%B7%BB%E5%8A%A0%E5%85%83%E7%B4%A0.png)]
  • 成对标签

    ~<>要一起放在$(selector)中对其内容进行修改(.text .html)

  • $(selector).append 直接在其末尾添加不
  • $(selector).preappend 直接在其开头添加
  • $(selector).after 在其后方另起一行添加
  • $(selector).before 在其前方另起一行添加
• 删除元素
  • $(selector).remove直接去除整个$(selector)
  • $(selector).empty去除$(selector)中的内容
• jQuery 效果 练习项目L_24 其中有两个HTML都看一下
  • jQuery 隐藏/显示
    • hide
    • show
    • toggle
  • jQuery 淡入淡出fade
    • fadein 淡出(出现)
    • fadeout 淡入(隐藏)
    • fadetoggle
    • fadeto 淡入淡出到指定透明度
  • jQuery 滑动slide 幕布向上是隐藏 幕布向下时拉开
    • slideup 隐藏
    • slidedown 出现
    • slidetoggle
  • jQuery 动画
  • jQuery 停止动画
  • jQuery Callback
  • jQuery Chaining
• jQuery AJAX 使页面不刷新去访问后端服务器的内容 （后面用到再学）
  • $.get()/$.post() 家在服务器的两种方式
  • $(selector).load() 加载相应的碎片 后缀一般无所谓 多为htm
• jQuery 扩展
  • KaTeX parse error: Expected '}', got 'EOF' at end of input: …yjq=function(){(this).text(“hello”)}; 扩展函数
  • var myjq=$.noConflict()在$有冲突时 可以用myjq来代替$实现jQuery的功能
• jQuery CSS
  • jQuery方法
    • $(selector).css(“value”,“valuename”); 单个属性
    • $(selector).css({ width:“100px” , height:“100px”}); 多个属性
    • $(selector).addclass(“”) 针对该标签添加类名
    • $(selector).removeclass(“”) 针对该标签去除类名
    • $(selector).toggleclass(“”) 针对该标签反复横跳类名
    • 如果一个DOM元素包含多个类名，其中的两个类名的属性产生冲突，并不是根据html中类名的顺序来决定DOM元素的属性，而是根据css样式中的顺序来决定DOM元素的属性，它取决于css样式表中后读取到的属性。
  • jQuery模型 width与height同理 通过上述的css常用方法设置css参数
    • height 元素内容的高度
    • innerheighht height+padding*2
    • outerheight height+padding*2+border *2
    • outerheight(true) height+padding*2+border *2+margin *2
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-86cmRkyx-1595075734635)(%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B2.png)]
• jQuery遍历
• 向下遍历 ()中可以添加“selector” 表示对其后代中的这个选择器进行遍历
  • $(selector).children() 只向下遍历一级
  • $(selector).find() 向下遍历需所有的后代
• 向上遍历 ()中可以添加“selector” 表示对其后代中的这个选择器进行遍历
  • $(selector).parent() 只向上遍历一级
  • $(selector).parents() 向上遍历需所有的后代
  • $(selector1).parentsUntil(“selector2”) 从selector1向上遍历到 selector2区间所有的元素 同时不包括selector1和selector2
• 同级遍历
  • $(selector).sibilings() 遍历除了selector所有的同级元素
  • $(selector).next() 遍历selector的下一个同级元素
  • $(selector).nextAll() 遍历selector的后面所有同级元素
  • $(selector1).nextUntil(selector2) 从selector1向后遍历到 selector2区间所有的元素 同时不包括selector1和selector2
  • prve 与 next 的方向相反 其余相同
    • $(selector).prev()
    • $(selector).prevAll()
    • $(selector).prevUntil()
• jQuery过滤
  • $(selector).first() 查找第一个符合元素的
  • $(selector).last() 查找最后一个符合元素的
  • $(selector).eq(number) 查找第number个符合元素的
  • $(selector).filter(“”) 查找符合条件的元素
  • $(selector).not(“”) 查找不符合条件的元素
• 菜单栏 练习项目 L_25 小结 这个要反复练习
  • hover无法被绑定 通常用mouseenter和mouseleave两个同时绑定以实现hover
  • 对于js的定位一定要准确 例如要定位到a上
  • css中设置高、宽度时要设置对象本身的参数 不要设置其块的参数

jQueryUI

• interaction
  • $(selector).draggable() 对块进行拖动
  • $(selector).droppable() 确定块的放置区域
    • $(selector).on(“drop”,function)
    • function drop (event,ui){} 当块放置到该区域时触发drop函数。
  • $(selector).resizable() 可以对指定块的宽度高度进行调节
    • 只能下边界或者右边界进行移动
  • $(selector).selectable() 使列表内的元素可以被选中并添加类名ui-selected 通常与hasClass()一起使用来检查选择是否正确
    • 与hasClass(“selector”) 方法检查被选元素是否包含指定的classname 其选择器不需要加.或#。
  • $(selector).sortable() 被选中的文字可拖动 可以做排名的特效
• widgets
  • $(selector).according() 手风琴菜单效果
    • 其效果是第奇数内容菜单标题 第偶数内容做菜单内容，可以被拉开过闭合
  • autocomplete 自动补全
    • $(selector).autocomplete({source:数据源}) 可以是数组等 source后绝对不可以加;
  • $(selector). button() 生成一个按钮控件
  • $(selector).datepicker() 选中日期并进行输出
  • $(selector).dialog() 弹出一个对话框
  • $(selector). progressbar() 进度条
  • $(selector). progressbar(“option”，“value”，25) progressbar是通过option属性来对其他属性进行修改
  • $(selector).menu() 菜单 有很多属性可以再选择
    • 子菜单的某个位置在母菜单的某个位子例如{my:‘right bottom’, at:‘center center’}可以解释为子菜单的右下角在母菜单的中心
  • $(selector).slider() 可拖拽的滑块条 与验证拼拼图类似
  • 其中change属性是滑块停下来后显示属性 slide是边滑动边显示属性
    • $(".sliderValue").text($("#slider").slider(“option”,“value”)) 将滑块中的value显示到指定位置
  • $(selector).spinner() 对框内的数字进行变大变小的改动 也可以取出
  • $(selector).tabs() 下滑菜单的效果
    • 需要用#来定位其下拉内容的位置 具体查看API
• 练习项目 L_26 横向菜单的制作有点问题