jQuery 笔记

最新推荐文章于 2022-08-12 10:05:14 发布

缘来是你windy

最新推荐文章于 2022-08-12 10:05:14 发布

阅读量352

点赞数

本文链接：https://blog.csdn.net/qq_18072961/article/details/106278395

版权

1.jQuery 语法实例

$(this).hide()

演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。

$("p").hide()

演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。

$("#test").hide()

演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。

2.基础语法是：$(selector).action()

美元符号定义 jQuery

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

3.文档就绪函数

$(document).ready(function(){

});

4.$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

5.把所有 p 元素的背景颜色更改为红色：$("p").css("background-color","red")。

6.下面是 jQuery 中事件方法的一些例子：

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件。

7.DOM = Document Object Model（文档对象模型）

8. attr() 方法用于获取属性值。

eg：$("button").click(function(){

alert($("#w3s").attr("href"));

});

9. append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

10.

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

$("#div1").remove();

11.jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

12.filter是一个过滤器

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

eg：$(document).ready(function(){

$("p").filter(".intro");

});

13.jQuery load() 方法是简单但强大的 AJAX 方法；

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象。

$("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功！");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

14.Get与Post的区别

Get：

能够被缓存；

参数保存在浏览器历史上；

数据在 URL 中对所有人都是可见的。

GET 请求有长度限制

GET 请求不应在处理敏感数据时使用

Post：

POST 请求不会被缓存

POST 请求不会保留在浏览器历史记录中

POST 不能被收藏为书签

POST 请求对数据长度没有要求

数据不会显示在 URL 中；

Post对于数据类型没有限制。

15.<head>

</head> //把jQuery添加到网页之中

16.<head>

/jquery/1.4.0/jquery.min.js"></script>

</head> //使用谷歌的jQuery库

<head>

/jquery-1.4.min.js"></script>

</head> //使用微软的jQuery库

17.基础语法是：$(selector).action()

美元符号定义 jQuery

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

18.$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

19.$(document).ready(function(){

--- jQuery functions go here ----

}); //所有 jQuery 函数位于一个 document ready 函数中

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

20.

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

21.

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

22.$("p").css("background-color","red"); //把所有 p 元素的背景颜色更改为红色

23.$(this) 当前 HTML 元素

$("p") 所有 <p> 元素

$("p.intro") 所有 class="intro" 的 <p> 元素

$(".intro") 所有 class="intro" 的元素

$("#intro") id="intro" 的元素

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

24.由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中

把所有事件处理函数置于文档就绪事件处理器中

把 jQuery 代码置于单独的 .js 文件中

如果存在名称冲突，则重命名 jQuery 库

25.jQuery事件

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

26.<head>

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

</script>

</head>

<body>

<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>

</body>

27.$("button").click(function(){

$("p").hide(1000);

}); //隐藏p元素

28.$("button").click(function(){

$("p").toggle();

}); //显示被隐藏的元素，并隐藏已显示的元素

29.<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeIn(); //用于淡入已隐藏的元素

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

</script>

30.$("button").click(function(){

$("#div1").fadeOut();

$("#div2").fadeOut("slow"); //用于淡出可见元素

$("#div3").fadeOut(3000);

});

31.$("button").click(function(){

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

}); //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

// 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

//如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

32.$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

}); // fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

33.<head>

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow"); //滑动渐变

});

</script>

</head>

<body>

<p>W3School - 领先的 Web 技术教程站点</p>

<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

</div>

<p class="flip">请点击这里</p>

</body>

jQuery 拥有以下滑动方法：

slideDown()

slideUp()

slideToggle()

34.jQuery animate() 方法用于创建自定义动画。

<head>

</script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({left:'250px'}); //它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止

});

</script>

</head>

<body>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

</div>

</body>

35.<script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({ //几个属性

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

</script>

36.<script>

$(document).ready(function(){

$("button").click(function(){

$("div").animate({

height:'toggle' //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

});

</script>

37.<script>

$(document).ready(function(){

$("button").click(function(){

var div=$("div");

div.animate({height:'300px',opacity:'0.4'},"slow"); //可以用数组进行渐变的效果

div.animate({width:'300px',opacity:'0.8'},"slow");

div.animate({height:'100px',opacity:'0.4'},"slow");

div.animate({width:'100px',opacity:'0.8'},"slow");

});

</script>

38.jQuery stop() 方法用于在动画或效果完成前对它们进行停止

$(document).ready(function(){

$("#start").click(function(){

$("div").animate({left:'100px'},5000);

$("div").animate({fontSize:'3em'},5000);

});

$("#stop").click(function(){

$("div").stop();

});

$("#stop2").click(function(){

$("div").stop(true);

});

$("#stop3").click(function(){

$("div").stop(true,true);

});

</script>

</head>

<body>

<button id="stop3">停止但要完成</button>

<p><b>"开始"</b> 按钮会启动动画。</p>

<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>

<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>

<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

39.$("#p1").css("color","red").slideUp(2000).slideDown(2000); //"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动

40.<script>

$(document).ready(function(){

$("button").click(function(){

alert("Value: " + $("#test").val()); //val() 方法获得输入字段的值

});

</script>

</head>

<body>

</body>

41.<script>

$(document).ready(function(){

$("button").click(function(){

alert($("#w3s").attr("href")); //attr() 方法用于获取属性值

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

</body>

42.$(document).ready(function(){

$("#btn1").click(function(){

$("#test1").text(function(i,origText){

return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

});

43. append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

function appendText()

{

var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 //三种方法追加Text.

var txt3=document.createElement("p");

txt3.innerHTML="Text."; // 通过 DOM 来创建文本

$("body").append(txt1,txt2,txt3); // 追加新元素

}

</script>

</head>

<body>

<p>This is a paragraph.</p>

44.如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素） //jQuery remove() 方法删除被选元素及其子元素。

empty() - 从被选元素中删除子元素 //jQuery empty() 方法删除被选元素的子元素。

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

$(document).ready(function(){

$("button").click(function(){

$("p").remove(".italic");

});

</script>

</head>

<body>

<p>This is a paragraph in the div.</p>

<p class="italic"><i>This is another paragraph in the div.</i></p>

<button>删除 class="italic" 的所有 p 元素</button>

46.jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

47.<script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").addClass("important blue");

});

</script>

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

</head>

<body>

<div id="div1">这是一些文本。</div>

<div id="div2">这是一些文本。</div>

<br>

<button>向第一个 div 元素添加类</button>

48.<script>

$(document).ready(function(){

$("button").click(function(){

$("h1,h2,p").toggleClass("blue"); //对文本进行添加blue和删除blue的作用

});

</script>

49.$("p").css({"background-color":"yellow","font-size":"200%"});

50.//显示宽度和长度

$(document).ready(function(){

$("button").click(function(){

var txt="";

txt+="Width of div: " + $("#div1").width() + "</br>";

txt+="Height of div: " + $("#div1").height();

$("#div1").html(txt);

});

</script>

51.有许多有用的方法让我们在 DOM 树进行水平遍历：

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

52.$.trim() 函数用于去除字符串两端的空白字符。

53.$.merge() 函数用于合并两个数组内容到第一个数组。

54.callback是一个回调函数，将一个函数当作参数传给另外的一个函数，被传的函数叫做回调函数，

主要的用意就是当主函数完成的时候，再去执行回调函数。

55. //背景变成黄色

if($("").hasClass("")){$().css("background","yellow")}

56. //点击文本框的时候变成黄色，如果离开就变回原样

var textOnFocus = function (obj){ //获取焦点事件

$(obj).css("background-color","#f5eb70");

};

var textOnBlur = function (obj){ //失去焦点事件 //textOnBlur怎样用

$(obj).css("background-color","#fff");

};

</script>

57. $("input[name ='uname']") 获得input标签中的name='uname'的元素对象

58. //获取对象的属性

$("Element").attr(key) 获取某一个元素的属性

$("Element").attr(key,value) 给某一个元素设置属性

59. //其他对象的获取方法 57是例子

$("Element[attribute='ceshi']")获得所有某个属性为ceshi的元素

$("Element[attribute !='ceshi']")获得所有某个属性不为ceshi的元素

$("Element[attribute ^='ceshi']")获得所有某个属性为不是ceshi的开头的元素

$("Elemnet[attribute *='ceshi']")获得所有某个属性包含ceshi的开头的元素

60.this 是 JavaScript 语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。比如：

function test() {

this.x = 1;

}

随着函数使用场合的不同，this 的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

61.<%%>是说这里面的文本不是普通直接输出到客户端的文本，而是需要服务器来解释的。不光是可以写JAVA脚本，

这要看具体服务器端使用的是什么技术ASP/JSP/PHP/ASP.NET都使用相同或相似的技术。

eg：<%=USERNO.ClientID %>

62. JSON.stringify(value[, replacer [, space]]) //把对象的类型转换成字符串类型

eg：var students = new Array();

students[0] = "pika";

students[1] = "hello";

students[2] = "hey";

var json = JSON.stringify(students);

alert(json);

结果：["pika","hello","hey"]

63. linq.js的用法：

（1）where查询：var arrRes = Enumerable.From(myList).Where("x=>x.Name=='Jim'").ToArray();

（2）排序：OrderBy：

var myList = [

{ Name: "Jim",www.baohuayule.com Age: 20 },

{ Name: "Kate", Age: 21 },]

var arrRes = Enumerable.From(myList).OrderBy("x=>x.Age").ToArray();//降序OrderByDescending()

(3)遍历：ForEach：

Enumerable.From(myList).ForEach(function(value, index){

document.write("值="+value+",索引="+index);

});

（4）取唯一的对象：First,FirstOrDefault,Last,LastOrDefault,Single,SingleOrDefault

var arrRes = Enumerable.From(myList).FirstOrDefault("x=>x.Age>18");

(5)Skip,Take

Enumerable.Range(1,10).Skip(5)//结果[6,7,8,9,10]

Enumerable.Range(1,10).Take(5)//结果[1,2,3,4,5]

(6)取交集、取差集、合并

差集：

var array1 = [1,412,5,3,5,412,7];

var array2 = [20,12,5,5,7,310];

Enumerable.From(array1).Except(array2)

//结果3,412,1

交集：

var array1 = [1,412,5,3,5,412,7];

var array2 = [20,12,5,5,7,310];

Enumerable.From(array1).Intersect(array2)

//结果5,7

并集：

var array1 = [1,412,5,3,5,412,7];

var array2 = [20,12,5,5,7,310];

Enumerable.From(array1).Union(array2)

//结果是两个结果集里面所有值，并自动去重

64.appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容

65.选择器

(1)通配符：

$("input[id^='code']");//id属性以code开始的所有input标签

$("input[id$='code']");//id属性以code结束的所有input标签

$("input[id*='code']");//id属性包含code的所有input标签

(2)根据索引选择

$("tbody tr:even"); //选择索引为偶数的所有tr标签

$("tbody tr:odd"); //选择索引为奇数的所有tr标签

(3)获得jqueryObj下一级节点的input个数

jqueryObj.children("input").length;

(4)获得class为main的标签的子节点下所有<a>标签

$(".main > a");

(5)选择紧邻标签

jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div，nextAll获取所有

2.筛选器

$("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签

3.事件

复制代码

//处理文本框上的键盘操作

jqueryObj.keyup(function(event){

var keyCode = event.which;//获取当前按下键盘的键值，回车键为13

}

复制代码

4.工具函数

$('#someField').val($.trim($('#someField').val()));//消除空格，语法：$.trim(value)

66.找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色

eg：$("div").children(".selected").css("color", "blue");

67.trim 他的所用是去掉字符序列左边和右边的空格

68. aFixInvestmentManagerList[i].OPERATE_TIME = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");

//操作时间

70.string.IsNullOrEmpty // 用来判断字符串是否为空字符串啊，空字符串有两种情况，一种为字符串里的值为空字符串，另一种是没有给字符串分配任何的值

如果用IsNullOrEmpty来判断这俩个字符串的话，都返回true

eg：pensionSepcial.INVESTMENT_STATUS = string.IsNullOrEmpty(pension.INVESTMENT_STATUS)?"":GetProductManageOrState(pension.INVESTMENT_STATUS, "9019");

71.escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。

72.可以使用 unescape() 对 escape() 编码的字符串进行解码

73. //自动写时间

function AutoWriteDate()

{

var dateObj = new Date();

var dateObj1 = new Date(); //new Date()就是一个目前的时间，现在的时刻

$("#BegDate").val(new Date(dateObj.setMonth(dateObj.getMonth() - 1)).format('yyyy-MM-dd'));

$("#EndDate").val(dateObj1.format('yyyy-MM-dd'));

}

74. JS FORMAT 方法：格式化时间

75.jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

76.通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：

$(".btn1").click(function(){

$("p").slideToggle();

});

77. Index 的用法：indexOf 方法返回一个整数值，指出 String 对象内子字符串的开始位置。如果没有找到子字符串，则返回-1。

如果 startindex 是负数，则 startindex 被当作零。如果它比最大的字符位置索引还大，则它被当作最大的可能索引。

eg：public class Test {

public static void main(String[] args) {

String s = "xXccxxxXX";

// 从头开始查找是否存在指定的字符 //结果如下

System.out.println(s.indexOf("c")); //2

// 从第四个字符位置开始往后继续查找，包含当前位置

System.out.println(s.indexOf("c", 3)); //3

//若指定字符串中没有该字符则系统返回-1

System.out.println(s.indexOf("y")); //-1

System.out.println(s.lastIndexOf("x")); //6

}

78.四种方法，如下：

1、int indexOf(String str) ：返回第一次出现的指定子字符串在此字符串中的索引。

2、int indexOf(String str, int startIndex)：从指定的索引处开始，返回第一次出现的指定子字符串在此字符串中的索引。

3、int lastIndexOf(String str) ：返回在此字符串中最右边出现的指定子字符串的索引。

4、int lastIndexOf(String str, int startIndex) ：从指定的索引处开始向后搜索，返回在此字符串中最后一次出现的指定子字符串的索引。

79. ProductAdd.push.apply(ProductAdd, pensionList.Tempension) //在后面加列表

80. if ($.trim($("#PRODUCTCODE_W").val()) == "")

{

$.messager.alert("提示", "产品代码不能为空", "warning");

return false;

}

81. //验证产品类型是否为空

if ($("#PRODUCTTYPE").combobox("getValues") == "")

{

$.messager.alert("提示", "产品类型不能为空", "warning");

return false;

}

82.outCostArr1 = $("#OUT_COSTRULES_TB_AFTER").datagrid("getData").rows;

83.

HTML 元素
jQuery 对象

DOM 元素

缘来是你windy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 笔记

1.jQuery 语法实例$(this).hide() 演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。$("p").hide() 演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。$(".test").hide() 演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。$("#test").hide() 演示 jQuery 的 hide() 函数，隐藏 id...
复制链接

扫一扫