1 . jQuery选择器
(1)语法形式
<ul class='ul1' id='ulid' name='name1'>
<li>我是第1个</li>
<li>我是第2个</li>
<li>我是第3个</li>
</ul>
//一定要引入jQery文件
两种语法形式
console.log(${'ul>li'}) //ul下面所有的li的伪数组
console.log(jQuery('ul>li'))
//获取标签
console.log(${'ul'}) //ul的伪数组
console.log(${'.ul1'}) //class选择
console.log(${'#ulid'}) //id选择
console.log(${'[" name='name1'"]'}) //name属性
//结构选择器
console.log(${'ul>li:first'}) // ul li中最后一个li
console.log(${'ul>li:last'}) // ul li中最后一个li
console.log($('ul>li:eq(1)')); // ul li中索引下标为1的li
console.log($('ul>li:odd')); // ul li 为偶数的数组
console.log($('ul>li:even')); // ul li 为基数的数组2 . jQuery筛选器
1(语法结构)
<ul>
<li>我是第1个</li>
<li>我是第2个</li>
<li>我是第3个</li>
<li>我是第4个</li>
</ul>
//插入jQuery js文件
console.log($('ul>li').eq(1)) //获取索引下标为1的 ul中的 li
console.log($('ul>li').eq(1).prev()) //获取当前标签上一个兄弟标签
console.log($('ul>li').eq(1).prevAll()) //获取当前标签上面所有的兄弟标签
console.log($('ul>li').eq(1).next()) //获取下一个兄弟标签
console.log($('ul>li').eq(1).nextAll()) //获取下所有兄弟标签
console.log($('ul>li').eq(1).sibings()) //获取当前所有的兄弟标签 自己除外
console.log($('ul>li').eq(1).parent()) //获取当前标签的父级标签
console.log($('ul>li').eq(1).parents()) //获取当前标签的父级标签
console.log($('ul>li').eq(1).index()) //获取当前标签的索引下标
console.log($('ul').find('li')); //在ul中查找li标签
$('ul>li')
.css('color','red') //ul li 中的颜色
.click(function(){console.log(111)}) //添加点击事件3. jQuery属性的操作
//设置属性:
<div class='box', name='name1',id='id1' index= div4>我是一个div<div>
$('div').attr('id'.'aaa') //设置id 属性为aaa
$('div').removeAttr('id') //删除id属性
//获取属性值
let res =$('div').attr('index')
console.log(res) //获取div的属性值
$('input').prop('checked', true); 设置布尔属性的属性值4 . 隐士迭代
//隐式迭代 jQuery 会自动循环遍历每一个绑定的标签 设定属性样式 或者 绑定事件
$('ul>li').css('backgroundColor', 'red') //可以直接给所有的 li 设置样式5 jquery的循环
<li></li>
<li></li>
<li></li>
// 索引下标 数值
$('li').each(function(key.item){
})
jQuery中点击事件的this指向
jQuery程序中 事件处理函数
this指向 是 绑定事件的 事件源
但是 this 是 js的标签对象
必须要 $(this) 转化成 jQuery伪数组 才能支持 jQuery操作
6 . jquery内容操作
//向这个div 插入html 内容 支持标签语法
$('div').html('<a href=http://www.baidu.com>我是写入的h1标签</a>');
//向这个div 插入text 内容 不支持标签语法
$('div').text('<a href=http://www.baidu.com>我是写入的h1标签</a>');
7 . css的操作
<div name="div1"></div>
//设置一个参数
$('[name="div1"]').css('width','200')
//设置多个参数
$('[name="div1"]').css({width:200.height:200,backgroundClolr:"red"})
//获取参数
$('[name="div1"]').css('width')8.class 属性的操作
// class属性值操作
$().addClass();
// 新增
$().removeClass();
// 删除
$().toggleClass();
// 切换
$().hasClass();
// 判断有没有
8.获取input里面的值
let res = $(input).val()9利用jquery 面向对象 选项卡
<div class="box"></div>
<script src="../../../jQuery.js"></script>
<!-- 面向对象 -->
<script>
// 创建一个 数组 默认 获取的数据数值
const arr = [
{ id: 1, ulLi: '精选', olLi: '精选内容' },
{ id: 2, ulLi: '美食', olLi: '美食内容' },
{ id: 3, ulLi: '个护', olLi: '个护内容' },
{ id: 4, ulLi: '百货', olLi: '百货内容' },
{ id: 5, ulLi: '预告', olLi: '预告内容' },
];
// 获取标签对象
const oBox = document.querySelector('.box');
// 定义一个 构造函数 创建 实例化对象
class CreateTabObj {
// 构造器 定义 存储 数据
// 参数1 标签对象 参数2 存储数据的数组
constructor(element, array) {
// 定义属性存储输入的实参数据
this.ele = element;
this.arr = array;
// 定义属性 存储 数据
this.oUlLis;
this.oOlLis;
}
// 函数方法1 动态生成页面
setPage() {
// 创建两个标签对象节点
const oUl = document.createElement('ul');
const oOl = document.createElement('ol');
// 定义变量 存储 ul>li字符串 ol>li字符串
let ulStr = '';
let olStr = '';
// 循环遍历数组
this.arr.forEach(function (item, key) {
ulStr += key === 0 ? `<li class="active" name="ulli" index="${key}">${item.ulLi}</li>` : `<li name="ulli" index="${key}">${item.ulLi}</li>`;
olStr += key === 0 ? `<li class="active" name="olli">${item.olLi}</li>` : `<li name="olli">${item.olLi}</li>`;
})
// 将字符串作为内容 移入 ul ol 标签
oUl.innerHTML = ulStr;
oOl.innerHTML = olStr;
// 将 创建的两个标签节点 写入 div标签对象
oBox.appendChild(oUl);
oBox.appendChild(oOl);
// 获取 ul,ol 标签中的li标签
this.oUlLis = oUl.querySelectorAll('li');
this.oOlLis = oOl.querySelectorAll('li');
}
// 函数方法2 添加 点击或者鼠标经过事件
setEvent() {
// 通过 jQuery来设定鼠标经过事件
$('ul>li').mouseover(function () {
$(this) // this是点击的ul>li标签 $(this) 转化为jQuery伪数组
.addClass('active') // 给点击的ul>li标签 添加 class,active
.siblings() // 找 点击的ul>li标签的 所有兄弟li标签
.removeClass('active') // 删除 class,active
.parent() // ul>li 的直接父级标签 也就是 ul标签
.next() // 找 ul标签的下一个标签 也就是 ol标签
.find('li') // 查找 ol标签中的所有 li标签
.removeClass('active') // 删除 所有 ol>li标签 class,active
.eq($(this).index()) // 按照索引下标获取ol>li 索引下标和点击的ul>li索引下标是相同的
.addClass('active'); // 索引下标和点击的ul>li 相同的ol>li 添加 class,active
})
}
}
// 调用执行 构造函数 生成 实例化对象
const objTab = new CreateTabObj(oBox, arr);
console.log(objTab);
// 调用函数方法 执行 动态写入操作
objTab.setPage();
// 调用函数方法 添加事件
objTab.setEvent();10 元素的占位
//内容的高度和宽度
console.log($('div').height());
console.log($('div').width());
// 内容+padding
console.log($('div').innerHeight());
console.log($('div').innerWidth());
//内容+padding+border
console.log($('div').outerHeight());
console.log($('div').outerWidth());
//内容+padding+border + margin
console.log($('div').outerHeight(true));
console.log($('div').outerWidth(true));
//返回的结果得出一个对象 { top:0px , left:0px }
console.log($('div').offset());
//标签就算是display:none ; 也可以获取标签的占位
/* $().height() $().width()
宽度高度
$().innerHeight() $().innerWidth()
宽度高度 + padding
$().outerHeight() $().outerWidth()
宽度高度 + padding + border
$().outerHeight(true) $().outerWidth(true)
宽度高度 + padding + border + margin
*/11.利用jquery 事件的绑定
//语法形式1
$('div').click( function(){ console.log(111) } );
//语法形式2
$('div').on( 'click' , 'div' , function(){
console.log('您点击的是div标签');
})
/*事件绑定
1, jQuery伪数组支持的事件类型
$().事件类型(function(){ 事件处理函数 })
2, jQuery伪数组不支持的事件类型 / 所有的事件类型
$().on( 事件类型 , 事件处理函数 )
$().on( 事件类型 , '条件' , 事件处理函数 )
在标签中 按照条件 查询符合的标签 添加事件
执行效果 类似于 事件委托
总结:
如果 一个标签事件委托 用那个都行
如果 多个标签添加事件委托 推荐使用 js语法
如果 事件委托需要给标签本身添加事件 只能使用js语法*/12.事件的删除
事件的删除
$().off() 删除标签绑定的所有类型的所有事件
$().off(事件类型) 删除标签绑定的指定类型的所有事件
$().off(事件类型 , 事件处理函数)
删除标签绑定的指定类型的指定事件
只能删除 绑定的函数名称
不能删除 匿名函数
13 特殊事件
//fun1 是鼠标移入的程序 fun2是鼠标移出的程序
$('div').hover(fun1,fun2) // 效果跟 mouseenter 和mouseleave 里面不触发
// mouseover mouseout 里面有标签 多次触发
$('div').one('click',fun1) /绑定的函数只会触发一次
$('div').trigger('click') //将div 上绑定的所有的点击事件都触发一遍
$('window').ready.(fun1) //html加载完毕
$(function(){}) //简写
// js load heml和标签加载完毕才会显示出来
window.addEvenlistener('loat',function(){console.log('我是js的load事件执行的程序')})
14. 事件的阻止
<a herf=htt[://www.baidu.com>百度</a>
$('a').click(function(e){
comnsole.log（1111） // 点击a标签的的时候会跳转百度
e.preventDefault() // 阻止默认时间的发生
return flase //阻止一切事物的打发生})
4617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
