html+css实战（4）

JQuery（基础内容笔记）

---

• 选择器：

$('.classname or #tagname).css('propertyname','property');
$('input[type="text"]')
$('div:first')

• 过滤器

$('div').find('.child')
$('#child1').parent()//上一级的父元素
$('#child1').parents('.grandpa')//all 父元素）
$('.child').fiter('.not-gay')//在所有child类中细分

• 操作样式

//多条css样式
$('div').css({color:'red',background:'black',……})
//每条样式都需要单引号，如果有'-'连字符要换成驼峰命名法或者把属性名用单引号括起来表示字符串

//xx在css中定义样式
$('div').addClass('xx')
$('div').removeClass('xx')
//不需要前面的小圆点！

//元素的显示与隐藏 
var a=$('.xx');//前提,同样驼峰
a.hide();
a.show();
a.fadeOut(xxms);
a.fadeIn(xxms);
a.slideUp(xxms)//向上隐藏
a.slideDown(xxms)//向下显示
//在js中不能定义css的内容！

• 操作DOM

$('#a').text/html('可有内容')
//text返回文本，html返回所有
$('#a').prepend/append('<div>xxx</div>')
$('#a').remove();

• 事件

//点击显示或隐藏
varname.**on**('(dbl)click',function(){
if(xx.is(**':visible'**)
    xx.hide();
else
    xx.show();
//可以直接通过xx.toggle()代替
}
//当鼠标hover时样式变化
xx.on('mouseenter',function(){xx.addClass('active')})
xx.on('mouseleave',function(){xx.removeClass('active')})

• 操作属性

$('#a').attr('href','http://xxx.com');
$('#a').prop('href','http://xxx.com');
//attr可以修改**自定义的**、**显形（肉眼可见）**的属性，prop可以修改隐形的
$('#a').removeAttr('asdf');//移除自定义属性
var text=$('#a').prop('text');//此处只能用prop

• 表单及输入

$('#a').focus();
$('#a').blur();
//页面跳转
<form id='form' action="xx.html")</form>
$('#form').submit;

• Ajax：异步请求
  • Question：为什么不能在js中load其他html？而要把js代码写在在main.html中才能load？似乎是自己定义的js文件没有用？

form.on('submit',function(e){//form下有一个button type=“submit”
e.preventDefault();//阻止浏览器默认刷新
$.ajax('url address')
  .done(function(data){}
})

$.ajax({
url:'address',
method:'post/get/……',
data:{//if post
username:'xxx',
password:'xxx',},
success:function(){},
error:function(data){}
});
//简单的封装
$.post('url',{username:'xxx',password:'xxx'})
$.get('url')
$.getJson('url')//获取数据
$.getScript('url')//获取代码