jquery

养狐狸的猫呀

于 2020-09-22 15:07:39 发布

阅读量142

点赞数

分类专栏： jq 文章标签： jquery

本文链接：https://blog.csdn.net/auroraDiary/article/details/108732710

版权

jq 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery

1、jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程。轻量级的"写的少，做的多"的JavaScript库。基础语法： $(selector).action()

2、jQuery选择器：

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	class=“intro” 的所有元素
.class,.class	$(".intro,.demo")	class 为 “intro” 或 “demo” 的所有元素
element	$(“p”)	所有元素
el1,el2,el3	$(“h1,div,p”)	所有元素

:first	$(“p:first”)	第一个元素
:last	$(“p:last”)	最后一个元素
:even	$(“tr:even”)	所有偶数
:odd	$(“tr:odd”)	所有奇数

:first-child	$(“p:first-child”)	属于其父元素的第一个子元素的所有元素
:first-of-type	$(“p:first-of-type”)	属于其父元素的第一个元素的所有元素
:last-child	$(“p:last-child”)	属于其父元素的最后一个子元素的所有元素
:last-of-type	$(“p:last-of-type”)	属于其父元素的最后一个元素的所有元素
:nth-child(n)	$(“p:nth-child(2)”)	属于其父元素的第二个子元素的所有元素
:nth-last-child(n)	$(“p:nth-last-child(2)”)	属于其父元素的第二个子元素的所有元素，从最后一个子元素开始计数
:nth-of-type(n)	$(“p:nth-of-type(2)”)	属于其父元素的第二个元素的所有元素
:nth-last-of-type(n)	$(“p:nth-last-of-type(2)”)	属于其父元素的第二个元素的所有元素，从最后一个子元素开始计数
:only-child	$(“p:only-child”)	属于其父元素的唯一子元素的所有元素
:only-of-type	$(“p:only-of-type”)	属于其父元素的特定类型的唯一子元素的所有元素

parent > child	$(“div > p”)	元素的直接子元素的所有元素
parent descendant	$(“div p”)	元素的后代的所有元素
element + next	$(“div + p”)	每个元素相邻的下一个元素
element ~ siblings	$(“div ~ p”)	元素同级的所有元素

:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 值从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列举 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列举 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的输入元素

:header	$(":header")	所有标题元素
:animated	$(":animated")	所有动画元素
:focus	$(":focus")	当前具有焦点的元素
:contains(text)	$(":contains(‘Hello’)")	所有包含文本 “Hello” 的元素
:has(selector)	$(“div:has§”)	所有包含有元素在其内的元素
:empty	$(":empty")	所有空元素
:parent	$(":parent")	匹配所有含有子元素或者文本的父元素。
:hidden	$(“p:hidden”)	所有隐藏的元素
:visible	$(“table:visible”)	所有可见的表格
:root	$(":root")	文档的根元素
:lang(language)	$(“p:lang(de)”)	所有 lang 属性值为 “de” 的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href=‘default.htm’]")	所有带有 href 属性且值等于 “default.htm” 的元素
[attribute!=value]	$("[href!=‘default.htm’]")	所有带有 href 属性且值不等于 “default.htm” 的元素
[attribute$=value]	$(" [h r e f$ =’.jpg’]")	所有带有 href 属性且值以 “.jpg” 结尾的元素
[attribute\|=value]	$("[title\|=‘Tomorrow’]")	所有带有 title 属性且值等于 ‘Tomorrow’ 或者以 ‘Tomorrow’ 后跟连接符作为开头的字符串
[attribute^=value]	$("[title^=‘Tom’]")	所有带有 title 属性且值以 “Tom” 开头的元素
[attribute~=value]	$("[title~=‘hello’]")	所有带有 title 属性且值包含单词 “hello” 的元素
[attribute=value*]	$("[title*=‘hello’]")	所有带有 title 属性且值包含字符串 “hello” 的元素
[name=value][name2=value2]	$(" i n p u t [i d] [n a m e$ =‘man’]" )	带有 id 属性，并且 name 属性以 man 结尾的输入框

:input	$(":input")	所有 input 元素
:text	$(":text")	所有带有 type=“text” 的 input 元素
:password	$(":password")	所有带有 type=“password” 的 input 元素
:radio	$(":radio")	所有带有 type=“radio” 的 input 元素
:checkbox	$(":checkbox")	所有带有 type=“checkbox” 的 input 元素
:submit	$(":submit")	所有带有 type=“submit” 的 input 元素
:reset	$(":reset")	所有带有 type=“reset” 的 input 元素
:button	$(":button")	所有带有 type=“button” 的 input 元素
:image	$(":image")	所有带有 type=“image” 的 input 元素
:file	$(":file")	所有带有 type=“file” 的 input 元素
:enabled	$(":enabled")	所有启用的元素
:disabled	$(":disabled")	所有禁用的元素
:selected	$(":selected")	所有选定的下拉列表元素
:checked	$(":checked")	所有选中的复选框选项
.selector	$(selector).selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器
:target	$( “p:target” )	选择器将选中ID和URI中一个格式化的标识符相匹配的元素

元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

层次选择器

 $("#id>.classname ")    //子元素选择器
$("#id .classname ")    //后代元素选择器
$("#id + .classname ")    //紧邻下一个元素选择器
$("#id ~ .classname ")    //兄弟元素选择器

过滤选择器

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素

可见性过滤选择器

$("li:hidden")       //匹配所有不可见元素，或type为hidden的元素
$("li:visible")      //匹配所有可见元素

属性过滤选择器

$("div[id]")        //所有含有 id 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='qq']")        // id属性值以qq开头的div 元素
$("div[id$='zz']")        // id属性值以zz结尾的div 元素
$("div[id*='bb']")        // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素

状态过滤选择器

$("input:enabled")    // 匹配可用的 input
$("input:disabled")   // 匹配不可用的 input
$("input:checked")    // 匹配选中的 input
$("option:selected")  // 匹配选中的 option

表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

3、jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

4、jQuery 事件

4.1、jQuery 是为事件处理特别设计的。页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：在元素上移动鼠标、选取单选按钮、点击元素在事件中经常使用术语"触发"（或"激发"）例如： “按下按键时触发 keypress 事件”。

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

4.2、jQuery事件语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。页面中指定一个点击事件：

$("p").click();
//定义什么时间触发事件。可以通过一个事件函数实现：
$("p").click(function(){    // 动作触发后执行的代码!! });

$(document).ready()：文档完全加载完后执行函数。

click() ：方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

$("p").click(function(){  $(this).hide(); });

dblclick()：当双击元素时，会发生 dblclick 事件。触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){  $(this).hide(); });

mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){    alert('您的鼠标移到了 id="p1" 的元素上!'); });

mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){    alert("再见，您的鼠标离开了该段落。"); });

mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或规定当发mousedown 事件时运行的函数：

$("#p1").mousedown(function(){    alert("鼠标在该段落上按下！"); });

mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){    alert("鼠标在段落上松开。"); });

hover()：用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(    function(){        alert("你进入了 p1!");    },    function(){        alert("拜拜! 现在你离开了 p1!");    } );

focus()：当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){  $(this).css("background-color","#cccccc"); });

blur()：当元素失去焦点时，发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){  $(this).css("background-color","#ffffff"); });

5、jQuery的使用：

网页中添加jQuery开发包。（jquery.com）

<script src="jquery-1.10.2.min.js"></script>

HTML 元素选取

document.querySelector("选择器").action();

HTML 元素操作

CSS 操作

    <script>
       $(function (){
           //设置背景颜色
          $("#div1").css("backgroundColor","red");
          //获取背景颜色
          let color= $("#div1").css("backgroundColor");
          alert(color);
           //一次性设置多个属性(可以使用json格式数据设定多个属性)
           $("#div1").css({
               'width':'100px',
               'height':'100px',
               'border':'1px solid black'
           });
            
            //设置多个class为div2的段落，text相当于js的innerText,html相当于js的innerHtml
           $(".div2").text("div2的class选择器操作！");
           $(".div2").html(`<a href="#">div2的class选择器操作！<a/>`);
           //获取标签内容
           alert("获取.div2的内容："+$(".div2").html());
        
        	//设置和获取input输入框的值
            $("input").val("hello，input");
            $("input").val();
       });
    </script>

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

val() - 设置或返回表单字段的值

attr()、prop()- 获取属性（例如获取href）。

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

HTML 事件函数
JavaScript 特效和动画

HTML DOM 遍历和修改

//遍历对象和数组
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});

//$.trim(str) 去掉字符串起始和结尾的空格 
//$.makeArray(obj)将类数组对象转换为数组对象
//$.inArray(value,array)确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )

AJAX（异步操作：ajax、vue的axious）：对页面的局部刷新，js的ajax非常复杂

jquery的Ajax：

//1、get请求
$.get(url,data,(res)=>{   },返回参数类型);
//2、post请求
$.post(url,data,(res)=>{   },返回参数类型);
//3、通用的写法
$.ajax({
   url:"",	//请求路径
   type:"",	//请求方式post or get 默认get方式
   data:{	},	//请求数据:可以使用json格式
   success:()=>{	},	//请求成功后回调函数
   dataType:"",	//请求成功后回调函数返回值类型（text or json）默认text
   error:()=>{	}	//请求失败执行函数
});

get(url,data,(res)=>{ },返回参数类型);
//2、post请求
$.post(url,data,(res)=>{ },返回参数类型);
//3、通用的写法
$.ajax({
url:"", //请求路径
type:"", //请求方式post or get 默认get方式
data:{ }, //请求数据:可以使用json格式
success:()=>{ }, //请求成功后回调函数
dataType:"", //请求成功后回调函数返回值类型（text or json）默认text
error:()=>{ } //请求失败执行函数
});




- Utilities

养狐狸的猫呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery

JQuery1、jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程。轻量级的"写的少，做的多"的JavaScript库。基础语法： $(selector).action()2、jQuery选择器：选择器实例选取*$("*")所有元素#id$("#lastname")id=“lastname” 的元素.class$(".intro")class=“intro” 的所有元素.class,.class$(".intr
复制链接

扫一扫

专栏目录