JQ的使用

2022-01-16 19:32:48 阅读：143 来源： 互联网

标签：元素 JQ li css background 使用选择器 red

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(){})
    * 页面加载完就回调(早)
    * 可以有多个监听回调

标签：元素,JQ,li,css,background,使用,选择器,red
来源： https://www.cnblogs.com/521lzl/p/15810973.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9