jq-2

1.两种写法

$(function () {
$("#btn").click(function () {
$("input[type=button]").val("中国");//设置普通按钮的value为中国
$("input[type=text]").val("中国");//设置文本按钮的value为中国

  简写方式:
$(":button").val("中国");
$(":text").val("中国");
});
});

2.----

$("div:contains(foo)").css("color","#f00");//将包含foo的div的css设置成红色

$(":disabled").val("中国");//将禁用的按钮的value设置成中国

3----not方法---排除

$("input:not(:text)").val("中国");//将所有的按钮中不是text的设置成中国
$("input").not(":text").val("中国");//not可以拿到外面去与eq()一样

注:not只针对于前面的结果集,not(":text")里不再加上标签。

  如not("p:text")是错误的

4--  .size()

alert($("div").size());//获取所有的div的个数

5------

$(“img[title]”)[1]  获取所有设置了title属性的img标记中的第二个元素。

等效于:$(“img[title]”).eq(1)

6----

alert($("div").index($("div[title=‘你好‘]")));//获取所有的div  且 这个div是设置了title属性值等于 ’你好’ 的div   的索引值

          条件

alert($("div").index($("div[title=‘你好‘]").eq(1)));//获取所有的div  且 这些div是设置了title属性值等于 ’你好’ 的div的第二个   的索引值

7------$(this)-----获取当前对象

$("div").click();//所有的div的点击事件

$("div").click(function () {
alert($(this).index());//当前对象的索引
alert($(this).text());//当前对象的文本内容
});

8-------------------

text是文本内容

value是属性值

title是鼠标放上去之后的提示

9--------------------.addClass("imgborder") 和 .addClass("imgborder")

$("img[alt],img[title]").addClass("imgborder");//给设置了alt 和 title 的img标签添加imgborder样式
$("img").eq(3).addClass("imgborder");//去除第4个img的imgborder样式

10--------------------

设置了id, 并在css里面相应设置了样式之后,addclass不再起作用。

为什么: 因为加上的是class,其优先级比id低。

11------------------------filter方法-----筛选出(选择它)

$(“li”).filter(“[title*=isaac]” )

  等同于

$(“li[title*=isaac]”)

对所有的li,筛选出title属性包含isaac的li标签

12----------find--搜索

$("p").find("span")

在所有的p标签里去找span标签

13---is----判断----返回bool类型

$("div").is("img")

页面中的div是否包含了img标记

14------jquery链

$(“div”).addClass(“myClass1”).filter(function(index){return index==1||$(this).attr(“id”)==”fourth”}).addClass(“myClass2”);

整体div加myClass1,然后进行筛选,筛选出的元素再加myClass2

其中筛选(用了一个函数function(){} )的元素是:  index==1的div  和  当前对象的id等于fourth的div

15---------end()----andself()---

.end()---是找到当前结果集的上一级标签

$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”)

在所有的p标签里搜索span再加上myClass1

再找到当前结果集span的上一级p再加上myClass2

.andself()---是---当前结果集 以及 当前结果集的上一级

$(“div”).find(“p”).addClass(“myBackground”). andSelf().addClass(“myBorder”)

在所有的div里搜索p再加上myBackground

再在当前结果集p 以及 当前结果集的上一级div加上myBorder

16----.each()----遍历--对结果集进行遍历

$("div").each(function(index){

  var i = index +1;

  $(this).attr("title", "我是第" + i +"个div");

})

当鼠标放在第5个div上时,each()会遍历一次,将第5个的title属性值设置为我是第5个div

17----.attr()-----设置和获取-----removeAttr()---移除属性--

$(“div:eq(1)”).attr(“title”);

   获取第二个div的title属性

$("div").eq(1).attr("title");

$("div":eq(1)).attr("title", "你好");

  设置第二个div的title属性

$("div").eq(1).attr("title", "你好");

-移除属性

$("div").eq(1).removeAttr("title")

18----.css()相当于内联样式 --------优先级-------内联样式 > id > class > 标签

.css("color","red")变成了style="color:red;"

19------多个样式的写法

$("div").eq(3).css({"color": "red", "font-size": "60px"});

加一两个可以用,多个不建议使用

多个是使用addClass()

$("div").eq(3).addClass("d1", "d2");

时间: 2024-12-28 16:39:01

jq-2的相关文章

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

自写原生jq滚轮插件

自己仿bootStarp插件写的,思路局限,仅供交流,有好的建议还请不吝赐教//使用方法:                //html:需要ul>li>a的模式,a需要类名,需要设置page-scroll属性,page-scroll属性需要1以数字结尾,容器为所变化的最大页面                //js:请传入一个事件对象,对象需要传入属性:pageAnchorName(锚点id)及contianer(容器类)                //下标jq对象传入$navIndex属

jQ控制前端输入用户为空是的提醒

1.在jQ中$(function(){})函数的意思是 $(document).ready(function(){}) 的简写,用来在DOM加载完成之后执行一系列预先定义好的函数 placeholder属性提供可描述输入字段预期值的提示信息(hint),该提示会在输入字段为空时显示,并会在字段获得焦点时消失 <input type="password" name="password" placeholder="密码"> jq文件 &l

【JQ成长笔记】jQuery Validate验证插件

validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 需要引入的js 1 <script type="text/javascript" src="../../scripts/jquery-1.3.1.js&qu

jq --- shell命令模式下JSON格式化利器

开发restful 的web api时,一般使用JSON作为返回数据的格式,调试使用curl命令十分方便, 但是curl有个问题就是返回的JSON数据包并没有格式化,不利于读,在数据复杂时更是灾难, 这时候很多人就使用postman这样的带UI的工具,我个人还是比较喜欢curl,所以找到了一个 JSON格式化工具:jq,下面是效果 原始效果: $ curl http://localhost:8080/get{"name":"hh","data":

【jq】JQuery对select option的操作

下拉框 <select id="selectID"> <option vlaue="1">1</option> <option vlaue="2">2</option> <option vlaue="3">3</option> </select> jq针对下拉框的基本操作有 //选择更改事件 $("#selectID&qu

jq放大镜效果

之前有在网上见过原生js实现放大镜的效果,但是代码量略多,今天和大家分享下我自己用jq实现的放大镜效果吧! 首先html布局结构和样式 贴上代码给大伙看一下: html结构: <div class="pic"> <img src="images/xiaotu.jpg" > <div class="big-pic"></div> </div> css样式: .pic{position:re

require.js JQ

require.js和sea.js的作用都是一样的. 为了解决两大问题,第一实现js文件的异步加载,避免网页失去响应,第二管理模块之间的依赖性. 基本的模板 define(function(require,exports,module){ exports.getStyle = function (obj,name){ //你初始的模块 } }) define(function(require,exports,module){ var get = require('get');//引入初始模块(基

jq中ajax的使用

jq中ajax必须在服务器环境下使用 $.ajax({ url:"json.json", //请求的url地址 dataType:"json", //返回格式为json type:"GET", //请求方式 beforeSend:function(){ $('#div3').html('加载中...') }, success:function(data,status){//第一个参数包含获取的内容,第二个参数为执行的状态 var tt="

JQ实战一之烟花

本次的效果大概为当用户点击网页时,网页下方弹出一个类似烟花的长条条,然后在桌面上散开以达成类似烟花的特效.话不多说先上图. 首先布局,布局很简单 <style> body { background:#000; overflow:hidden;} </style> 接着js部分,主要以JQ为主 <body> <script type="text/javascript" src="js/jquery-1.10.2.min.js"