学做小程序之JQuery简介

目录

安装JQuery

选择器

过滤器

操作样式

操作DOM

事件

操作元素属性

表单及输入

Ajax-load方法

Ajax-Ajax及其快捷键方法

安装JQuery

https://code.jquery.com/jquery-3.3.1.js

国内https://www.bootcdn.cn/搜索jquery下载

编码的时候将jquery写在自己的js文件之前；

选择器

原生js进行id选择：document.getElementById('a')

jQuery('#b').css('background', 'red');

jQuery可以用$代替。

id选择器

$('#b')

类选择器

$('.b')

元素选择器

$('div')

带有某个属性(type="number")的元素选择器

$('input[type=number]');

伪类选择器

$('div:first');

过滤器

$('div .child').css('border', '2px solid black');

或者

$('div').find('.child').css('border', '2px solid black');

$('#child1').parent().css(...);

$('#child1').parents().css(...);

.filter() 过滤

操作样式

$('.a').css(); //一次添加多个样式

$('.a').addClass(...);// 添加css中的类名

$('.a').removeClass(...); //移除类

var a = $('.a').css();

a.hide(); //隐藏

a.show(); //展示

a.fadeOut(); // 渐变隐藏

a.fadeIn(); //渐变显示

a.slideUp(); //

a.slideDown(); //

操作DOM

$('#a').text(); //返回a里面的所有文本

$('#a').text'(La'); //替换文本

$('#a').append('xxx'); //追加内容

$('#a').prepend('xxx'); //插入最前面内容

事件

.on('click', function(){...}); //添加事件

card.on('mouseenter', function(){...}); //鼠标进入

card.on('mouseleave', function(){...}); //鼠标进入

操作元素属性

$('#a').attr('href','baidu.com'); // 修改显性属性

$('#a').prop('href','baidu.com'); // 修改隐性属性

$('#a').removeAttr('href'); // 移除显性属性

表单及输入

input 获取内容 val()函数

input 选中内容 select();

input 不聚焦 blur();

input 聚焦 focus();

Ajax-load方法

npm install http-server --global

http-server 启动服务器http://localhost:8080/

浏览器XHR只看异步请求；

var card = $('#card');

var trigger = $('#trigger');

var card = $('#card');

var loaded = false;

trigger.on('mouseenter',

function(){

if(!loaded) {

card.load('card.html');

loaded = true;

}

card.slideDown();

})

trigger.on('mouseleave',

function(){

if(card.is(':visible')) {

card.slideUp();

}

})

或者

trigger.on('click',

function(){

if(card.is(':visible')) {

card.slideUp();

} else {

if(!loaded) {

card.load('card.html');

loaded = true;

}

card.slideDown();

}

})

Ajax-Ajax及其快捷键方法

html代码：

搜索github用户

js代码：

var form = $('#search');

var input = $('input#username');

var result = $('#result');

var username;

form.on('submit', function(e){

e.preventDefault(); // 禁用浏览器默认操作

username = input.val();

$.ajax('http://api.github.com/users/'+ username)

.done(function(data){

var html =

'

用户名: '+data.login+'

' +

'

介绍: '+ (data.bio || '无') +'

';

result.html(html);

})

})

效果图：

小结：

安装JQuery

选择器

过滤器

操作样式

操作DOM

事件

操作元素属性

表单及输入

Ajax-load方法

Ajax-Ajax及其快捷键方法*

谢谢！