JQ初级

Posted 2021-01-30 xiamenghan

1.什么是JQ

jQuery是对原生javascript二次封装的工具函数集合，使用jq基本上都是完成函数的调用，函数调用需要(); jQuery是一个简洁，高效而且功能丰富的JavaScript工具库。
（JQ本质上还是js，用的是原生js语法）


jQuery的优势：简洁的选择器，强大的DOM操作，简化的Ajax操作，开源可扩展性

 

2.引入JQ

<!-- 下载jq到本地 -->

<script src="js/jquery-3.3.1.js"></script>

--------------------------------------------------------------

<!-- 引入jq CDN 地址 -->

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

3.JQ的对象

是具有jq框架规定的所有功能的调用者；

$也就是jQuery对象，可以直接使用；

自定义jQuery对象：
 var $jq = jQuery .noConflict();4.

4.延迟加载

jq的延迟加载指文档书加载完毕后回调

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

早于window.onload;
可以多次绑定事件;
可以简写为$(function() {};

5.jq操作

$（css选择器语法）
eg：$（‘.box‘）得到的是一个存放原生js对象的数组，就是jq对象，页面中有多少个类，该jq对象就承载着多少个对象，点可以作为一个整体来使用

选择器

对象间转换
js对象：box  ； jq对象：$box
js对象转换成jq对象：$（box）
jq对象转换成js对象：$box[index]

--------------------------------------------------------

文本操作：
获取原有的文本
$box = $(‘.box‘);
$box.text() | $box.html()

设置新文本
$box.text(‘newtext‘) | $box.html(‘<i>newdata</i>‘)

--------------------------------------------------------

事件绑定：

$box = $(‘.box‘);

$box.click(function(ev) {})
注：jq对象如果包含多个页面元素对象，可以一次性对所有对象绑定该事件；ev事件为jq事件，也兼容js事件；this为js对象，$（this）就转换为jq对象；内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)

--------------------------------------------------------

类名操作：
添加一个新类名：
$(‘.box‘).addClass("newClass");
删除一个已有的类名：
$(‘.box‘).removeClass("oldClass");

当多类名时，jq操作类名将每个类名作为单一对象考虑，不会影响其他类名；

--------------------------------------------------------

样式操作
$box = $(‘.box‘);
获取背景颜色
$box.css(‘background-color‘);
设置背景颜色
$box.css(‘background-color‘,‘blue‘);
通过函数返回值设置背景颜色
$box.css(‘background-color‘,function(){return ‘red‘});

---------------------------------------------------------

// 7.文档结构关系
var $sup = $(‘.sup‘);
// 父
console.log($sup.parent());
// 父,父的父...
console.log($sup.parents());
// 子们
console.log($sup.children());
// 上兄弟
console.log($sup.prev());
// 上兄弟们
console.log($sup.prevAll());
// 下兄弟
console.log($sup.next());
// 下兄弟们
console.log($sup.nextAll());
// 同级别的兄弟们
console.log($sup.siblings());

// 在sup下查找类名为inner的子级
console.log($sup.children(‘.inner‘))

 

‘background-color‘