jquery链接

jQuery

jquery选择器选择到的都是伪数组,伪数组有自己的操作

jquery伪数组不能使用原生js的dom操作，反之一样

jquery使用原生js的dom操作(

取下标或者遍历):

$("li")[0].innerText;
$("li").get(0).innerText;

js使用原生jquery操作(类似于dom的方法,dom无法使用):

var li = document.querySelector("li");
$(li).text();

jquery选择器

$(“这里放css选择器”)，一个jquery选择器就制作好了

$一般是加在jquery变量之前的，只是表示这是一个jquery变量

$("#li");//id选择器
var $six = $('.six')//类名选择器
// 标签选择器
var $lis = $('li')
// 通配选择器
var _ = $('*')
//没什么用的变量取名为"_"

//属性选择器
$seven = $("[name=''seven]")

//伪类选择器
$first = $("li:first-child")

//选择为空的li
$empty = $("li:empty");

jquery筛选器（像是另类的选择器）

粗暴型：

$first =$("li:first");//第一个li
$last = $("li:last");//最后一个li
$even = $("li:even");//选下标为偶数的
$odd = $("li:odd");//下标为奇数的

方法：

获取指定下标
$("li:eq(4)");//下标等于4的
$("li:gt(4)");//下标大于4的
$("li:lt(4)");//下标小于4的

表单元素选择器

代码太长不想看，跳过

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="./js/jquery-3.5.1.js"></script>
</head>
<body>
<form action="">
    <input type="text">
    <input type="password">
    <input type="file">
    <input type="radio">
    <input type="checkbox">
    <select name="" id="">
        <option value="">山东省</option>
        <option value="">安徽省</option>
    </select>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <input type="button" value="按钮">
    <input type="submit">
    <input type="image" src="./images/1.png">
    <input type="reset">
    <input type="hidden" name="hhh" value='333'>
</form>
</body>
<script type="text/javascript">
// console.log( $(':input') );
// console.log( $(':text') );
console.log( $(':hidden') ); // 选择不显示的标签
</script>
</html>

总结：

样子和筛选器差不多，
$(":input");//选input
$(":text");//选type = text
$(":hidden");//选择不显示的标签，包含HTML等，不止表单范围

表单对象选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="./js/jquery-3.5.1.js"></script>
</head>
<body>
    <form action="">
        <select name="province">
            <option value="0">请选择省份</option>
            <option value="1">安徽省</option>
            <option value="2" selected>河南省</option>
            <option value="3">河北省</option>
        </select>

        <input type="checkbox">足球
        <input checked type="checkbox">美容
        <input type="checkbox">篮球
        <input type="checkbox">医生


        <input type="submit" disabled>
        <input type="submit">
    </form>
</body>
<script type="text/javascript">
// 选中被选中的下拉框选项 - option:selected
console.log( $('[name="province"]>option:selected') );

// 选择到被选中的复选框    复选框:checked
console.log( $('input[type="checkbox"]:checked') );

// 选择被禁用的表单元素
console.log( $('[type="submit"]:disabled') );

// 选择可用的表单元素
console.log( $('[type="submit"]:enabled') );
</script>
</html>

总结

$("input[name='province']>option:selected");//被选的下拉框被选中

$("input[type='checkbox']:checked");//被选中的复选框

$("input[type='submit']:disabled")//被禁用的表单元素

$("input[type='submit']:enabled");//可用的表单元素

筛选器方法（类似节点操作）

var $ul = $("ul");
var $lis = $ul.children();//选所有的子元素




var $first = $lis.first();//li的第一个			（不想背，为什么不$lis.get(0)？瞬间感觉鸡肋）

var $last = $lis.last();//li最后一个

var $prev =$last.prev();//$last的上一个

var $next = $first.next();//$first的下一个



var $siblings = $next.siblings();//选择所有的兄弟（不包含自己的）

var $prevall =$prev.prevAll();//前面的所有兄弟

var $nextAll = $next.nextAll();//后面的所有兄弟




var parent = $nextAll.parent()//选择所有的父元素
var parents = $first.parents()//从爸爸选到祖宗
var find = $lis.find(".li");//所有的后代（儿子，孙子，等等）里面找
var eq = $lis.eq(4);//选下标为4的

jquery事件(事件绑定方式)

on去掉，把函数变成回调函数（作为形参），事件源改为伪数组就完工

jquery版事件的好处：整个伪数组内的元素都绑定了事件

下面就是所有的li都绑定了点击事件：

$("li").click(function(){
    console.log("jquery版点击事件");
    this.style.background ="#ff0";
})

鼠标的移入移出方法

针对鼠标的移入移出：mouseover();mouseout();mouseenter();mouseleave();

你收到了jQuery的礼包:hover方法