| jQuery-day011.什么是jQuery jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单 jQuery文件暴露了一个对象给window----$ 学习jquery里面的属性和方法 1.1特点1.独特的选择器 2.链式的DOM操作 3.事件绑定机制 4.出色的浏览器兼容性 5.封装完善的ajax请求 2.jQuery的选择器---[重点]匹配模式，匹配规则 语法 $('选择器')===jQuery('选择器')---true
1.基本选择器
id选择器---$('#id')
class选择器---$('.class')
标签选择器---$('标签名')
2.层级选择器
子代选择器
$('父选择器>子选择器')
后代选择器
$('父选择器 后代选择器')
兄弟选择器之下一个兄弟
$('兄弟选择器+兄弟选择器')
兄弟选择器值后面所有的兄弟
$('兄弟选择器~兄弟选择器')
3.过滤选择器
第一个
$('父选择器 子选择器:first')
最后一个
$('父选择器 子选择器:last')
第几个---索引
$('父选择器 子选择器').eq(0)---推荐
$('父选择器 子选择器:eq(1)')
除自己之外的所有同级兄弟元素
$('选择器').siblings()
除自己之外的所有同级兄弟元素
$('选择器').siblings()
除自己之外的同级选择器兄弟元素
$('选择器').siblings('选择器')3.jQuery对象与原生对象jq对象只能使用jq的方法 原生对象只能使用原生的方法 $('选择器')
document.queryselector('选择器')
相互转换
jq对象转原生对象:jq对象[0] jq对象.get(0)
原生对象转jq对象：原生对象---$(原生对象)
$(this)---jq对象
this---原生对象
4.操作class1.添加类名
jq对象.addClass('类名 类名....')
2.删除类名
jq对象.removeClass()---删除所有
jq对象.removeClass('类名')---删除指定类名
3.判断
jq对象.hasClass('类名')---判断是否含有，返回布尔值
4.切换
jq对象.toggleClass('类名')---有就删除，没有就添加 5.操作样式---[重点]1.获取
jq对象.css('样式名')
2.设置
jq对象.css('属相名','属相值')
jq对象.css({
'key1'='value1',
'key2'='value2',
...
})6.操作属性1.自定义属性
jq对象.attr('属相名')
jq对象.attr('属相名','属性值')
jq对象.attr({
'key1':'value1',
'key2':'value2',
...
})
2.标准属性
jq对象.prop('属相名')
jq对象.prop('属相名','属性值')
jq对象.prop({
'key1':'value1',
'key2':'value2',
...
})7.操作文本1.操作纯文本---text()
2.解析标签---html()
3.表单标签---val()8.入口函数1.$(function(){
js代码
})
2.$(document).ready(function(){
js代码
})
|