day58jQuery

jQuery对象

jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也没不能使用jQuery里的方法。、

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

引入jquery（两种）

层级选择器：

子代选择器（）

后面所有的input兄弟

毗邻选择器后面的一个兄弟

基本筛选器：

写在双引号内的

选出被选中的

jQuery转换成DOM对象

DOM转换成jQuery对象

筛选器：

css用法

操作除了id=all的其他标签

操作具体的样式

一种格式用逗号分割

多种格式用字典格式

位置：

offset()相对窗口的偏移position（）相对父标签的偏移

（回忆position）

position:relative（相对定位）标签添加此属性，会记录此标签的原始位置。

position:absolute（绝对定位）标签会按照上面标签的原始位置做定位，多个标签可以在同一个方位，例如照片可以无限的叠加。

创建一个返回顶部按钮（.b1{position:fixted,left:10px}）

window.scrollTop(0) 让窗口滚动到最上方

对滚轮的移动做监控，每次滚动时都会触发函数

.height()是本来的大小

.innerHeight()是本身加上padding

.outerHeight()本身+padding+border(包皮)

文本操作示例：

取值是取得所有覆盖到标签的文本，赋值是先清空后赋值

取值只取得第一个文本，赋值是所有的都修改

复习 multiple多选框

一般都是设置一个checkbox 例如：7天内免登录

若被勾选：取值直接用$(:checked)

圆框

获取自定义属性 .attr(“自定义属性名”)

获取自带属性 .attr(“src”)

用prop去判断选定的值

后台设置勾选

======================================================================================

DOM方法改变后台勾选：

　 DOM标签.checked=false（改勾选）

　　 DOM标签 this.checked（取到勾选状态）

=======================================================================================

时间绑定（鼠标点击绑定）

文档处理：

往后添加

each()方法

把一个jQuery对象进行拆分成每一个对应的DOM标签，对这些DOM标签执行同一个函数。

文档处理：

父级jQuery对象邀请子级标签加入进来（后面可以写成jQuery的形式，DOM标签的形式，字符串也行）

子级jQuery对象添加到父级

大范围对象添加小范围就用.append()

小范围对象添加大范围就用.appendTo()

往前添加

添加到某个节点后面

放某个节点的前面

.remove()是删除找到的jQuery对象的所有元素

.empty()是清空匹配到对象中所有的子节点

把匹配到的所有li标签都装换成新创建的P标签

我自己创建的li标签去代替文件中所有的p标签

克隆

给a标签一个点击事件，触发执行克隆本身

把克隆的自己插入到本标签的后面，clone(true)就是事件一起被克隆

事件：

jQuery对象.on("事件"，function(){ ...})

1、点击2、鼠标光标触摸3、聚焦消失4、聚焦5、动态变化时6、按键弹起时

keyup事件就是做联想筛选

对子哈特：（灰白内容的效果，常用用户注册的提示）

input标签的 placeholder的值就是对子哈特的值

设置一个聚焦事件，一旦聚焦对子哈特消失

attr复习，自定义属性

把重复的对象，应该找变量存起来

事件委托（是通过事件冒泡的原理，利用父标签去触发子标签的事件）

用事件委托对于后来添加的标签也可以实现事件的控制

找到父级的jQuery对象，对父级对象进行事件绑定，只对.delete的进行绑定

<script>
    $(".left_navi").on("mouseover",".navi1",function () {     #mouseover （鼠标覆盖）与 mouseout（鼠标离开） 
        $(this).children().eq(1).slideDown()
    });
{#    $(".navi1").hover(function () {#}     
{#        $(this).children().eq(1).slideDown()#}
{#    })#}
</script>