目录
安装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及其快捷键方法*
谢谢!