使用前需要引入script文件js文件，Hbuilder内置了，也可以从网上下载
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
1、获取元素在js时的方式：
var oBox=document.getElementById('box');
在jquery中的写法为
(function(){})
3、css可以链式写在一个元素后面如下：
$('#box').css('width','100px').css('width','100px');
如果是js的写法需要分开例如
obox.style.width='100px';
obox.style.height='100px';
在script中对css属性进行操作
<script>
$('div').css('background','red');
$('#div').css('border','2px solid blue');
$('.box').css('background','url(images/Chrysanthemum.jpg)')
</script>
针对循环可以省略如需要将所有的div都改高度宽度及背景颜色
$('div').css('width','100px').css('height','100px').css('background','red');
如果用js中方式需要利用获取元素后循环给予更改
click()和html()
点击切换颜色
<script>
var color = '';
$('span').click(function () {
color = $(this).html();
})
$('div').click(function () {
$(this).css('background',color);
})
</script>
attr()和val()属性操作
取值赋值方法
<script>
$('#div1').html();// 获取
$('#div1').html('bbbbbb');// 赋值
$('#div1').css('color','red');// 赋值
alert($('#div1').css('color'));//获取div的color属性的属性值
</script>
获取value的方法,如下直接给input 的value赋值
('#box')的属性id的值是什么
('#box').attr('class','uuid');
class操作
1、增加class，addClass(),增加多个时不覆盖
('#box').addClass('class_two');
2、删除class，removeClass()
('#box').toggleClass('class_two');
属性选择器
过去学过在style标签中写属性选择器的方式为[type='test']，由此引发所有的type为'test'的都会被选中，如果执行选择input标签的则使用并集选择器如下：
input[type='test']{}
在jquery中也可以做如此操作
$('input[type="test"]').css('color','red')
• [type='test'] type属性是test
• [type^='test'] type属性以test起始
• [type$='test'] type属性以test结束
• [type*='test'] type属性中包含test
绑定事件，三种写法
1、$('li').click(function(){}) 常用
2、$('li').on('click',function(){}) 不常用
3、$(document).on('click','li',function(){}) 常用
利用length来判断是否有元素
$('div').length如果结果为0则代表页面上没有div元素
隐藏显示
hide() show()
<script>
$(function () {
var bBtn = true;
$('input').click(function () {
if(bBtn){
$('div').hide();// 隐藏
}else{
$('div').show();// 显示
}
bBtn = !bBtn;
})
})
</script>
节点的选择
prev() 上一个兄弟节点
next() 下一个兄弟节点
prevAll() 以上所有兄弟节点
nextAll() 下面所有兄弟节点
siblings() 兄弟节点（不包含自己）
parent() 父节点
parents() 所有的父节点
closest('div') 指的是最近的父节点（必须传参，例题指的是里的最近的div父节点，包行自己向上找，有时能找到自己）
一个操作
('#div2').closest('.box').css('border','1px solid red');
获取一组元素中的一个元素
$('ul').eq(0) （ul标签组中的第一个ul标签）
删除一个节点
如a标签点击后删除a标签所在的li标签
<li><a>删除</a></li>
(this).closest('li').remove()
})
节点操作
$(function(){
//append()：把元素添加到指定的节点的里面的最后
var $li = $('<li>hello</li>');
$('ul').append($li);
//prepend()：把元素添加到指定的节点的里面的最前面
$('ul').prepend($li);
//before()：把元素添加到指定的节点的前面
$('ul').before($li);
//after()：把元素添加到指定的节点的后面
$('ul').after($li);
})
</script>
另一种追加节点的操作方式（谁添加谁，谁添加到谁的区别）
<script>
$(function(){
var $li = $('<li>hello</li>')
// $('ul').append($li);
// $li.appendTo($('ul'));
$li.prependTo($('ul'));
})
</script>
克隆节点
如果在页面中直接将一个节点appendto另一个节点，则原节点会消失，采用clone()方式后原节点不会消失，克隆只克隆结构，不克隆事件，如果想带事件则在clone内写参数true
如
<script>
/*
默认的剪切操作
如何克隆事件(clone函数添加参数true)
*/
$(function(){
// $('div').appendTo($('span')); //默认是剪切操作
$('div').click(function () {
alert(123);
});
var $div = $('div').clone(true);
$div.appendTo($('span'));
//克隆过来的div默认没有原来div的click事件。
//clone()默认是克隆元素结构，而不克隆行为事件。
//clone(true)，参数true就是可以复制之前的操作行为
})
</script>
插入节点
var (this).closest('li');
preLi);
nextLi);
索引
1、index（）括号中没有参数则是在所有的兄弟节点中去查找该节点的索引值给予输出
('#box').index('div')
反过来也行
('#box'))
循环（属于多此一举）
<script>
$(function() {
$('li').each(function(i,elem){
console.log($(elem).html());
$(elem).css('background','red')
})
})
</script>
元素尺寸
(document).height() 页面的高度
$(document).scrollTop() 纵向的滚动距离
监听滚动的事件
scroll(function(){})
距离有定位的父节点的顶端的距离如下（一定是有点位的）
position().Top
绑定和取消事件
绑定事件用on
取消事件用off
如下：只想让click生效一次，则在绑定事件的里面去取消该事件
$('button').click(function(){
alert(123);
$(this).off('click');
})
网友评论