JQ的使用

2023-12-28 15:47:40

1.hello,word

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
  $(function () {
    $('#btn2').click(function  () {
      alert($('#username').val())
    })
  })
</script>

2.$

3.jQuery核心函数

$.each() : 隐式遍历数组
 $.trim() : 去除两端的空格
$.appendTo('')

4.JQuery对象

1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标

5.基本选择器

 - #id : id选择器
  - element : 元素选择器
  - .class : 属性选择器
  - * : 任意标签
  - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
  - selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
 $(function () {
// 1. 选择id为div1的元素
     $('#div1').css('background', 'red')
// 2. 选择所有的div元素
     $('div').css('background', 'red')
// 3. 选择所有class属性为box的元素
     $('.box').css('background', 'red')
// 4. 选择所有的div和span元素
     $('div,span').css('background', 'red')
// 5. 选择所有class属性为box的div元素
    $('div.box').css('background', 'red')  //不能写.boxdiv
  })

6.过滤选择器

  $(function () {
//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(BBBBB)').css('background', 'red')
//6. 选择隐藏的li
    $('li:hidden ').show()
//7. 选择有title属性的li元素
    $('li[title]').css('background', 'red')
//8. 选择所有属性title为hello的li元素
    $('li[title=hello]').css('background', 'red')
  })

7.表单选择器

 $(function () {
//1. 选择不可用的文本输入框
    $(':input:disabled').css('background', 'red')
//2. 显示选择爱好 的个数
    console.log($(':checkbox:checked').length)
//3. 显示选择的城市名称
    console.log($('select>option:selected').html())
    console.log($('select').val())  //得到的是选择的option的value
  })

8.$工具方法

1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组

9.属性

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

10.css

 $(function () {
//1. 得到第一个p标签的颜色
     console.log($('p:first').css('color'))
//2. 设置所有p标签的文本颜色为red
    $('p').css('color', 'red')
//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)		//对象
    $('p:eq(1)').css({
      color: '#ff0011',
      background: 'blue',
      width: 300,
      height: 30
    })
  })

11.offset、position

获取/设置标签的位置数据
  * offset(): 相对页面左上角的坐标
  * position(): 相对于父元素左上角的坐标

12.元素滚动

1. scrollTop():
  读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
  读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
  滚动到指定位置(兼容chrome和IE)

13.元素尺度

1. 内容尺寸
  height(): height
  width(): width
2. 内部尺寸
  innerHeight(): height+padding
  innerWidth(): width+padding
3. 外部尺寸
  outerHeight(false/true): height+padding+border  如果是true, 加上margin
  outerWidth(false/true): width+padding+border 如果是true, 加上margin

14.筛选、过滤

在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)

15.筛选_查找孩子-父母-兄弟标签筛选_查找孩子-父母-兄弟标签

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签

16.文档_增删改

1. 添加/替换元素
  * append(content)
    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content)
    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content)
    将指定内容插入到当前所有匹配元素的前面
  * after(content)
    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content)
    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty()
    删除所有匹配元素的子元素
  * remove()
    删除所有匹配的元素

17.事件绑定与解绑

1. 事件绑定(2种)：
  * eventName(function(){})
    绑定对应事件名的监听,    例如：$('#div').click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventName)
3. 事件的坐标
  * event.clientX, event.clientY  相对于视口的左上角
  * event.pageX, event.pageY  相对于页面的左上角
  * event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stopPropagation()
  * 阻止事件默认行为 : event.preventDefault()

18.区别mouseover与mouseenter?

* mouseover: 在移入子元素时也会触发, 对应mouseout
* mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()

19.事件委托

1. 事件委托:
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)

20.淡入淡出

淡入淡出: 不断改变元素的透明度来实现的
1. fadeIn(): 带动画的显示
2. fadeOut(): 带动画隐藏
3. fadeToggle(): 带动画切换显示/隐藏

21.滑动

1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩

22.显示与隐藏

1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏

23.自定义动画

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
1. animate(): 自定义动画效果的动画
2. stop(): 停止动画

24.扩展插件

1. 扩展jQuery的工具方法
  $.extend(object)
2. 扩展jQuery对象的方法
  $.fn.extend(object)

25.多库共存

问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

26.window.onload与$(document).ready()

区别: window.onload与 $(document).ready()
  * window.onload
    * 包括页面的图片加载完后才会回调(晚)
    * 只能有一个监听回调
  * $(document).ready()
    * 等同于: $(function(){})
    * 页面加载完就回调(早)
    * 可以有多个监听回调

 

上一篇：IdentityServer（12）- 使用 ASP.NET Core Identity


下一篇：（转）MyBatis框架的学习(二)——MyBatis架构与入门