首页 > 代码库 > Jquery基础(二)

Jquery基础(二)

简介:

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。

Jquery的语法与js和css的区别与联系

1.选择器

css选择器
基本选择器:* # . p
组合选择器:p,h p h p+h p>h
属性选择器:[class=‘aaa‘] div[id]

js中DOM节点查找: 直接查找
导航属性查找 6种
children
parentElement
firstElementChild
lastElementChild
nextElementSibling
previousElementSiling

jquery
选择器:
基本选择器
层级选择器
属性选择器
表单选择器

筛选器:
$(‘li:eq(2)‘)
过滤筛选器:$(‘li‘).eq(2)
查找筛选器:children find
next nextall nextUntill
prev prevAll prevUntill
parent parents parentUntil
siblings


2.文本节点(文档操作)
JS和Jquery节点操作比较
JS:createElement
appendChind
insertBefore
removeChind
replaceChild

Jquery文档操作
append prepend 父节点添加子节点
appendTo prependTo 子节点添加到父节点

after before 兄弟标签添加
insertAfter insertBefore

replaceWith 替换
empty 清空标签内容
remove 删除标签
clone 克隆一个新的标签

3.属性操作


js节点属性操作
arribute属性: setAttribute(name,value)
getAttribute(name)
removeAttribute()
class属性:
node.className
node.classList.add()
node.classList.remove()
node节点的值:innerText
innerHTML
css属性:
node.style.color
创建一个标签:$(‘<p>‘)


jquery属性
固有属性: prop() removeProp()
自定义属性:attr() removeAttr()
class属性:
addClass()
removeClass()
node节点的值:
html()
text()
val() 针对固有属性
css属性:
$().css(‘color‘,‘red‘)
位置: $().offset({left:0,top:0}) 偏移量
$().position()
$().scrollTop()
$().scrollLeft()
尺寸:$().height() 内容高度
$().width() 内容宽度
$().innerHeight() 加padding
$().innerWidth()
$().outerHeight() 加边框
$().outerWidth()
$().outerHeight() 加margin
4.Jquery其他
jquery动画效果:show hide toggle
slideDown slideUp slideToggle
fadeDown fadeUp fadeToggle
回调函数
jquery循环:$.each(obj,fn)
方式一: 遍历数组或字典
$.each(array,function(i,j){}) i:索引 j:元素值
$.each({key:value},function(i,j){}) i: key j:value

方式二: 遍历节点对象
$(‘elector‘).each(function(){
$(this)})
5.事件绑定
JS
事件绑定方式一:
<p onclick=func(this)>ppppp</p>
function func(self){
self self:当前操作标签 DOM对象
$(self)} $(self):当前操作标签 Jquery对象


事件绑定方式二:
var ele=document.getElementByid(‘‘)
ele.onclick=function(){
this this:当前操作标签 DOM对象
$(this) } this:当前操作标签 Jquery对象



this在全局,代指window对象

Jquery
事件绑定方式
$.bind(‘click‘,function(){})
$(‘‘).click(function(){
$(this)})
$(‘‘).on(‘click‘,[selector],function(){})


Jquery事件
页面加载: $(document).ready
事件处理:on off
事件切换:hover(func1,func2)
事件:blur
change
click
dblclick
focus
keydown
keyup
keypress
mouseover
mouseout
mouseleave
mouseenter
scroll
select
submit
unload

6.扩展方法:插件
1 $.extend({
name: function(){};
})
2 $.fn.extend({
name: function(){};
})

 

Jquery基础(二)