jquery(接在JavaScript之后)

大家好，我是讯享网，很高兴认识大家。

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方法