jQuery基础知识

osc_baeiwmv4 2020-11-10 12:02:48
javascript Jquery


jQuery基础知识

1. $和jquery的关系

  • $其实是jQuery的别名
  • 一般直接使用$符号

在许多JavaScript库中都会有$作为标记。如果同时使用多个JavaScript库时难免会出现冲突。

2. jQuery两种入口函数

// 入口函数
$(function(){

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

})

3. jquery的多种选择器

3.1基础选择器

$("div") $("#box") $(".box")

3.2层级选择器

$("ul li") $("ul>li")

3.3筛选选择器

$("ul li:first").css("color","red"); 选择第一个
$("ul li:last").css("color","red"); 选择最后一个
$("ul li:eq(2)").css("color","red"); 选择指定的 eq里面的是索引号 从0开始
$("ul li:odd").css("color","red"); 索引号为奇数的元素
$("ul li:even").css("color","red"); 索引号为偶数的元素

4. jquery的css设置语法

选择器.css("属性名","属性值") 单个属性设置
选择器.css({

"属性名":”属性值“,
"属性名":“属性值”
})

示例代码

$("div").css("border","1px solid #000");
$("#box").css({

"width":"100px",
"height":"100px",
"background-color":"red"
})

5. jquery的内容和属性设置的多种语法

5.1 设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

5.2 设置属性 - attr() -prop()

prop() 方法用于设置/改变元素固有属性值
attr() 方法也用于设置/改变自定义属性值。

下面的例子演示如何改变(设置)链接中 href 属性的值:

$("button").click(function(){

$("#runoob").attr("href","http://www.csdn.com");
});

attr() 方法也允许同时设置多个属性。

$("button").click(function(){

$("#runoob").attr("href""http://www.csdn.com", "title" : "CSDN官网");
});

prop代码示例

$("button").click(function(){

var $x = $("div");
$x.prop("color","FF0000");
});

6. DOM节点的关系和增加、删除节点

//DOM节点
parent() 父元素
parents(指定父元素) 父元素集合
find() 后代子节点
siblings() 所有兄弟节点
next() 后边的一个兄弟节点
prev() 后边的一个兄弟节点
nextAll() 后边的所有兄弟节点
prevAll() 前边的所有兄弟节点
addClass("类名") 添加类名
removeClass() 移除类型
toggleClass() 切换类名
// jquery中节点增删
append() 尾部追加
prepend() 头部追加
$("添加的内容").appendTo("父节点")
remove 删除自身所有子元素
empty 保留自身

7. 定时器和清除定时器

setInterval() //设置定时器
clearInterval() //清除定时器

8. jquery的动画函数写法

语法:

hide()隐藏
show()显示
slideUp() 滑上
slideDown() 滑下
$(selector).animate(styles,speed,easing,callback)
styles:产生动画效果的一个或多个 CSS 属性/值。
speed:规定动画的速度。
easing: 可选。规定在动画的不同点中元素的速度。默认值是 "swing" ("swing" - 在开头/结尾移动慢,在中间移动快
"linear" - 匀速移动)
callback:animate 函数执行完之后,要执行的函数。

jquery动画的淡入淡出

jQuery 提供了下面几种方法可以实现显示的淡入淡出效果:

fadeIn() //淡入
fadeOut() //淡出
fadeToggle() //淡入淡出
fadeTo() // 实现淡化到指定的透明度
版权声明
本文为[osc_baeiwmv4]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4326655/blog/4711058

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple