JQ介绍

JQ介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。

jQuery的引入方式有两种：

直接下载文件到本地（最常用），从本地中导入

使用文件的网络地址，就像我们img标签里面的那个src的用法差不多。

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

引入完之后，就可以直接使用jQuery的语法来写了，但是还是要写在script标签里面，并且要注意引入顺序，先引入文件，再在script标签里面写jQuery的代码，先导入再使用。

jQuery对象和dom对象

jquery对象找到的标签对象称为–jQuery对象
原生js找到的标签对象称为–dom对象
DOM对象只能使用dom对象的方法 不能使用jQuery对象的方法
jQuery对象也是只能使用知己的对象方法

jQuery对象和dom对象之间可以互相转换

jquery转换dom
	$('#d1')[0]
dom转换jQuery
    var a=$(#d1)[0]
    $(a)
    $($(#d1)[0])


$($('div')[0]).text().trim();
"床前明月光"

$($('div')[0]).text('张三');
$($('div')[0]).text('张三').text();

jQuery选择器

jquery(’#d1’) 找到id为d1 的标签
简写$(‘d1’)

选择器可能找到的是多个标签，是一个数组，但还是jQuery对象可以直接只用jQuery的方法，对找到的所有标签进行统一设置；如果要单独设置选中的所有标签中的某个标签可以通过索引取值的方式找到，按后注意 通过索引得到的标签 是个dom对象$($(#d1)[0])

基本选择器（同css）

id选择器：

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id") #不管找什么标签，…("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容

标签选择器：
$(“tagName”)

class选择器：
$(".className")

配合使用：
$(“div.c1”) // 找到有c1 class类的div标签

所有元素选择器：
$("*")

组合选择器：
$("#id, .className, tagName")

层级选择器：（同css）x和y可以为任意选择器
$(“x y”);// x的所有后代y（子子孙孙）
$(“x > y”);// x的所有儿子y（儿子）
$(“x + y”)// 找到所有紧挨在x后面的y
$(“x ~ y”)// x之后所有的兄弟y

标签操作

样式类操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例代码

$(’.c1’).addClass(‘c2’);
$(’.c1’).removeClass(‘c2’);
$(’.c1’).hasClass(‘c2’);
$(’.c1’).toggleClass(‘c2’);

css样式
原生js
标签.style.color = ‘red’;
jquery
$(’.c1’).css(‘background-color’,‘red’);
同时设置多个css样式
$(’.c1’).css({‘background-color’:‘yellow’,‘width’:‘200px’})
位置操作
查看位置
$(’.c2’).position(); //查看相对位置
{top: 20, left: 20}
$(’.c2’).offset(); //查看距离窗口左上角的绝对位置
{top: 28, left: 28}
设置位置
$(’.c2’).offset({‘top’:‘20’,‘left’:‘40’});

jQuery绑定点击事件的写法

原生js绑定点击事件
// $('.c1')[0].onclick = function () {
//     this.style.backgroundColor = 'green';
// }

jquery绑定点击事件
    $('.c1').click(function () {
        $(this).css('background-color','green');
    })