jQuery 基础
jQuery的介绍
库: 小而精
框架: 大而全
核心:write less do more
jQuery 入口函数
//入口函数 返回的是jquery对象$(document).ready(function(){ // 文档加载 时 alert(1);});$(window).ready(function(){ // 窗口加载 alert(2);});$(function(){ // 默认 document alert(1);}); // 自执行函数(function () { alert(11111)})();console.log($);console.log(jQuery);console.log($('div')); 选择器
基本选择器
- id选择器
- 类选择器
- 标签选择器
- 子代
- 后代
- 组合
- 交集
- 通配符
- 兄弟 + ~
基本过滤选择器 + 属性选择器
$('li:eq(index)') // 获取一个标签$('li:gt(index)') // 大于 index 的 元素li:lt(index) // 小于 index 的元素li:odd // 奇数li:even // 偶数li:first // 第一个li:last // 最后一个// 属性选择器input[type='text'] 筛选的方法***
- [x] $('li').eq(index)
- [x] find(selector) 后代
- [x] children() 亲儿子
- [x] parent() 亲爹
- [x] siblings() 选取兄弟(除了它自己 )
jQuery和js对象相互转换**
//js==>jquery$(js对象)jquery对象 => js对象$('li')[index];$('li').get(index); 样式设置
// 两个参数为设置值$('#box').css("color", "red")// 一个参数为获取值$('#box').css("color") - jquery的选择器(获取DOM对象 注意 它获取的是jQuery对象,而不是jsDOM对象) 标签选择器
// 选择器$(function () { $("div")[0].style.backgroundColor = "red"; var op = $("p"); console.log(op); var acti = $(); op.click(function () { // 点击的对象为 DOM js 对象 需转换为 jQuery 对象 $(this) console.log(this.innerText); // 获取对象的值 console.log($(this).text()); // 获取对象的值 // 替换对象的值 // $(this).text("11111111111") // 返回一个 jQuery 对象 console.log($(this).text("1111111")) })}) 筛选选择器
// 查找的是后代 (子子孙孙)console.log( $('ul').find('a'));//查找的是亲儿子 如果指定亲儿子,就在children('选择器'),想获取所有的亲儿子 不用写参数console.log( $('ul').children());//查找的只有亲爸console.log( $('a').parent());//$(`li:eq(${index})`)console.log( $('ul li').eq());// 选取兄弟元素 除了自己console.log( $('span').siblings()); siblings
//获取索引let i = $(this).index()//返回了jquery对象//链式编程$(this).css('backgroundColor','red').siblings('button').css('backgroundColor','#666');$('div').eq(i).addClass('active').siblings('div').removeClass('active'); $('ul li').click(function () {$(this).find('a').css('color','red').parent().siblings('li').find('a').css('color','blue'); }) 对标签属性的操作
attr() // 同 .css() 单个参数表示查询该属性 两个参数表示 设置该属性removeattr() // 移除属性 可移除多个 用空格 分开
对象属性操作
prop() // removeprop() // 单个移除属性
类的操作
addclass() // 设置类名 可设置多个removeclass() // 移除类名 不会影响之前的 类名taggleckass() // 单个操作 添加 和移除
值的操作
text() // 设置文本 innerText()html() // 设置文本及标签 innerHtml()val() // 设置 value 值
文档的操作
// 后置插入$(".div").append(子标签); 子标签.appendTo(父标签);// 前置插入$(".div").prepend(字标签); 子标签.propenTo(父标签);// 兄弟插入 后插入目标兄弟.after(要插入的兄弟标签) 要插入的兄弟标签.inertAfter(目标兄弟)// 兄弟插入 前插入目标兄弟.before(要插入的兄弟) 要插入的兄弟.inertBefore(目标兄弟)// 删除$('seletor').remove(); // 删除整个标签 事件也删除$('seletor').detach(); // 删除整个标签 保留事件// 清空$('seletor').empty(); // 清空$('seletor').html(''); // 清空$('seletor').text(""); // 清空// 替换$('seletor').replacewith(); $('seletor').replaceall();