JQ语法
各位朋友，很高心你们来到个人博客，今天我将带领你们学习和回顾一下JQ基本语法，让咱们的编码变得简简单单，Let's go!!! jquery学习网站javascript
jQuery 语法:
原理：jQuery 语法是为 HTML 元素的选取编制的，能够对元素执行某些操做。css
基础语法是：$(selector).action()html
- 美圆符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操做
知道了上面的语法后，咱们就能够但是编译的过程了，本次介绍为面向过程的方法java
1、 文档就绪函数jquery
$(document).ready(function(){
--- jQuery functions go here ----
});
2、 jQuery 名称冲突api
var Y=jQuery.noConflict()，帮助您使用本身的名称（好比 Y）来代替 $ 符号。浏览器
3、 jQuery 选择器 服务器
1. jQuery 元素选择器app
jQuery 使用 CSS 选择器来选取 HTML 元素。ide
$("p") 选取 <p> 元素。
$("p.intro") 选取全部 class="intro" 的 <p> 元素。
$("p#demo") 选取全部 id="demo" 的 <p> 元素。
2. jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取全部带有 href 属性的元素。
$("[href='#']") 选取全部带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取全部带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素。
3. jQuery CSS 选择器
4. 更多的选择器
4、 jQuery 事件
事件绑定：.bind() .delegate() .off() .on() .one() .trigger() 等
鼠标事件：.click() .contextmenu() .dblclick() .hover() .mousedown() .mouseenter() .mouseleave() .mousemove() .mouseout() .mouseover()
//点击事件-简写
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
});
//点击事件
$( "p" ).on( "click", function() {
console.log( "click" );
});
//绑定多个事件
2个事件执行一个函数
$( "input" ).on(
"click change", //
function() {
console.log( "An input was clicked or changed!" );
}
);
2个事件执行各自的函数（事件放在对象里）
$( "p" ).on({
"click": function() { console.log( "clicked!" ); },
"mouseover": function() { console.log( "hovered!" ); }
});
$( "p" ).off( "click" ); //关闭click事件
2个事件执行各自的函数（事件链接在一块儿）
var foo = function() { console.log( "foo" ); };
var bar = function() { console.log( "bar" ); };
$( "p" ).on( "click", foo ).on( "click", bar );
$( "p" ).off( "click", bar );
// 只第一次点击有效
$( "p" ).one( "click", firstClick );
// 鼠标悬浮(移入和移出)
$( "p" ).hover(function() {
$( this ).toggleClass( "hover" );
});
事件对象 - Event : event.pageX event.pageY event.preventDefault() event.stopPropagation() event.type event.data event.result
// 阻止a标签的默认事件
// 点击a,打印出其内容 -codeone
$( "#list a" ).on( "click", function( event ) {
event.preventDefault();
console.log( $( this ).text() );
});
// 点击#list下面全部herf带有http的a标签，让其增长一个target的属性，值为_blank; -codetwo
$( "#list" ).on( "click", "a[href^='http']", function( event ) {
event.preventDefault();
$( this ).attr( "target", "_blank" );
});
$( "#list" ).on( "click", "a", function( event ) {
event.preventDefault();
var elem = $( this );
if ( elem.is( "[href^='http']" ) ) {
elem.attr( "target", "_blank" );
}
});
// 文档加载后，无需点击，a自动执行上述点击后的函数 -codethree
$( "a" ).trigger( "click" );
表单事件：.blur() .change() .focus() .select() .submit()
两种方式均可,event阻止submit默认事件
$( "#form" ).on( "submit", function( event ) {
// 取消默认事件
event.preventDefault();
// 取消冒泡
event.stopPropagation();
});
$( "#form" ).on( "submit", function( event ) {
// 取消默认事件和取消冒泡
return false;
});
一个元素的值改变的时候将触发change事件。此事件仅限用于<input>元素，<textarea>和<select>元素。
对于下拉选择框，复选框和单选按钮，当用户用鼠标做出选择，该事件当即触发，但对于其余类型的input元素，
该事件触发将推迟，直到元素失去焦点才会触点。
select多选框：
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
js代码：
$('.target').change(function() {
alert("已触发change");
});
键盘事件：.keydown() .keypress() .keyup()
5、 jQuery 效果
隐藏、显示、切换，滑动，淡入淡出，以及动画，这些都是JQ自带的一些方法，哇哦，貌似很厉害！
下面二中写法均可以实现相同的效果！后者是前者的简写形式
$("#btn").on("click",function(){}) == $("#btn").click(function(){})
$("#btn").on("click",function(){
$("#box").show(1000); //点击时，id为box显示，动画时间1s
})
$("#btn").on("click",function(){
$("#box").hide(1000); //点击时隐藏
})
$("#btn").on("click",function(){
$("#box").toggle(1000); //点击隐藏or显示的切换
})
$("#btn").on("click",function(){ //淡入
$("#box").fadeIn(1000);
})
$("#btn").on("click",function(){ //淡出
$("#box").fadeOut(1000);
})
$("#btn").on("click",function(){ //淡入or淡出的切换
$("#box").fadeToggle(1000);
})
$("#btn").on("click",function(){
$("#box").slideDown("fast"); //下滑 参数：slow/fast/毫秒
})
$("#btn").on("click",function(){ //上滑
$("#box").slideUp("slow");
})
$("#btn").on("click",function(){ //下滑or上滑的切换
$("#box").slideToggle(4000);
})
$("#btn").on("click",function(){ //css与animate不一样在于过渡效果
//$("#box").css({
// width:"800px",
// left:"100px",
//})
$("#box").animate({ //宽度和左偏移量为同步进行
width:"800px",
left:"100px",
},1000)
})
JQ中调用多个动画， 提供针对动画的队列功能。
$("#btn").on("click",function(){
$("#box").stop(true,false); //前个false中止当前动画，执行后面排队动画（true为不执行后面动画），后个false默认中止当前动画(true为直接跳转此动画结束)
})
设置时间的方法：
// 动画默认时间
{
slow: 600,
fast: 200,
_default: 400 // Default speed, used for "normal"
}
// 修改和自定义动画时间
jQuery.fx.speeds.fast = 300; // fast由默认200变成300
jQuery.fx.speeds.blazing = 100; // 自定义的动画时间参数
jQuery.fx.speeds.excruciating = 60000; // 自定义的动画时间参数
执行队列动画的方法：
执行队列动画的几种方法的
// next()开启下一个动画，
$("div").on("click",function(){
$(this).animate({width:"+=60px"},1000)
.queue(function(next){
console.log("事件1");
next();
})
.queue(function(next){
console.log("事件2");
next();
})
.queue(function(next){
console.log("事件3");
next();
})
.queue(function(next){
console.log("事件4");
next();
})
.queue(function(next){
console.log("事件5");
next();
})
});
// dequeue()开启下一个
$("div").on("click",function(){
$(this).animate({width:"+=60px"},1000)
.queue(function(){
console.log("事件1");
$(this).dequeue();
})
.queue(function(){
console.log("事件2");
$(this).dequeue();
})
.queue(function(){
console.log("事件3");
$(this).dequeue();
})
.queue(function(){
console.log("事件4");
$(this).dequeue();
})
.queue(function(){
console.log("事件5");
$(this).dequeue();
})
});
//自带的先执行即4先执行 4->1->2->3
//自定义的bi最后须要.dequeue("bi")调用
$("div").on("click",function(){
$(this)
.queue("bi",function(){
console.log("事件1");
$(this).dequeue("bi");
})
.queue("bi",function(){
console.log("事件2");
$(this).dequeue("bi");
})
.queue("bi",function(){
console.log("事件3");
$(this).dequeue("bi");
})
.queue(function(){
console.log("事件4");
})
.dequeue("bi")
});
6、 jQuery 文档操做方法
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| after() | 在匹配的元素以后插入内容。 |
| append() | 向匹配元素集合中的每一个元素结尾插入由参数指定的内容。 |
| appendTo() | 向目标结尾插入匹配元素集合中的每一个元素。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| before() | 在每一个匹配的元素以前插入内容。 |
| clone() | 建立匹配元素集合的副本。 |
| detach() | 从 DOM 中移除匹配元素集合。 |
| empty() | 删除匹配的元素集合中全部的子节点。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| insertAfter() | 把匹配的元素插入到另外一个指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另外一个指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每一个元素开头插入由参数指定的内容。 |
| prependTo() | 向目标开头插入匹配元素集合中的每一个元素。 |
| remove() | 移除全部匹配的元素。 |
| removeAttr() | 从全部匹配的元素中移除指定的属性。 |
| removeClass() | 从全部匹配的元素中删除所有或者指定的类。 |
| replaceAll() | 用匹配的元素替换全部匹配到的元素。 |
| replaceWith() | 用新内容替换匹配的元素。 |
| text() | 设置或返回匹配元素的内容。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| unwrap() | 移除并替换指定元素的父元素。 |
| val() | 设置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
| wrapAll() | 把全部匹配的元素用指定的内容或元素包裹起来。 |
| wrapinner() | 将每个匹配的元素的子内容用指定的内容或元素包裹起来。 |
//1. 读取元素内容
console.log($("#p0").text()); //不带html的标记，p0内容带的标签会被解析
console.log($("#p0").html()); //带html,p0内容带的标签不会解析
$("#a").on("click",function(){
alert($("input").val());
});
//2. 修改内容
$("#aa").on("click",function(){
$("p").text("二师兄不信");
})
//3. 查看属性
console.log($("#p1").attr("cc"));
//4. 修改属性
$("#p1").attr({"cc":500,"bb":"world","dd":"zsf"});
$("#p1").removeAttr("cc");
//5. 添加元素
$("#p2").append("<strong>哈哈</strong>"); //后面加
$("#p2").prepend("<strong>嘿嘿</strong>"); //前面加
$("#p2").before("<strong>哈哈</strong>"); //p以前
$("#p2").after("<strong>嘿嘿</strong>"); //p以后
//6. 删除元素
$("#div0").remove(); //删除自己及其子集，没法取回
$("#div0").empty(); //不删除自己
七： jQuery CSS 操做函数
| CSS 属性 | 描述 |
|---|---|
| css() | 设置或返回匹配元素的样式属性。 |
| height() | 设置或返回匹配元素的高度。 |
| offset() | 返回第一个匹配元素相对于文档的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一个匹配元素相对于父元素的位置。 |
| scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
| scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
| width() | 设置或返回匹配元素的宽度。 |
// css操做
//1. 增长css样式
$("#div1").addClass("aa bb"); //同时增长类名为aa和bb的样式，注意空格隔开
$("#toggle").on("click",function(){
$("#p1").toggleClass("aa bb"); // toggleClass是增长和删除的切换
});
//2. 删除css样式
$("#div1").removeClass("bb");
//3. 修改css样式
$("#div2").css("background","red");
//4. 查看css样式
console.log($("#div2").css("backgroundColor"));
console.log($("#div2").css("background-color"));
八：jQuery 遍历
body代码
<div id="box">
<ul id="ul">
<li class="li1">
<span></span>
</li>
<li class="li2">
<p></p>
</li>
<li class="li3">
<img src="#">
</li>
<li class="li4">
<div class="box1"></div>
</li>
</ul>
</div>
js代码
$(document).ready(function(){
$("span").parent(); //li1 父级
$("p").parents(); //li2,ul,box,body 全部祖先
$("#box1").parents("ul"); // ul 过滤祖先仅要ul
$("img").parentsUntil("#box"); // li3,ul img和#box之间的祖先
$("img").parentsUntil("#box","ul"); // ul img和#box之间为ul的祖先
$("img").closest("li") //li3 最近的父级li
$("#ul").children(); // li1,li2,li3,li4 #ul直接子元素
$("#ul").children("li.li3"); // li3 #ul子元素里类名为li3的元素
$("#box").find("*"); //ul,li1~li4,span,p,img,#box1 全部后代
$("#box").find("span"); //span 全部后代span
$(".li1").siblings(); // li2,li3,li4 全部同胞
$(".li1").siblings(".li3"); // li3 全部同胞为.li3的元素
$(".li1").next(); //li2 下一个同胞
$(".li2").nextAll(); //li3 ,li4 随后全部的同胞
$(".li2").nextAll(".li3"); //li3 随后全部的.li3同胞
$(".li1").nextUntil(".li4"); // li2,li3 之间的同胞
// prev(), prevAll() & prevUntil() 与next方法相同，不过方向相反
$("div p").first(); // 首个div元素内部的首个P元素
$("div p").last(); //最后一个div元素内部的最后一个P
$("li").eq(1); //li2 索引值为1，从0计数，故为li2
$("li").filter(".li4"); // li4 不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$("li").not(".li4");// li1,li2,li3
});
九：jQuery Ajax 操做函数
优势：其中的函数和方法容许咱们在不刷新浏览器的状况下从服务器加载数据。
选项卡功能：
$("ul li").on("click",function(){
$(this).siblings().removeClass("active");
$(this).addClass("active");
console.log($(this).index());
$("div").eq(index).css({display:"block"});
});
相关文章
- 1. jQ $.extend用法
- 2. jQ live用法
- 3. jq的ajax方法
- 4. JQ 的 AJAX 方法
- 5. JQ方法大全
- 6. jq插件写法
- 7. JQ中$.each的用法
- 8. vue引入JQ的方法
- 9. js,jq基本用法
- 10. jQ中的Ajax方法
- 更多相关文章...
- • SQLite 语法 - SQLite教程
- • PHP 语法 - PHP教程
- • Kotlin学习（一）基本语法
- • 算法总结-回溯法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. jQ $.extend用法
- 2. jQ live用法
- 3. jq的ajax方法
- 4. JQ 的 AJAX 方法
- 5. JQ方法大全
- 6. jq插件写法
- 7. JQ中$.each的用法
- 8. vue引入JQ的方法
- 9. js,jq基本用法
- 10. jQ中的Ajax方法