first jq

网址

http://jquery.cuishifeng.cn/

JQ的初体验

jq的入口函数

$(document).ready(function() {
        $("#btn1").click(function() {
            $("div").show(100);
  });

jq设置文本内容

html() text() val()

val()这个是用在 文本框的内容设置获取等

show()显示 hide() 隐藏

jq会自动地遍历

不用担心兼容问题

同一元素注册相同事件不用担心覆盖

jq动画

show() slideDown() fadeIn()

jq 1.12 版本 兼容 ie678

jq的函数 是在页面 加载完成后执行

jq的入口函数 写法

第一种

$(document).ready(function() {
        console.log("这是jq");
  })

第二种

$(function() {
        console.log("哈哈");
 })

• jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载
• js的入口函数会等待页面的加载完后曾，并且会等待图片加载我弄成才开始；

使用jq步骤

引入文件

写入口函数

功能实现

jq与DOM区别

使用js获取的元素就是js对象 dom对象

使用jq对象获取的元素就是jq对象

两者的联系

jq对象就是js对象的集合，伪数组，里面存放了一大堆的js对象

js和jq对象不能混着用 必需转换才可以

jq对象调用js对象

需要把jq对象转为js对象

DOM对象转换为js对象

花钱 就可以了 $就可以了

var cloth = document.getElementById('cloth');
$(cloth).text("哈哈");

jq转换为js对象

######第一种 $li[0] 下标

取出来 就可以 使用下标 取出来

$li[0] 就是取出来

第二种 get() 方法

$li. get(0)

$li.get(0).style.backgroundColor = "red";

jq隔行变色

获取的 li 就是 一个数组 可以循环遍历

$符号的实质

$其实就是一个函数，以后使用$ $ 记得使用小括号

//参数不同，功能不同

3种用法

1 入口函数的写法

$(function (){
    
})

2 $(domobj) 把dom对象转换成jq对象

var cloth = document.getElementById('cloth');
$(cloth).text("哈哈");

3.参数可以是字符串

$("div")  $("#btn")  $(".current")  用来找对象的
$("div ul")

jq的基本选择器

jq设置样式 css(name,value);

leg

$("#four").css("backgroundColor", "red");

并集选择器

$("#four,.green").css()

交集选择器

$(".green.yellow").css("backgroundColor", "pink");

后代选择器

$(“s1 s2”)

子代选择器

$(“s1>s2”)

#####过滤选择器 odd $(“li:even”)

$( "li" ).filter( ":even" )   
$("li:even")
两种写法

$("li:even").css("backgroundColor", "red");   过滤掉偶数
$("li:odd").css("backgroundColor", "cyan");   过滤掉奇数
$("li:lt(1)").css("fontSize", "32px");   
:first  第一个
:last 最后一个
$("li:eq(index)")  选择具体一个
gt(index)  查找索引大于某数
lt(index)  查找索引小于某数

mouseenter与mouseover的区别

• 1 mouseover 鼠标经过事件

​ mouseout鼠标离开事件

• 2 mouseenter 鼠标进入事件

​ mouseleave 鼠标离开事件

这两者的区别是 1 一个会连续触发事件 2 鼠标进入后在取子代选择器不会连续触发

所以建议使用2

children(ul) 找到所有的儿子 并且是ul

筛选选择器

$(function () {
      
      $(".wrap>ul>li").mouseenter(function () {
        
        $(this).css("opacity", "1").siblings().css("opacity", "0.4");
      });
      
      $(".wrap").mouseleave(function () {
        //让所有的li都变亮
        //$("li");
        //$(".wrap li");
        //$(".wrap>ul>li")
        
        //$(this).children().children("li");
        $(this).find('li').css("opacity", 1);
      });
  });

案例 鼠标进入一个高亮 其余暗淡

$(this).css("opacity", 1).siblings().css("opacity", 0.5);

next() 下一个兄弟

find()相当于后代选择器 查找所有子代元素

手风琴案例

#####下一个兄弟：nextElementSibling

next 相邻下一个兄弟

slideDown 向下滑动显示

slideUp 向上滑动隐藏

淘宝精品案例

 $("#center>li:eq(" + index + ")").show().siblings().hide();
 这里的li里面的eq需要插入字符串  拼接
$("#center").children("li").eq($index).show().siblings().hide();
这里的eq的是方法  eq($index)

index 获取索引