jquery

JQuery学习

JQuery简介：jQuery就是JavaScript的一个库，通过调用jQuery库，可以大大减少JavaScript项目编写的复杂程度，使JavaScript编程变得简单。

jQuery()/$()//两种都是表示调用jQuery库

---

选择器

选择器是jQuery的最基本也是最常用的一个工具，主要就是可以通过id，class，元素名等方式来选择元素。
e.g:加入有一段代码如下

<div id = 'demo' class = 'one'></div>

1. 通过id选择器

   $('#demo')

2. 通过class选择器

$('.one')

3. 通过元素名选择器

$('div')

---

过滤器

当一个选择器选择出了较多的元素时，想要选出这些元素中更细的一部分，就可以使用到过滤器。
e.g:

<div class = 'parent'>
	<div class = 'child1'></div>
	<div class = 'child2'></div>
</div>
	

要选择出child2，可以通过过滤器选择,当然也可以直接用选择器选择

$('.parent')
	.find('child2')//使用过滤器
	
$('.parent.child2')//使用选择器

---

样式操作

调用jQuery来修改html-css样式。
e.g:

<div class="demo">
    hello world
</div>

给上述div添加样式

$('div')
    .css({
        background: 'black',
        color: 'red',
    })
 // 或者
$('div')
    .css('background', 'black')
    .css('color', 'red');

---

操作DOM

操作dom，实现dom的“增删改查”功能

$('div').text();// 查div下所有的文本内容

$('div').text('hello jQuery');// 修改text的内容

$('div').html();// 查div下所有的内容，注意和text()的区别

$('div').append('');//在子目录最后添加任意元素（文本元素也可以）

$('div').prepend('');//在子目录最前添加任意元素（文本元素也可以）

$('div').remove();//删除当前元素

---

事件

事件就是当鼠标或者键盘等操作时发生的事情，主要是要了解on（）这个方法
e.g

//定义一个div，和一个div
 <button class="demo1">登录</button>
 <div class="demo"></div>

触发事件on（）中的事件包括click，keydown，mouseenter等

var target = $('.demo1');
var test1 = $('.demo');
target.on('click', function () {
    test1.text('we love cq');//当鼠标点击时，发生function函数里的事情
})

test1.show(500);//显示
test1.hide(500);//隐藏文本
test1.slideUp();//下往上隐藏
test1.slideDown();//上往下显示

---

操作属性

attr：可以用于修改显示的属性
prop：可以用来修改隐性的属性
e.g

<div class="demo" age = '20'>dasdasdasdasd</div>

修改属性

test.attr('age', '99');
test.prop('class', 'try');

---

表单及输入

<form action="result.html">
<input class="name" type="text" value="default">
<button>提交</button>
</form>//创建一个表单，输入的内容为text格式

a.val('try');//修改value的值，注意不能用text（）和html（）
a.focus();//聚焦事件
a.blur();//非聚焦事件
a.submit();//提交

---

Ajax方法

1. 与服务器交换数据
2. 利用Ajax方法可以实现异步的功能，减少重载

POST数据

$.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts', //目标url
    type: 'POST', //默认是get类型，获得数据；POST类型，发送数据
    data: JSON.stringify({
        type: 'origin',
        id: 29,
        title: 'JStry',
        body: 'origin',
        userId: 999,
    }), //需POST的数据
    contentType: 'application/json; charset=UTF-8', //data的格式
    success: function (data) {
        console.dir(data);
    } //输出发送的数据。
});

GET数据

$.ajax({
    url: 'https://api.github.com/users/biaoyansu', //目标url
    type: 'GET', //默认是get类型，获得数据；POST类型，发送数据
    success: function (data) {
        console.dir(data);
    } //请求成功后执行的函数，输出得到的数据。
});